/**
 * Versaro Joias — Design Tokens
 *
 * Base visual centralizada do site.
 * Não aplicar estilos diretamente neste arquivo.
 * Aqui ficam apenas valores reutilizáveis.
 */

:root {
    /* =========================================================
       CORES OFICIAIS DA MARCA
       ========================================================= */

    --vs-color-carbono: #212121;
    --vs-color-chama: #6e341f;
    --vs-color-canela: #965f3e;
    --vs-color-areia: #c9beaa;
    --vs-color-perola: #e0dcd2;
    --vs-color-diamante: #edebe6;

    /* =========================================================
       CORES SEMÂNTICAS
       O componente usa a função da cor, não o nome original.
       ========================================================= */

    --vs-color-background: var(--vs-color-diamante);
    --vs-color-surface: var(--vs-color-diamante);
    --vs-color-surface-muted: var(--vs-color-perola);
    --vs-color-surface-warm: var(--vs-color-areia);
    --vs-color-surface-dark: var(--vs-color-carbono);
    --vs-color-surface-brand: var(--vs-color-chama);

    --vs-color-text: var(--vs-color-carbono);
    --vs-color-text-muted: rgba(33, 33, 33, 0.72);
    --vs-color-text-soft: rgba(33, 33, 33, 0.56);
    --vs-color-text-inverse: var(--vs-color-diamante);

    --vs-color-primary: var(--vs-color-chama);
    --vs-color-primary-hover: var(--vs-color-canela);
    --vs-color-primary-active: #572818;

    --vs-color-link: var(--vs-color-chama);
    --vs-color-link-hover: var(--vs-color-canela);

    --vs-color-border: rgba(33, 33, 33, 0.16);
    --vs-color-border-strong: rgba(33, 33, 33, 0.32);
    --vs-color-overlay: rgba(33, 33, 33, 0.48);

    --vs-color-focus: rgba(150, 95, 62, 0.32);
    --vs-color-selection: rgba(201, 190, 170, 0.72);

    /* Cores funcionais. Serão usadas com moderação. */

    --vs-color-success: #47634c;
    --vs-color-warning: #8a642f;
    --vs-color-error: #8a3732;

    /* =========================================================
       TIPOGRAFIA
       As fontes serão instaladas em uma etapa separada.
       ========================================================= */

    --vs-font-display:
        "Marcellus",
        Georgia,
        "Times New Roman",
        serif;

    --vs-font-body:
        "General Sans",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --vs-font-signature:
        "Manchester Signature",
        "Segoe Script",
        cursive;

    --vs-font-weight-light: 300;
    --vs-font-weight-regular: 400;
    --vs-font-weight-medium: 500;
    --vs-font-weight-semibold: 600;
    --vs-font-weight-bold: 700;

    --vs-font-size-xs: 0.75rem;
    --vs-font-size-sm: 0.875rem;
    --vs-font-size-base: 1rem;
    --vs-font-size-lg: 1.125rem;
    --vs-font-size-xl: 1.25rem;

    --vs-font-size-heading-sm: clamp(1.5rem, 2vw, 1.875rem);
    --vs-font-size-heading-md: clamp(2rem, 3.5vw, 3rem);
    --vs-font-size-heading-lg: clamp(2.75rem, 5vw, 4.75rem);
    --vs-font-size-display: clamp(3.25rem, 7vw, 7rem);

    --vs-line-height-tight: 1.05;
    --vs-line-height-heading: 1.15;
    --vs-line-height-body: 1.65;
    --vs-line-height-ui: 1.3;

    --vs-letter-spacing-tight: -0.025em;
    --vs-letter-spacing-normal: 0;
    --vs-letter-spacing-wide: 0.08em;
    --vs-letter-spacing-uppercase: 0.14em;

    /* =========================================================
       ESPAÇAMENTOS
       Escala baseada em múltiplos de 4 e 8 pixels.
       ========================================================= */

    --vs-space-1: 0.25rem;
    --vs-space-2: 0.5rem;
    --vs-space-3: 0.75rem;
    --vs-space-4: 1rem;
    --vs-space-5: 1.5rem;
    --vs-space-6: 2rem;
    --vs-space-7: 3rem;
    --vs-space-8: 4rem;
    --vs-space-9: 6rem;
    --vs-space-10: 8rem;
    --vs-space-11: 10rem;

    --vs-section-spacing-sm: clamp(3.5rem, 7vw, 6rem);
    --vs-section-spacing-md: clamp(5rem, 9vw, 8rem);
    --vs-section-spacing-lg: clamp(6rem, 12vw, 11rem);

    /* =========================================================
       CONTAINERS E LARGURAS
       ========================================================= */

    --vs-container-narrow: 46rem;
    --vs-container-content: 72rem;
    --vs-container-wide: 90rem;

    --vs-page-gutter:
        clamp(
            1rem,
            4vw,
            3rem
        );

    --vs-text-measure: 68ch;

    /* =========================================================
       BORDAS E RAIOS
       A marca deve evitar aparência excessivamente arredondada.
       ========================================================= */

    --vs-border-width: 1px;
    --vs-border-color: var(--vs-color-border);
    --vs-border-color-strong: var(--vs-color-border-strong);

    --vs-radius-xs: 2px;
    --vs-radius-sm: 4px;
    --vs-radius-md: 8px;
    --vs-radius-lg: 16px;
    --vs-radius-pill: 999px;

    /* =========================================================
       SOMBRAS
       Sombras discretas, quentes e sem aparência de aplicativo.
       ========================================================= */

    --vs-shadow-xs:
        0 1px 2px rgba(33, 33, 33, 0.06);

    --vs-shadow-sm:
        0 8px 24px rgba(33, 33, 33, 0.08);

    --vs-shadow-md:
        0 16px 48px rgba(33, 33, 33, 0.12);

    --vs-shadow-lg:
        0 28px 80px rgba(33, 33, 33, 0.16);

    /* =========================================================
       MOVIMENTO
       Transições suaves, precisas e sem efeito chamativo.
       ========================================================= */

    --vs-duration-fast: 160ms;
    --vs-duration-normal: 280ms;
    --vs-duration-slow: 600ms;

    --vs-ease-standard:
        cubic-bezier(0.2, 0.8, 0.2, 1);

    --vs-ease-enter:
        cubic-bezier(0.16, 1, 0.3, 1);

    --vs-ease-exit:
        cubic-bezier(0.7, 0, 0.84, 0);

    --vs-transition-color:
        color var(--vs-duration-fast) var(--vs-ease-standard),
        background-color var(--vs-duration-fast) var(--vs-ease-standard),
        border-color var(--vs-duration-fast) var(--vs-ease-standard);

    --vs-transition-transform:
        transform var(--vs-duration-normal) var(--vs-ease-standard);

    --vs-transition-opacity:
        opacity var(--vs-duration-normal) var(--vs-ease-standard);

    /* =========================================================
       CAMADAS
       ========================================================= */

    --vs-z-base: 1;
    --vs-z-dropdown: 100;
    --vs-z-sticky: 200;
    --vs-z-header: 300;
    --vs-z-overlay: 800;
    --vs-z-modal: 900;
    --vs-z-notification: 1000;
}