/* Tokens do design system "Campo 1b" — fonte única para todas as páginas.
   Fora de /assets/ de propósito: /assets/* tem cache immutable de 1 ano no
   netlify.toml, e um token alterado nunca chegaria a quem já visitou o site.

   Tema: o <html> recebe data-theme="light|dark" por um script inline no <head>
   de cada página (preferência salva em localStorage 'velo-theme', senão o
   prefers-color-scheme). Sem JS, vale o data-theme="light" do HTML. */
:root {
  --paper:       #FAF6F0;
  --surface:     #F0E7DA;
  --surface-2:   #E8DDD0;
  --card:        #FFFFFF;
  --ink:         #26241F;
  --ink-mid:     #5E594F;
  --ink-muted:   #70675A;   /* ≥4,5:1 sobre paper, card e surface (era #9C927F, 2,5–3,1:1) */
  --border:      rgba(38,36,31,.10);
  --border-mid:  rgba(38,36,31,.16);
  --green:       #2E6B54;
  --green-hover: #235440;
  --green-tint:  rgba(46,107,84,.10);
  --on-green:    #FAF6F0;   /* texto sobre --green e --clay */
  /* Clay escurecido (era #B4572E, 4,49:1 com --on-green): 4,98:1 no badge e na
     faixa da pergunta, 4,54:1 no eyebrow sobre o próprio tint. */
  --clay:        #AA5129;
  --clay-tint:   rgba(170,81,41,.12);
  --red:         #B03A2E;   /* erro de validação — nunca clay, que é ênfase editorial */
  --red-tint:    rgba(176,58,46,.10);
  --focus-ring:  0 0 0 3px rgba(46,107,84,.35);
  --shadow-sm:   0 1px 4px rgba(90,70,40,.06);
  --shadow-md:   0 2px 16px rgba(90,70,40,.09);
  --shadow-lg:   0 4px 32px rgba(90,70,40,.12);
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-input:12px;
  --ease-out:    cubic-bezier(.2,0,.1,1);
  --dur-fast:    .15s;      /* microinterações: cor de link, lang switcher */
  --dur:         .2s;       /* botões, cards, campos */
  --font:        'Manrope', system-ui, sans-serif;
  /* Escala tipográfica. Títulos de display usam clamp() próprio, fora dela. */
  --text-2xs:    11px;      /* labels/eyebrows (uppercase 700) e letra miúda — piso, nada abaixo */
  --text-xs:     12px;      /* metadados, legendas, rodapé */
  --text-sm:     13px;      /* nav, descrições curtas, notas */
  --text-base:   14px;      /* corpo em cards, botões, campos */
  --text-md:     16px;      /* corpo de seção, FAQ, CTA grande */
  --text-lg:     18px;      /* títulos de card, lead do hero */
  --text-xl:     20px;      /* títulos de bloco (form, plano) */
  --text-2xl:    28px;      /* números: stats, preço */
  --text-3xl:    40px;      /* número de destaque (tensions) */
  /* Contorno de campo de formulário: ≥3:1 sobre --card (WCAG 1.4.11).
     --border/--border-mid ficam em ~1,4:1 e servem só para divisórias. */
  --border-input: rgba(38,36,31,.50);
  color-scheme: light;
}
[data-theme="dark"] {
  --paper:       #211E19;
  --surface:     #2C2820;
  --surface-2:   #352F27;
  --card:        #2C2820;
  --ink:         #F5EFE6;
  --ink-mid:     #C4B9A8;
  --ink-muted:   #A39B8D;   /* ≥4,8:1 sobre paper, card e surface-2 (era #8F887B) */
  --border:      rgba(245,239,230,.09);
  --border-mid:  rgba(245,239,230,.15);
  --border-input: rgba(245,239,230,.40);   /* 3,3:1 sobre --card */
  /* Contraste no escuro (nov/2026). Antes: verde 4,01:1 sobre card, hover do
     botão 3,29:1, eyebrow clay 4,00:1, erro 4,06:1, número de etapa 3,36:1.
     Agora tudo ≥4,5:1. O hover CLAREIA no escuro: escurecer derrubava o
     contraste do texto escuro (--on-green) sobre o botão. */
  --green:       #65AC90;   /* 5,11:1 sobre card/surface; botão 6,21:1 */
  --green-hover: #76BA9E;   /* botão em hover 7,35:1 */
  --green-tint:  rgba(101,172,144,.10);   /* .step-num sobre o tint: 4,68:1 */
  --on-green:    #211E19;
  --clay:        #E58D62;
  --clay-tint:   rgba(229,141,98,.12);    /* eyebrow clay sobre o tint: 4,74:1 */
  --red:         #EC8B7D;   /* .form-error sobre o tint: 4,67:1 */
  --red-tint:    rgba(236,139,125,.14);
  --focus-ring:  0 0 0 3px rgba(101,172,144,.45);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.25);
  --shadow-md:   0 2px 16px rgba(0,0,0,.30);
  --shadow-lg:   0 4px 32px rgba(0,0,0,.35);
  color-scheme: dark;
}