/* ============================================================
   tokens.css — FUNDAÇÃO ÚNICA do site e do blog (26/08/2026).
   @font-face (Roboto Condensed 400–800 + Le Grand 400) e todos os
   tokens :root. Carregado ANTES de qualquer outra folha:
   - páginas do site: partials/page-head.php e 404.php, antes do styles.css
   - blog: blog-includes/header.php, antes do <style> próprio
   Mexeu em cor/fonte/token: é AQUI, e vale para os dois mundos.
   Os url() de fonte são relativos e resolvem contra ESTE arquivo (raiz),
   então funcionam também nas URLs profundas do blog (/blog/cat/slug).
   ============================================================ */
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/roboto-condensed-400.woff2') format('woff2'),url('fontes/roboto-condensed-400.ttf') format('truetype');}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fontes/roboto-condensed-500.woff2') format('woff2'),url('fontes/roboto-condensed-500.ttf') format('truetype');}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fontes/roboto-condensed-600.woff2') format('woff2'),url('fontes/roboto-condensed-600.ttf') format('truetype');}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fontes/roboto-condensed-700.woff2') format('woff2'),url('fontes/roboto-condensed-700.ttf') format('truetype');}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('fontes/roboto-condensed-800.woff2') format('woff2'),url('fontes/roboto-condensed-800.ttf') format('truetype');}

/* ---- Le Grand — apenas os títulos de maior escala (H1/H2).
   A família tem SÓ o peso Regular: qualquer font-weight acima de 400 aqui
   seria sintetizado pelo navegador (falso-negrito), o que numa serifa de
   contraste alto fica visivelmente ruim. Por isso os seletores que a usam
   fixam 400 e desligam a síntese. Do H3 para baixo o texto continua em
   Roboto Condensed: as hastes finas da Le Grand ficam frágeis em corpo pequeno. ---- */
@font-face{font-family:'Le Grand';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/le-grand-400.woff2') format('woff2'),url('fontes/le-grand-400.ttf') format('truetype');}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* --- marca (retune de 26/08) ---
     A paleta da Dra. Catarina assumiu as DUAS escalas herdadas do modelo:
     --azul-* virou a familia do VERDE-OLIVA (#777d6d, escuro #4b4f45) e
     --teal-* virou a familia do COBRE (#bb805a). Os nomes ficaram — troca-los
     tocaria dezenas de seletores; o valor e que manda. Texto usa os degraus
     escuros (#565b4d 7:1 no branco); o cobre puro rende 3,3:1 e so vale para
     texto grande/bold ou elementos nao-textuais. Decisao do cliente. */
  --brand-escuro:#4b4f45;--brand-turquesa:#bb805a;--brand-turquesa-claro:#cf9d76;

  --azul-50:#f1efe9;--azul-100:#e2dfd4;--azul-200:#c9c6b8;--azul-300:#a3a295;--azul-400:#7d8272;
  --azul-500:#565b4d;--azul-600:#4b4f45;--azul-700:#3f4339;--azul-800:#434739;--azul-900:#2f332b;
  --teal-50:#f5ece3;--teal-100:#eeddcb;--teal-200:#e3c7ad;--teal-300:#bb805a;--teal-400:#cf9d76;
  --teal-500:#bb805a;--teal-600:#bb805a;--teal-700:#a56f4b;--teal-800:#8a5c3e;

  /* --- papel quente: o contraponto ao azul frio --- */
  --papel:#edeeef;--papel-2:#f1ede6;--papel-3:#e7e1d6;

  --gray-0:#fff;--gray-50:#f6f7f8;--gray-100:#eef1f4;--gray-200:#dfe4ea;--gray-300:#c6cdd6;
  /* --gray-600 é o texto secundário. Sobre o papel quente (#edeeef) o #6b7280
     antigo caía para 4,4:1 e reprovava no WCAG AA — este rende 5,0:1 no papel
     e 5,4:1 no branco, mantendo a leitura "suave" sem perder acessibilidade. */
  --gray-400:#a2abb6;--gray-500:#8F8F8F;--gray-600:#757575;--gray-700:#757575;--gray-800:#313842;
  --tinta:#777d6d;

  --success:#bb805a;--info:#bb805a;--warning:#b8801f;--danger:#c0392f;

  --color-primary:var(--azul-500);--color-primary-hover:var(--azul-600);
  --cobre-texto:#96613f;   /* cobre p/ TEXTO (AA); o #bb805a so desenha */
  --color-secondary:var(--teal-600);--color-accent:var(--teal-500);
  --text-strong:var(--tinta);--text-body:var(--gray-700);--text-muted:var(--gray-600);
  --text-on-brand:#fff;--text-link:var(--azul-500);
  --surface-card:#fff;--surface-page:var(--papel);--surface-brand-soft:var(--azul-50);--surface-teal-soft:var(--teal-50);
  --border-subtle:var(--gray-200);--border-default:var(--gray-300);--border-brand:var(--azul-500);
  /* contorno sobre papel quente: cinza puro fica sujo, este acompanha o tom */
  --linha:rgba(75,79,69,.12);--linha-forte:rgba(75,79,69,.22);
  --focus-ring:rgba(187,128,90,.45);

  /* --- tipografia --- */
  --font-sans:'Roboto Condensed',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Roboto Condensed',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-title:'Le Grand',Georgia,'Times New Roman',serif;
  --fs-display:clamp(2.35rem,1.4rem + 3.9vw,4.1rem);
  --fs-h1:clamp(2.1rem,1.35rem + 3.1vw,3.4rem);
  --fs-h2:clamp(1.8rem,1.25rem + 2.3vw,2.75rem);
  --fs-h3:clamp(1.08rem,.99rem + .42vw,1.27rem);
  --fs-lead:clamp(1rem,.94rem + .36vw,1.2rem);
  --fs-body:1rem;
  --fs-eyebrow:.72rem;
  --lh-display:1.03;--lh-heading:1.1;--lh-snug:1.45;--lh-body:1.72;
  --ls-display:-.028em;--ls-tight:-.022em;--ls-eyebrow:normal; /* era .16em; zerado a pedido (26/08) */

  /* --- ritmo --- */
  --space-3:.875rem;--space-4:1.25rem;--space-5:1.75rem;--space-6:2.25rem;--space-7:3rem;
  --space-8:3.75rem;--space-9:4.5rem;
  --sec-y:clamp(4.25rem,3rem + 5.2vw,8rem);
  --container:1180px;--container-narrow:730px;--container-wide:1320px;
  --gutter:clamp(1.25rem,.9rem + 1.8vw,3rem);

  /* --- forma --- */
  --radius-xs:6px;--radius-sm:9px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;
  --radius-2xl:28px;--radius-pill:999px;

  /* --- sombra: empilhada, baixa opacidade, com tom da marca --- */
  --shadow-xs:0 1px 2px rgba(20,38,47,.05);
  --shadow-sm:0 1px 2px rgba(20,38,47,.05),0 3px 8px -3px rgba(20,38,47,.08);
  --shadow-md:0 2px 4px rgba(20,38,47,.04),0 10px 26px -10px rgba(20,38,47,.14);
  --shadow-lg:0 4px 8px rgba(20,38,47,.04),0 22px 48px -18px rgba(20,38,47,.20);
  --shadow-xl:0 6px 12px rgba(20,38,47,.05),0 38px 76px -28px rgba(20,38,47,.28);
  --shadow-brand:0 10px 24px -10px rgba(166,106,63,.5);
  --shadow-teal:0 10px 24px -10px rgba(187,128,90,.5);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --dur-fast:150ms;--dur:260ms;--dur-slow:480ms;

  --gradient-brand:linear-gradient(115deg,#565b4d 0%,#777d6d 45%,#bb805a 100%);
  --gradient-paper:linear-gradient(180deg,#fff 0%,var(--papel) 100%);
  /* halo do hero: turquesa muito diluído — profundidade sem sujar o texto */
  --glow-brand:radial-gradient(58% 68% at 80% 18%,rgba(187,128,90,.13) 0%,rgba(187,128,90,0) 66%); /* era o teal do site-modelo; cobre bem claro a pedido (26/08) */
  --glow-navy:radial-gradient(52% 58% at 6% 94%,rgba(75,79,69,.10) 0%,rgba(75,79,69,0) 70%);
  /* grão sutil nas faixas escuras — evita o "banding" do degradê chapado */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}