/* GERADO — espelho de docs/design-system/tokens.css. NÃO editar aqui; altere a fonte no DS e re-copie. */
/* ============================================================================
   THAIS PIRES ADVOCACIA — DESIGN TOKENS
   Fonte da verdade: ../brand/brand-book.html (Manual de Marca v1.1)
   Arquitetura em 3 camadas: Primitivo → Semântico → Componente
   Use estes tokens em CSS, ou exporte para Style Dictionary / Tokens Studio.
   ============================================================================ */

:root {
  /* ───────────────────────── CAMADA 1 · PRIMITIVOS ───────────────────────── */

  /* Cor — paleta de marca */
  --cafe:         #3A322B;   /* Café Profundo — autoridade, tinta, texto */
  --taupe:        #9B8978;   /* Taupe Pires — assinatura, neutro quente */
  --areia:        #D8C7B4;   /* Areia — neutro estrutural de apoio */
  --champagne:    #EDE3D5;   /* Nude Champagne — fundo de seções */
  --offwhite:     #F7F3EC;   /* Off-white — canvas principal */
  --gold:         #AE914E;   /* Dourado Fosco — accent (uso mínimo ~10%) */
  --gold-soft:    #C9B07A;   /* Dourado Soft — variante suave */

  /* Cor — sistema de opacidade (derivado de #3A322B) */
  --ink-80:       rgba(58,50,43,.80);  /* texto alto contraste */
  --ink-60:       rgba(58,50,43,.70);  /* texto secundário */
  --ink-40:       rgba(58,50,43,.58);  /* labels, terciário */
  --line:         rgba(58,50,43,.12);  /* bordas, divisores */
  --line-2:       rgba(58,50,43,.22);  /* bordas secundárias */

  /* Cor — feedback semântico (alinhado à temperatura quente da marca) */
  --success:      #5E7355;   /* verde-oliva sóbrio */
  --warning:      #B8893E;   /* âmbar próximo ao dourado */
  --danger:       #A4453B;   /* terracota — alerta sem estridência */
  --info:         #6B7480;   /* cinza-azulado discreto */

  /* Tipografia — famílias */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Tipografia — pesos */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* Tipografia — escala (clamp responsivo) */
  --fs-display:  clamp(2.4rem, 6vw, 4.2rem);
  --fs-h1:       clamp(1.9rem, 4.5vw, 3rem);
  --fs-h2:       clamp(1.7rem, 3.4vw, 2.4rem);
  --fs-h3:       1.5rem;
  --fs-lead:     clamp(1.25rem, 2.6vw, 1.7rem);
  --fs-body-lg:  1.15rem;
  --fs-body:     1.05rem;
  --fs-small:    0.92rem;
  --fs-caption:  0.8rem;
  --fs-label:    0.72rem;
  --fs-micro:    0.62rem;

  /* Tipografia — line-height e tracking */
  --lh-tight:    1.04;
  --lh-snug:     1.3;
  --lh-base:     1.5;
  --lh-relaxed:  1.7;
  --ls-tight:    .005em;
  --ls-label:    .2em;
  --ls-eyebrow:  .3em;

  /* Espaçamento — base 4px */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* Layout */
  --container:  1180px;
  --gutter:     clamp(1.25rem, 4.5vw, 5rem);
  --sec-pad:    clamp(4.5rem, 11vh, 9.5rem);

  /* Raio */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   10px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* Sombra / elevação */
  --shadow-xs:  0 1px 2px rgba(58,50,43,.06);
  --shadow-sm:  0 2px 8px -2px rgba(58,50,43,.14);
  --shadow-md:  0 10px 24px -12px rgba(58,50,43,.30);
  --shadow-lg:  0 18px 40px -16px rgba(58,50,43,.40);
  --shadow-xl:  0 28px 60px -20px rgba(58,50,43,.50);
  --focus-ring: 0 0 0 3px rgba(174,145,78,.35);  /* foco dourado */

  /* Motion */
  --dur-fast:   200ms;
  --dur-base:   350ms;
  --dur-slow:   600ms;
  --dur-slower: 900ms;
  --ease-out:   cubic-bezier(.2,.7,.2,1);

  /* Breakpoints (referência — usados em @media) */
  --bp-sm:  560px;
  --bp-md:  760px;
  --bp-lg:  960px;
  --bp-xl:  1180px;

  /* ───────────────────────── CAMADA 2 · SEMÂNTICO (tema claro) ───────────────────────── */

  --bg-canvas:      var(--offwhite);
  --bg-surface:     var(--offwhite);
  --bg-subtle:      var(--champagne);
  --bg-muted:       var(--areia);
  --bg-inverse:     var(--cafe);

  --text-primary:   var(--cafe);
  --text-secondary: var(--ink-60);
  --text-tertiary:  var(--ink-40);
  --text-on-dark:   var(--offwhite);
  --text-accent:    #7E6832;         /* dourado escurecido — legível como texto (~4.7:1) */

  --border-subtle:  var(--line);
  --border-default: var(--line-2);
  --border-accent:  var(--gold);

  --action-primary-bg:    var(--cafe);
  --action-primary-text:  var(--offwhite);
  --action-secondary-bg:  transparent;
  --action-secondary-text:var(--cafe);
  --action-accent-bg:     var(--gold);
  --action-accent-text:   var(--offwhite);
}

/* ───────────────────────── CAMADA 2 · SEMÂNTICO (tema negativo/escuro) ─────────────────────────
   Aplicado em coberturas, rodapés e seções .sec--dark. Café vira o fundo. */
[data-theme="dark"] {
  --bg-canvas:      var(--cafe);
  --bg-surface:     #423933;
  --bg-subtle:      #4a4039;
  --bg-inverse:     var(--offwhite);

  /* Primitivos de opacidade — theme-aware (protege usos diretos futuros) */
  --ink-80:         rgba(247,243,236,.85);
  --ink-60:         rgba(247,243,236,.68);
  --ink-40:         rgba(247,243,236,.50);

  --text-primary:   var(--offwhite);
  --text-secondary: rgba(247,243,236,.72);
  --text-tertiary:  rgba(247,243,236,.60);
  --text-accent:    var(--gold-soft);

  --border-subtle:  rgba(247,243,236,.12);
  --border-default: rgba(247,243,236,.22);

  --action-primary-bg:   var(--offwhite);
  --action-primary-text: var(--cafe);
}

/* prefers-reduced-motion: zera durações */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms;
  }
}