/* ============================================================
   TOKENS — Variáveis globais (cores, fontes, espaços, raios)
   Próximo Passo — Boutique de SEO B2B
   ============================================================ */

:root {

    /* ---------- Fontes ---------- */
    --font-display: "Gantari", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Gantari", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---------- Cores — marca (V5: paleta azul, sem roxo) ---------- */
    --color-navy: #001E62;
    --color-navy-deep: #001037;
    --color-navy-mid: #0A2E7A;
    --color-purple: #4DA3E3;        /* antes #A24FC6 magenta · agora azul claro pra manter variação no gradiente */
    --color-violet: #0072CE;        /* antes #5B57C8 roxo · agora azul (var principal de "destaque") */
    --color-blue: #0072CE;
    --color-lilac: #A7D0F0;         /* antes #B9A7F0 lilás · agora azul-céu suave (uso em on-dark) */

    /* Acento (cor chapada — V4 anti-clichê: substitui gradiente em UI) */
    --color-accent: #0072CE;        /* antes #5B57C8 · igual ao violet/blue */
    --color-accent-tint: #E5F0FA;   /* antes #ECEBF7 · tint do azul */
    --color-label: #0058A0;         /* antes #3F49A6 · azul escuro */
    --color-lilac-soft: #A7C5E8;    /* antes #A7B2E8 · mais azul */

    /* ---------- Cores — neutras ---------- */
    --color-bg: #FCFCFD;
    --color-surface: #FFFFFF;
    --color-bg-alt: #F1F3F8;
    --color-text: #3C4A66;
    --color-text-soft: #727F97;
    --color-heading: #041640;

    /* ---------- Linhas / bordas ---------- */
    --line: rgba(4, 22, 64, 0.10);
    --line-strong: rgba(4, 22, 64, 0.16);
    --line-dark: rgba(255, 255, 255, 0.12);

    /* ---------- Gradientes ----------
       --grad-moment: ÚNICO momento real de gradiente no site (brilho do .cta-glow).
       --grad / --grad-soft: agora cor chapada accent (V4 anti-clichê). Os nomes
       são mantidos para compatibilidade com componentes que esperam essas vars. */
    --grad-moment: linear-gradient(115deg, #4DA3E3 0%, #0072CE 50%, #005FA8 100%);
    --grad: var(--color-accent);
    --grad-soft: var(--color-accent-tint);

    /* ---------- Sombras ---------- */
    --shadow-sm: 0 1px 2px rgba(4, 22, 64, 0.04), 0 4px 16px rgba(4, 22, 64, 0.05);
    --shadow-md: 0 2px 4px rgba(4, 22, 64, 0.05), 0 18px 48px -12px rgba(4, 22, 64, 0.14);
    --shadow-lg: 0 4px 8px rgba(4, 22, 64, 0.05), 0 30px 60px -22px rgba(4, 22, 64, 0.30);

    /* ---------- Layout ---------- */
    --container-max: clamp(825px, 86vw, 1640px);
    --pad-x: clamp(15px, 5vw, 56px);

    /* ---------- Raios ---------- */
    --radius-sm: clamp(4.5px, 0.5vw, 10px);
    --radius-md: clamp(7.5px, 0.9vw, 16px);
    --radius-lg: clamp(10.5px, 1.2vw, 22px);
    --radius-pill: 999px;

    /* ---------- Espaços (escala vertical) ---------- */
    --space-1: clamp(3px, 0.4vw, 8px);
    --space-2: clamp(6px, 0.6vw, 12px);
    --space-3: clamp(9px, 0.9vw, 18px);
    --space-4: clamp(12px, 1.2vw, 24px);
    --space-5: clamp(15px, 1.6vw, 32px);
    --space-6: clamp(21px, 2.4vw, 44px);
    --space-7: clamp(30px, 3.5vw, 64px);
    --space-8: clamp(39px, 4.66vw, 82px);
    --space-9: clamp(50.3px, 6.52vw, 112px);
    --space-10: clamp(72px, 10vw, 160px);

    /* ---------- Tipografia (escala fluida — reduzida 10% globalmente) ---------- */
    --fs-mono: clamp(7.5px, 0.7vw, 13px);
    --fs-eyebrow: clamp(7.5px, 0.7vw, 12px);
    --fs-xs: clamp(8.3px, 0.77vw, 14px);
    --fs-sm: clamp(9px, 0.83vw, 14px);
    --fs-base: clamp(10.5px, 0.95vw, 16px);
    --fs-md: clamp(10.5px, 1.04vw, 18px);
    --fs-lg: clamp(12px, 1.22vw, 22px);
    --fs-xl: clamp(13.5px, 1.4vw, 25px);
    --fs-2xl: clamp(15px, 1.53vw, 29px);
    --fs-h3: clamp(13.5px, 1.4vw, 25px);
    --fs-h2: clamp(21.8px, 3.42vw, 50px);
    --fs-display: clamp(27px, 4.86vw, 79px);

    /* ---------- Easing / motion ---------- */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 220ms;
    --t-med: 360ms;
    --t-slow: 560ms;

    /* ---------- Z-index ---------- */
    --z-nav: 100;
    --z-mega: 50;
    --z-wa: 90;
    --z-modal: 200;

}

/* ============================================================
   MOBILE (≤640px): tokens reescalados pra leitura confortável
   em smartphone. Mantém clamp(px-min, vw, px-max) em tudo.
   ============================================================ */
@media (max-width: 640px) {
    :root {
        /* Tipografia: px-min e vw maiores pra ficar legível em 320–480px.
           NOTA: --fs-base e --fs-md (texto normal <p> e equivalentes)
           ficam -10% menores que os demais pra hierarquia mais clara. */
        --fs-mono: clamp(10px, 2.8vw, 13px);
        --fs-eyebrow: clamp(10px, 2.8vw, 12px);
        --fs-xs: clamp(11px, 3vw, 14px);
        --fs-sm: clamp(12px, 3.3vw, 14px);
        --fs-base: clamp(13px, 3.4vw, 14.5px);
        --fs-md: clamp(13.5px, 3.6vw, 16px);
        --fs-lg: clamp(17px, 4.5vw, 22px);
        --fs-xl: clamp(19px, 4.8vw, 25px);
        --fs-2xl: clamp(21px, 5.2vw, 29px);
        --fs-h3: clamp(18px, 4.6vw, 25px);
        --fs-h2: clamp(26px, 7vw, 50px);
        --fs-display: clamp(34px, 9vw, 79px);

        /* Espaços: leve respiro adicional nos críticos */
        --space-3: clamp(12px, 3vw, 18px);
        --space-4: clamp(15px, 3.6vw, 24px);
        --space-5: clamp(18px, 4.5vw, 32px);
        --space-6: clamp(24px, 6vw, 44px);
        --space-7: clamp(32px, 8vw, 64px);
    }
}