/* ====================================================================
   BLACKGRIP — DESIGN TOKENS
   Fonte única de verdade da marca. Importe em qualquer página:
     <link rel="stylesheet" href="/brand/tokens.css">
   Sistema MONOCROMÁTICO disciplinado:
     • Base = preto / cinza / branco (a disciplina).
     • Cor só carrega significado de PERFORMANCE (o placar):
         verde = ganho · vermelho-sangue = perda/risco · âmbar = atenção · aço = neutro.
   Ação primária = PRETO (no claro) / BRANCO (no escuro). Detalhes em guia-de-marca.md.
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ---- Superfície ESCURA (marca / marketing) — preto neutro ---- */
  --bg-ink:#0A0A0B;        /* fundo principal              */
  --bg-char:#161617;       /* cartões / inputs             */
  --bg-char-2:#1F1F22;     /* hover / foco                 */
  --bone:#ECEDEF;          /* texto principal no escuro    */
  --bone-dim:#A0A2A8;      /* texto secundário             */
  --bone-faint:#6A6C72;    /* dicas / labels apagados      */
  --blood:#8C1C13;         /* SEMÂNTICO: risco/perda (base)*/
  --blood-bright:#C0291B;  /* SEMÂNTICO: risco/perda (vivo)*/
  --line-dark:#26272A;     /* divisores no escuro          */

  /* ---- Superfície CLARA (produto / dado) — branco neutro ---- */
  --paper:#F6F7F8;         /* fundo claro                  */
  --card:#FFFFFF;          /* cartões                      */
  --ink:#0C0D0E;           /* texto principal + AÇÃO PRIMÁRIA (preto) */
  --muted:#696C72;         /* texto secundário             */
  --faint:#9AA0A6;         /* dicas / labels apagados      */
  --blood-light:#C42B21;   /* SEMÂNTICO: perda/risco sobre claro */
  --blood-light-dim:#8E1F18;
  --steel:#3A4654;         /* cor neutra de dado/UI (barras, eixos) */
  --green:#1F9D57;         /* PERFORMANCE: ganho / meta / ↑ */
  --line-light:#ECEDEF;    /* divisores no claro           */
  --line-light-2:#DFE1E4;

  /* ---- Grafite (superfícies de produto — não preto puro) ---- */
  --graphite-900:#17181B; /* sidebar / app shell escuro    */
  --graphite-800:#1F2125; /* hover na sidebar              */
  --graphite-700:#2B2E33; /* divisores na sidebar          */
  --graphite-bone:#C9CBCF;/* texto na sidebar grafite      */
  --graphite-dim:#7E828A; /* texto secundário na sidebar   */

  /* ---- Dourado (APOSENTADO no rebrand mono — vars mantidas só p/ compatibilidade) ---- */
  --gold:#C8A24B;
  --gold-soft:#F4ECD8;
  --gold-deep:#9C7A2E;

  /* ---- Escala de espaçamento (respiro premium) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* ---- Escala tipográfica enxuta (1 sistema, poucos passos) ---- */
  --t-display:40px;  /* título principal   */
  --t-section:28px;  /* título de seção    */
  --t-metric:24px;   /* indicadores        */
  --t-h:20px;        /* subtítulo          */
  --t-body:15px;     /* texto              */
  --t-cap:13px;      /* legenda            */

  /* ---- Compartilhado ---- */
  --radius:6px;            /* cantos limpos                */
  --radius-card:14px;      /* cartões no produto (claro)   */
  --font-display:'Space Grotesk',sans-serif; /* títulos + logotipo (grotesca geométrica) */
  --font-mono:'JetBrains Mono',monospace;     /* tags, números, código de marca */
  --font-body:'Inter',sans-serif;             /* corpo de texto + métricas no produto */
}

/* ====================================================================
   REGRA DE USO DA COR (disciplina — produto premium)
   • PRETO / BRANCO / CINZA → base e AÇÃO PRIMÁRIA. O preto é o "grip".
   • VERDE  → performance positiva (ganho, meta, ↑).
   • VERMELHO-SANGUE → performance negativa / risco / perda / ↓.
   • ÂMBAR  → atenção (estado intermediário).  AÇO/CINZA → dado neutro.
   Cor NÃO é decoração: se não indica performance, é preto/cinza/branco.
   "Quando tudo é colorido, nada é placar."
   ==================================================================== */

/* Acessibilidade: respeitar quem desativa animação */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}