/* ==========================================================================
   PABLO LAGO | Advocacia Tributária
   tokens.css — fonte única de cor, tipo, espaço e forma.

   Autoridade: specs/design.md. Não invente valor aqui.
   Cores marcadas MANUAL vêm de "tipografia e paleta de cores.jpeg"
   e são imutáveis. As demais são derivadas e aprovadas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes — auto-hospedadas, subset latino
   Cinzel é variável: um arquivo cobre 400–700.
   Calibri vem primeiro na pilha do corpo: em Windows ela já existe no
   sistema e renderiza nativamente. Carlito é o substituto métrico para
   todo o resto — mesmas larguras, sem salto de layout.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-latin-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Carlito';
  src: url('../fonts/carlito-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Carlito';
  src: url('../fonts/carlito-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* ------------------------------------------------------------------------
     COR — do manual (imutáveis)
     ------------------------------------------------------------------------ */

  --ink:          #1A1A1A;   /* MANUAL — fundo base, texto sobre claro       */
  --gold-light:   #F7E59E;   /* MANUAL — acento sobre escuro, foco           */
  --gold-deep:    #705440;   /* MANUAL — bronze. GRÁFICO, nunca texto no escuro */

  /* ------------------------------------------------------------------------
     COR — derivados aprovados
     ------------------------------------------------------------------------ */

  --ink-deep:     #121212;   /* camada mais funda: hero, rodapé              */
  --ink-raised:   #232323;   /* cards e superfícies elevadas no escuro       */
  --ink-line:     #2E2E2E;   /* bordas no escuro                             */

  --gold-mid:     #C9A86A;   /* dourado de UI legível no escuro — 7,7:1      */
  --gold-soft:    #D9BE78;   /* meio-tom do gradiente metálico               */

  --bone-50:      #FAF8F3;   /* fundo claro quente                           */
  --bone-100:     #F2EDE3;   /* faixa clara alternada                        */
  --bone-200:     #E4DCCB;   /* bordas no claro                              */
  --bone-text:    #E8E4DC;   /* corpo de texto sobre escuro — 13,7:1         */

  --gray-600:     #5A5A5A;   /* texto secundário sobre claro — 6,5:1         */
  --white:        #FFFFFF;

  --whats:        #25D366;   /* exclusivo do botão de WhatsApp               */

  /* Gradiente metálico. Botão primário, filetes, sublinhado de H1.
     Nunca como fundo de bloco grande nem atrás de texto corrido. */
  --gradient-gold: linear-gradient(100deg,
    #705440 0%, #C9A86A 18%, #F7E59E 42%, #D9BE78 66%, #705440 100%);

  /* ------------------------------------------------------------------------
     TIPOGRAFIA
     Cinzel é capitular: só H1–H3, eyebrow e botão, sempre caixa alta e
     frase curta. Corpo, FAQ aberto e legenda sempre em Calibri/Carlito.
     ------------------------------------------------------------------------ */

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body:    'Calibri', 'Carlito', 'Segoe UI', system-ui, sans-serif;

  /* Piso 2rem = 32px (medido em 360px: a 36px eram 6 linhas).
     Teto 3rem = 48px: o H1 vive numa coluna de ~650px, não na largura
     toda, então 64px dava 6 linhas no desktop. Coeficiente 3.8vw para
     a rampa não estourar em 1024px. Ver design.md §3. */
  --size-h1:      clamp(2rem, 3.8vw, 3rem);
  --size-h2:      clamp(1.75rem, 4vw, 2.75rem);
  --size-h3:      clamp(1.125rem, 2vw, 1.375rem);
  --size-eyebrow: 0.8125rem;
  --size-body-l:  1.125rem;
  --size-body:    1rem;
  --size-small:   0.875rem;
  --size-caption: 0.8125rem;
  --size-button:  0.9375rem;

  --leading-h1:   1.1;
  --leading-h2:   1.2;
  --leading-h3:   1.3;
  --leading-body: 1.7;

  --track-title:   0.02em;
  --track-h3:      0.03em;
  --track-eyebrow: 0.18em;
  --track-button:  0.08em;

  --measure: 65ch;

  /* ------------------------------------------------------------------------
     ESPAÇO — base 4px
     ------------------------------------------------------------------------ */

  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;  /* fora da escala base; exigido por design.md §4 (corpo → CTA) */
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-128: 128px;
  --space-160: 160px;

  --container: 1200px;
  --gutter:    20px;              /* mobile; sobe para 24px em ≥768px         */
  --section-y: var(--space-64);   /* mobile; sobe para 128px em ≥1024px       */
  --grid-gap:  20px;              /* mobile; sobe para 32px em ≥768px         */

  --nav-h:        64px;
  --scroll-pad:   96px;

  /* ------------------------------------------------------------------------
     FORMA
     ------------------------------------------------------------------------ */

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

  --border:      1px;
  --shadow-card: 0 1px 3px rgba(26, 26, 26, .06);
  --glow-gold:   0 8px 24px rgba(247, 229, 158, .18);

  /* ------------------------------------------------------------------------
     MOVIMENTO — nada acima de 600ms
     ------------------------------------------------------------------------ */

  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-reveal:    500ms;
  --dur-card:      250ms;
  --dur-button:    200ms;
  --dur-accordion: 200ms;
  --dur-header:    300ms;
  --stagger:       80ms;

  /* Alvo de toque mínimo */
  --tap: 48px;
}

@media (min-width: 768px) {
  :root {
    --gutter:   24px;
    --grid-gap: var(--space-32);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-y: var(--space-128);
    --nav-h:     80px;
  }
}