/* ================================================================
   Gabriela Marquês — Design tokens
   Camada única de decisões. Nenhum componente define cor, escala
   tipográfica, espaçamento ou motion por conta própria.

   Contraste: todos os pares fg/bg abaixo passam em WCAG AA para
   texto normal (>= 4.5:1). Nada de cinza abaixo de --fg-3 no escuro
   nem acima de --ink-3 no creme.
   ================================================================ */

:root {
  /* ---- Superfícies escuras: navegação, decisão, marca ---- */
  --bg:            #0b0a0d;
  --bg-2:          #0e0d11;
  --surface:       #131117;
  --surface-2:     #191620;
  --surface-3:     #201c27;

  /* ---- Superfícies creme: leitura e dados ---- */
  --paper:         #efe7db;
  --paper-2:       #f6f0e6;
  --paper-3:       #e6dccd;

  /* ---- Texto no escuro ---- */
  --fg:            #f6f1e8;
  --fg-2:          #c6bdb2;   /* 10.4:1 sobre --bg */
  --fg-3:          #9a928a;   /*  6.4:1 sobre --bg — piso do cinza */

  /* ---- Texto no creme ---- */
  --ink:           #1a1613;
  --ink-2:         #4f4842;   /* 7.2:1 sobre --paper */
  --ink-3:         #5f5852;   /* 5.6:1 sobre --paper — piso do cinza */

  /* ---- Ouro ---- */
  --gold:          #d4ab58;   /* traço, ícone, detalhe */
  --gold-text:     #e0bc70;   /* 10.9:1 — ouro legível no escuro */
  --gold-bright:   #f0cf7f;
  --gold-deep:     #8a6224;
  --gold-ink:      #7d5820;   /*  5.1:1 — ouro legível no creme */
  --gold-on:       #1a1206;   /* texto sobre botão ouro */

  /* ---- Linhas ---- */
  --line:          rgba(255,255,255,.085);
  --line-2:        rgba(255,255,255,.14);
  --line-gold:     rgba(224,188,112,.24);
  --line-ink:      rgba(26,22,19,.12);
  --line-ink-2:    rgba(26,22,19,.20);

  /* ---- Sinal ---- */
  --ok:            #7ec08f;
  --warn:          #dfae5e;
  --err:           #d98878;

  /* ---- Tipografia ---- */
  --font-display: "DM Serif Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Fira Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida. Cada degrau tem line-height e tracking próprios:
     título é elemento gráfico, não texto grande. */
  --t-display:   clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem);
  --t-h1:        clamp(2.25rem, 1.45rem + 3.4vw, 4rem);
  --t-h2:        clamp(1.875rem, 1.3rem + 2.4vw, 3.125rem);
  --t-h3:        clamp(1.375rem, 1.15rem + .95vw, 1.875rem);
  --t-h4:        clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-lead:      clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --t-body:      1rem;
  --t-body-sm:   .9375rem;
  --t-small:     .8125rem;
  --t-xs:        .75rem;
  --t-label:     .6875rem;

  --lh-display:  1.02;
  --lh-title:    1.08;
  --lh-body:     1.7;
  --lh-read:     1.78;   /* corpo de artigo longo */
  --tr-display:  -.025em;
  --tr-label:    .14em;

  /* ---- Espaçamento ---- */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   80px;
  --s-10: 120px;

  /* Ritmo vertical de seção: uma variável, três densidades. */
  --sec:        clamp(72px, 8vw, 120px);
  --sec-tight:  clamp(52px, 5.5vw, 84px);
  --sec-loose:  clamp(88px, 10vw, 150px);

  /* ---- Layout ---- */
  --container:  1240px;
  --gutter:     clamp(20px, 4vw, 40px);
  --measure:    68ch;      /* medida de leitura confortável */
  --measure-sm: 56ch;      /* intertítulos, lead, legendas */
  --header-h:   76px;
  --header-h-sm: 64px;

  /* ---- Raios ---- */
  --r-sm:  8px;
  --r:     14px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* ---- Elevação: sombra warm, nunca preto puro ---- */
  --sh-1: 0 2px 8px rgba(10,7,4,.16);
  --sh-2: 0 12px 32px rgba(10,7,4,.24);
  --sh-3: 0 28px 70px rgba(10,7,4,.34);
  --sh-paper: 0 18px 48px rgba(74,55,33,.10);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .18s;
  --dur-2: .28s;
  --dur-3: .55s;
}

/* Utilitários de tipografia compartilhados por todas as páginas.
   Existem para que nenhum componente precise redeclarar a família. */
.u-display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.u-label   { font-family: var(--font-body); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; }
.u-measure { max-width: var(--measure); }