/* ============================================================
   Chrystian Söuza — Design System · Tokens
   Direção: Tinta & Coral (dark-first)
   Importe este arquivo ANTES de components.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* — Cor — */
  --cs-tinta:        #16213A; /* base / fundo escuro (dark-first) */
  --cs-tinta-900:    #0E1626; /* painel mais profundo, rodapés, barras */
  --cs-tinta-card:   #1E2C49; /* cards e blocos sobre a base */
  --cs-coral:        #EC6150; /* acento principal — o "ö" e o ponto */
  --cs-coral-700:    #C94B3B; /* coral para texto pequeno sobre claro */
  --cs-ambar:        #E3B873; /* apoio — segundo ponto do grafismo */
  --cs-areia:        #F4EFE6; /* fundo claro / texto sobre escuro */
  --cs-branco:       #FFFFFF;
  --cs-breu:         #141A2B; /* texto sobre fundos claros */
  --cs-nevoa:        #5A6378; /* neutro / rótulos sobre claro */
  --cs-bruma:        #93A0BE; /* texto secundário sobre escuro */
  --cs-bruma-2:      #BFC9DE; /* texto de corpo sobre escuro */
  --cs-linha:        rgba(147,160,190,0.22); /* bordas sobre escuro */
  --cs-linha-clara:  #E2D9C9;                /* bordas sobre claro */
  --i9-pingo:        #ff4a1c;                /* Faísca i9media — só no selo de crédito do rodapé */

  /* Papéis semânticos (tema escuro — padrão do site) */
  --cs-bg:      var(--cs-tinta);
  --cs-surface: var(--cs-tinta-card);
  --cs-fg:      var(--cs-areia);
  --cs-fg-dim:  var(--cs-bruma-2);
  --cs-muted:   var(--cs-bruma);
  --cs-accent:  var(--cs-coral);
  --cs-line:    var(--cs-linha);

  /* — Tipografia — */
  --cs-font-display: 'Bricolage Grotesque', sans-serif;
  --cs-font-text:    'IBM Plex Sans', sans-serif;

  --cs-fs-eyebrow: 13px;
  --cs-fs-body:    18px;
  --cs-fs-lead:    22px;
  --cs-fs-h3:      24px;
  --cs-fs-h2:      36px;
  --cs-fs-h1:      56px;
  --cs-tracking:   0.24em; /* rótulos em caixa alta */

  /* — Espaçamento (base 8) — */
  --cs-1: 8px;
  --cs-2: 16px;
  --cs-3: 24px;
  --cs-4: 40px;
  --cs-5: 64px;
  --cs-6: 96px;

  /* — Raio — */
  --cs-radius-sm: 10px;
  --cs-radius:    16px;
  --cs-radius-lg: 22px;
  --cs-radius-pill: 999px;

  /* — Movimento — */
  --cs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cs-dur:  220ms;

  /* — Tokens de componentes específicos — */
  --cs-campo-news: #FBE7E2;      /* campo de e-mail sobre faixa coral */
  --cs-thumb-o:    rgba(255,255,255,.9); /* "ö" sobre gradiente do card */
}

/* Tema claro (para páginas pontuais sobre areia/branco).
   O site é dark-first; use esta classe só quando precisar de um bloco claro. */
.cs-light {
  --cs-bg:      var(--cs-areia);
  --cs-surface: var(--cs-branco);
  --cs-fg:      var(--cs-breu);
  --cs-fg-dim:  #44524E;
  --cs-muted:   var(--cs-nevoa);
  --cs-accent:  var(--cs-coral-700); /* coral mais profundo p/ contraste sobre claro */
  --cs-line:    var(--cs-linha-clara);
}