/* ====================================================================
   BLACKGRIP — DESIGN TOKENS
   Fonte única de verdade da marca. Importe em qualquer página:
     <link rel="stylesheet" href="/brand/tokens.css">
   A marca vive em DUAS superfícies:
     • ESCURA  → marca / marketing (questionário, relatório que a academia recebe)
     • CLARA   → produto / dado     (painel interno, futuras telas de gestão)
   O vermelho-sangue é o fio que costura as duas. Detalhes em guia-de-marca.md.
   ==================================================================== */

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

:root{
  /* ---- Superfície ESCURA (preto-osso-sangue) ---- */
  --bg-ink:#0A0A0B;        /* fundo principal              */
  --bg-char:#141315;       /* cartões / inputs             */
  --bg-char-2:#1C1B1E;     /* hover / foco                 */
  --bone:#E8E2D4;          /* texto principal no escuro    */
  --bone-dim:#9A958A;      /* texto secundário             */
  --bone-faint:#605C54;    /* dicas / labels apagados      */
  --blood:#8C1C13;         /* sangue (acento base)         */
  --blood-bright:#C0291B;  /* brasa (acento vivo / hover)  */
  --line-dark:#2A2926;     /* divisores no escuro          */

  /* ---- Superfície CLARA (Direção B — parceiro de crescimento) ---- */
  --paper:#FAF7F2;         /* fundo claro                  */
  --card:#FFFFFF;          /* cartões                      */
  --ink:#16140F;           /* texto principal no claro     */
  --muted:#6B6457;         /* texto secundário             */
  --faint:#9A9486;         /* dicas / labels apagados      */
  --blood-light:#B3231A;   /* sangue sobre claro (acento)  */
  --blood-light-dim:#7C1A14;
  --steel:#3A4654;         /* cor neutra de dado/UI        */
  --green:#2E7D52;         /* "bom": dinheiro subindo, meta*/
  --line-light:#E5E0D6;    /* divisores no claro           */
  --line-light-2:#D9D3C7;

  /* ---- 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 (conquista / graduação / marcos) ---- */
  --gold:#C8A24B;          /* acento de conquista           */
  --gold-soft:#F4ECD8;     /* fundo suave de conquista      */
  --gold-deep:#9C7A2E;     /* texto sobre dourado claro     */

  /* ---- 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:2px;            /* cantos retos, brutalistas    */
  --radius-card:10px;      /* cartões no produto (claro)   */
  --font-display:'Anton',sans-serif;        /* títulos monumentais (marca/headlines) */
  --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)
   • SANGUE  → só AÇÃO PRIMÁRIA (1 CTA por contexto) e o "fio" da marca.
              NÃO é cor de erro nem de botão secundário.
   • DOURADO → conquista / graduação / marcos.
   • VERDE/ÂMBAR/AÇO/CINZA → estados (bom / atenção / crítico / neutro).
   Ações secundárias e de lista = neutras (ghost/grafite), nunca sangue.
   ==================================================================== */

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