/*
 * Visagismo para Óticas — tokens do design system
 * Cores tiradas do logo (azul #002E74 e ardósia #6B7B90). Contrastes medidos
 * em WCAG 2.2; a ardósia do logo só serve para texto a partir de 24 px.
 */

/* Fontes hospedadas no próprio site (OFL): sem requisição ao Google */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/lexend-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lexend-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

:root {
    /* Cores */
    --cor-azul: #002E74;          /* títulos, botão principal, links (12,8:1 sobre branco) */
    --cor-azul-900: #001C47;      /* faixa final, rodapé, hover do botão */
    --cor-azul-100: #E6ECF5;      /* fundo de chips e realces */
    --cor-ardosia: #6B7B90;       /* segunda cor do logo, ícones, texto grande */
    --cor-ardosia-700: #4F5D70;   /* texto secundário (6,7:1) */
    --cor-ardosia-300: #A9B6C8;   /* texto sobre o azul escuro (8,1:1) */
    --cor-tinta: #0E1A2B;         /* texto do corpo (17,5:1) */
    --cor-nevoa: #F3F5F9;         /* fundo alternado das seções */
    --cor-linha: #DDE3EC;         /* bordas e divisórias */
    --cor-ambar: #E2A33B;         /* só a alça do comparador e o selo "Recomendada" */
    --cor-verde-zap: #16794A;     /* só o botão flutuante do WhatsApp */
    --cor-branco: #FFFFFF;

    /* Tipografia */
    --fonte-titulo: 'Lexend', system-ui, sans-serif;
    --fonte-texto: 'Inter', system-ui, sans-serif;
    --fs-hero: clamp(2.125rem, 1.43rem + 2.95vw, 3.5rem);   /* 34 → 56 px */
    --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);        /* 28 → 40 px */
    --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20 → 24 px */
    --fs-lead: clamp(1.125rem, 1.07rem + 0.23vw, 1.25rem);  /* 18 → 20 px */
    --fs-body: clamp(1rem, 0.97rem + 0.11vw, 1.0625rem);    /* 16 → 17 px */
    --fs-small: 0.875rem;                                    /* 14 px */

    /* Espaçamento (base 4 px) */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 24px;
    --esp-6: 32px;
    --esp-7: 48px;
    --esp-8: 64px;
    --esp-9: 96px;

    /* Raios por hierarquia */
    --raio-s: 6px;
    --raio-m: 12px;
    --raio-l: 24px;
    --raio-pill: 999px;

    /* Sombras com azul */
    --sombra-1: 0 1px 2px rgba(0, 30, 72, .06);
    --sombra-2: 0 24px 60px rgba(0, 30, 72, .16);

    /* Layout */
    --container: 1200px;
    --margem: 16px;
    --topo-altura: 64px;

    /* Movimento */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --rapido: 150ms;
}

@media (min-width: 768px) {
    :root {
        --margem: 32px;
        --topo-altura: 72px;
    }
}