/* ==========================================================================
   tokens.css — Premium Vision Ótica
   Fonte de verdade: specs/design.md. Nenhum valor aqui é improvisado.
   ========================================================================== */

/* --- Fontes (D14: woff2 locais, subset latino) --------------------------- */
@font-face{font-family:Jost;src:url(../fonts/jost-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/jost-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* --- Paleta principal (design.md §3) --- */
  --laranja:#EB7D2A;          /* superfície e preenchimento. Texto sobre ele: SEMPRE grafite (6,20:1) */
  --laranja-hover:#D06A1E;    /* hover do preenchimento; grafite continua passando (4,76:1) */
  --laranja-texto:#A85212;    /* único laranja permitido em texto: 5,41 no branco / 4,97 no osso / 4,64 no laranja-claro */
  --laranja-vivo:#DC6A16;     /* topo do degradê dos números: 3,43 no branco (texto grande exige 3) */
  --laranja-fundo-num:#A8410B;
  --laranja-painel:#B74E14;   /* laranja queimado do painel: branco passa em 5,11:1 */
  --laranja-painel-rgb:183,78,20;/* base do degradê: 6,13 no branco */
  --laranja-claro:#FBEBDC;
  --grafite:#1C1A17;
  --osso:#F7F5F1;
  --branco:#FFFFFF;

  /* --- Paleta secundária --- */
  --cinza-texto:#6B6560;
  --cinza-borda:#E4DFD8;
  --cinza-fundo:#EDEAE4;
  --preto-rodape:#141210;
  --verde-whats:#25D366;
  --erro:#B3261E;
  --sucesso:#2E7D32;

  /* --- Tipografia (design.md §4 e §5, escala fluida AUD) --- */
  --f-titulo:Jost,"Century Gothic","Futura",system-ui,sans-serif;
  --f-corpo:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-display:clamp(2.5rem,1.5rem + 3.2vw,4rem);
  --t-h1:clamp(2rem,1.3rem + 2.2vw,3rem);
  --t-h2:clamp(1.625rem,1.2rem + 1.3vw,2.25rem);
  --t-h3:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --t-lead:clamp(1.0625rem,1rem + .4vw,1.25rem);
  --t-corpo:clamp(1rem,.97rem + .13vw,1.0625rem);
  --t-pequeno:clamp(.875rem,.85rem + .13vw,.9375rem);
  --t-micro:.8125rem;          /* 13px fixo — piso AUD-04 */
  --t-botao:.9375rem;

  --medida:62ch;               /* AUD-03 */
  --medida-titulo:20ch;

  /* --- Espaçamento (design.md §6, grade de 8px) --- */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;

  --container:1280px;
  --gutter:20px;               /* sobrescrito nos breakpoints */
  --secao-y:var(--e-7);   /* respiro das seções no celular: 48px em vez de 64 */
  --fade-secao:clamp(48px,7vw,104px);  /* faixa em que o claro derrete no degradê */
  --fade-painel:clamp(80px,11vw,160px);/* degradê longo do painel laranja */
  --h-hero-midia:min(133.33vw,60vh);  /* altura da foto do hero no celular */
  --grid-gap:var(--e-4);

  --h-barra-topo:32px;
  --h-header:64px;
  --offset-topo:96px;          /* barra + header */

  /* --- Bordas e raios (design.md §7) --- */
  --r-pequeno:6px; --r-medio:12px; --r-grande:20px; --r-pill:999px;
  --borda:1px solid var(--cinza-borda);
  --sombra-suave:0 1px 2px rgba(28,26,23,.04),0 8px 24px rgba(28,26,23,.06);
  --sombra-flutuante:0 4px 16px rgba(28,26,23,.16);

  /* --- Movimento (design.md §11) --- */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-rapido:150ms; --t-medio:250ms; --t-lento:500ms;

  /* --- z-index (AUD-10) — nada fora desta escala --- */
  --rolagem:0;              /* 0 no topo, 1 no fim — move o fundo dinâmico */

  --z-card:1; --z-barra:100; --z-header:200; --z-whats:300;
  --z-gaveta-fundo:400; --z-gaveta:500; --z-painel:600; --z-zoom:700;
}

@media (min-width:600px){ :root{ --gutter:32px; --grid-gap:var(--e-6); } }
@media (min-width:900px){
  :root{
    --gutter:32px; --secao-y:var(--e-10);
    --h-barra-topo:36px; --h-header:80px; --offset-topo:116px;
  }
}
@media (min-width:1200px){ :root{ --gutter:48px; } }