/*
 * Design tokens — fonte única de verdade pra cor, tipografia, espaçamento,
 * raio e elevação em todo o sistema (painel do organizador + páginas
 * públicas de estatística usam os MESMOS tokens).
 *
 * Painel e páginas públicas nasceram em momentos diferentes e usam
 * nomenclatura de variável diferente (--p-bg vs --bg, etc). Em vez de
 * unificar a nomenclatura -- o que exigiria trocar classe em ~20 templates,
 * risco grande pra ganho só estético -- esse arquivo define as DUAS
 * nomenclaturas apontando pro mesmo valor, num lugar só. Muda a cor aqui,
 * muda nos dois lados.
 *
 * painel.css e style.css continuam com suas próprias regras de
 * layout/componente (sidebar, cards, tabela...) — só o token saiu de lá
 * pra cá.
 */

:root{
  /* tipografia: Rajdhani (display/headings) + IBM Plex Sans (corpo) + IBM Plex Mono (dados/tempos) */
  --font-display:'Rajdhani',sans-serif;      --p-font-display:'Rajdhani',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;    --p-font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;     --p-font-mono:'IBM Plex Mono',monospace;

  /* raio */
  --r-sm:6px;   --p-r-sm:6px;
  --r-md:10px;  --p-r-md:10px;
  --r-lg:14px;  --p-r-lg:14px;
  --r-full:999px; --p-r-full:999px;

  /* espaçamento (escala 4px) */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
}

/* ---- Escuro (padrão) — grafite azulado premium + vermelho/âmbar como acento ---- */
:root, [data-tema="escuro"]{
  color-scheme: dark;
  --bg:#0c0e13;                          --p-bg:#0c0e13;
  --surface:#12151b;                     --p-surface:#12151b;
  --surface-2:#191d25;                   --p-surface-2:#191d25;
  --surface-3:#20242e;                   --p-surface-3:#20242e;
  --line:#252a35;                        --p-line:#252a35;
  --line-strong:#333a48;                 --p-line-strong:#333a48;
  --text:#eef0f4;                        --p-text:#eef0f4;
  --text-dim:#9aa1b0;                    --p-text-dim:#9aa1b0;
  --text-faint:#5f6675;                  --p-text-faint:#5f6675;
  --red:#ff3b48;                         --p-red:#ff3b48;
  --red-dim:#ff8188;                     --p-red-dim:#ff8188;
  --red-bg:rgba(255,59,72,.16);          --p-red-bg:rgba(255,59,72,.16);
  --red-solid:#ff3b48;                   --p-red-solid:#ff3b48;
  --perigo:#ff3b48;                      --p-perigo:#ff3b48;
  --perigo-dim:#ff8188;                  --p-perigo-dim:#ff8188;
  --perigo-bg:rgba(255,59,72,.16);       --p-perigo-bg:rgba(255,59,72,.16);
  --perigo-solid:#ff3b48;                --p-perigo-solid:#ff3b48;
  --green:#2ee08a;                       --p-green:#2ee08a;
  --green-bg:rgba(46,224,138,.15);       --p-green-bg:rgba(46,224,138,.15);
  --green-solid:#129e5e;                 --p-green-solid:#129e5e;
  --amber:#ffc531;                       --p-amber:#ffc531;
  --amber-bg:rgba(255,197,49,.15);       --p-amber-bg:rgba(255,197,49,.15);
  --amber-solid:#ffb020;                 --p-amber-solid:#ffb020;
  --blue:#4d94ff;                        --p-blue:#4d94ff;
  --blue-bg:rgba(77,148,255,.15);        --p-blue-bg:rgba(77,148,255,.15);
  --blue-solid:#3b82f6;                  --p-blue-solid:#3b82f6;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);              --p-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 8px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.4);    --p-shadow:0 2px 8px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.4);
  --shadow-hover:0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3); --p-shadow-hover:0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 16px 40px rgba(0,0,0,.45);           --p-shadow-lg:0 16px 40px rgba(0,0,0,.45);
  --focus:rgba(239,74,82,.28);           --p-focus:rgba(239,74,82,.28);
  --overlay:rgba(6,7,10,.6);             --p-overlay:rgba(6,7,10,.6);
  --scrim-grad:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  --p-scrim-grad:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));

  /* ---- "chrome" — topo + menu lateral, sempre escuros tipo cockpit/box de
     equipe, nos 3 temas (só o conteúdo troca de cor). Vermelho de corrida
     (rosso corsa) como acento — não é o mesmo --red do conteúdo, que
     acompanha o tema; este é fixo, é a "cor da equipe". Clássico sobrescreve
     pra usar o frost azulado do Nord em vez de vermelho (ver bloco abaixo). ---- */
  --chrome-bg:#12151b;                   --p-chrome-bg:#12151b;
  --chrome-bg-2:#191d25;                 --p-chrome-bg-2:#191d25;
  --chrome-bg-3:#20242e;                 --p-chrome-bg-3:#20242e;
  --chrome-line:#252a35;                 --p-chrome-line:#252a35;
  --chrome-text:#eef0f4;                 --p-chrome-text:#eef0f4;
  --chrome-text-dim:#9aa1b0;             --p-chrome-text-dim:#9aa1b0;
  --chrome-text-faint:#5f6675;           --p-chrome-text-faint:#5f6675;
  --chrome-accent:#e10600;               --p-chrome-accent:#e10600;
  --chrome-accent-text:#ff5b52;          --p-chrome-accent-text:#ff5b52;
  --chrome-accent-bg:rgba(225,6,0,.2);   --p-chrome-accent-bg:rgba(225,6,0,.2);
  --chrome-shadow:0 2px 14px rgba(0,0,0,.4); --p-chrome-shadow:0 2px 14px rgba(0,0,0,.4);
}

/* ---- Claro — conteúdo branco/cinza claro limpo; o topo e o menu lateral
   continuam escuros (ver tokens --chrome-* no bloco Escuro acima), então a
   tela toda não vira "uma cor só" nem cansa a vista. ---- */
[data-tema="claro"]{
  color-scheme: light;
  --bg:#dde0e5;                          --p-bg:#dde0e5;
  --surface:#ffffff;                     --p-surface:#ffffff;
  --surface-2:#eef0f3;                   --p-surface-2:#eef0f3;
  --surface-3:#e2e5ea;                   --p-surface-3:#e2e5ea;
  --line:#d5d9de;                        --p-line:#d5d9de;
  --line-strong:#bcc1c9;                 --p-line-strong:#bcc1c9;
  --text:#1c1e24;                        --p-text:#1c1e24;
  --text-dim:#565b68;                    --p-text-dim:#565b68;
  --text-faint:#8b8f99;                  --p-text-faint:#8b8f99;
  --red:#e0233a;                         --p-red:#e0233a;
  --red-dim:#b31f30;                     --p-red-dim:#b31f30;
  --red-bg:#fce1e5;                      --p-red-bg:#fce1e5;
  --red-solid:#e0233a;                   --p-red-solid:#e0233a;
  --perigo:#e0233a;                      --p-perigo:#e0233a;
  --perigo-dim:#b31f30;                  --p-perigo-dim:#b31f30;
  --perigo-bg:#fce1e5;                   --p-perigo-bg:#fce1e5;
  --perigo-solid:#e0233a;                --p-perigo-solid:#e0233a;
  --green:#0ea968;                       --p-green:#0ea968;
  --green-bg:#dcf5ea;                    --p-green-bg:#dcf5ea;
  --green-solid:#0a8a55;                 --p-green-solid:#0a8a55;
  --amber:#c1780a;                       --p-amber:#c1780a;
  --amber-bg:#fcecd1;                    --p-amber-bg:#fcecd1;
  --amber-solid:#e08e0b;                 --p-amber-solid:#e08e0b;
  --blue:#1d5fd6;                        --p-blue:#1d5fd6;
  --blue-bg:#e0eaff;                     --p-blue-bg:#e0eaff;
  --blue-solid:#1d5fd6;                  --p-blue-solid:#1d5fd6;

  --shadow-sm:0 1px 2px rgba(20,22,30,.05);              --p-shadow-sm:0 1px 2px rgba(20,22,30,.05);
  --shadow:0 1px 3px rgba(20,22,30,.06), 0 1px 2px rgba(20,22,30,.04);  --p-shadow:0 1px 3px rgba(20,22,30,.06), 0 1px 2px rgba(20,22,30,.04);
  --shadow-hover:0 10px 24px rgba(20,22,30,.08), 0 2px 6px rgba(20,22,30,.05); --p-shadow-hover:0 10px 24px rgba(20,22,30,.08), 0 2px 6px rgba(20,22,30,.05);
  --shadow-lg:0 20px 44px rgba(20,22,30,.12);            --p-shadow-lg:0 20px 44px rgba(20,22,30,.12);
  --focus:rgba(214,41,59,.16);           --p-focus:rgba(214,41,59,.16);
  --overlay:rgba(20,22,30,.4);           --p-overlay:rgba(20,22,30,.4);
  --scrim-grad:linear-gradient(180deg, rgba(20,22,30,.03), rgba(20,22,30,0));
  --p-scrim-grad:linear-gradient(180deg, rgba(20,22,30,.03), rgba(20,22,30,0));
}

/* ---- Clássico — Nord (nordtheme.com): "polar night" + "frost" azul-esverdeado ---- */
[data-tema="classico"]{
  color-scheme: dark;
  --bg:#2a303e;                          --p-bg:#2a303e;
  --surface:#363c4c;                     --p-surface:#363c4c;
  --surface-2:#3f4557;                   --p-surface-2:#3f4557;
  --surface-3:#474e62;                   --p-surface-3:#474e62;
  --line:#4c5468;                        --p-line:#4c5468;
  --line-strong:#5c6478;                 --p-line-strong:#5c6478;
  --text:#eceff4;                        --p-text:#eceff4;
  --text-dim:#c6cdda;                    --p-text-dim:#c6cdda;
  --text-faint:#828da3;                  --p-text-faint:#828da3;
  --red:#88b2e0;                         --p-red:#88b2e0;
  --red-dim:#a3c4e8;                     --p-red-dim:#a3c4e8;
  --red-bg:rgba(136,178,224,.2);         --p-red-bg:rgba(136,178,224,.2);
  --red-solid:#5e81ac;                   --p-red-solid:#5e81ac;
  --perigo:#e5828b;                      --p-perigo:#e5828b;
  --perigo-dim:#eda3aa;                  --p-perigo-dim:#eda3aa;
  --perigo-bg:rgba(191,97,106,.22);      --p-perigo-bg:rgba(191,97,106,.22);
  --perigo-solid:#bf616a;                --p-perigo-solid:#bf616a;
  --green:#b6d69c;                       --p-green:#b6d69c;
  --green-bg:rgba(163,190,140,.2);       --p-green-bg:rgba(163,190,140,.2);
  --green-solid:#78a85c;                 --p-green-solid:#78a85c;
  --amber:#f2d488;                       --p-amber:#f2d488;
  --amber-bg:rgba(235,203,139,.2);       --p-amber-bg:rgba(235,203,139,.2);
  --amber-solid:#e0b355;                 --p-amber-solid:#e0b355;
  --blue:#9adde9;                        --p-blue:#9adde9;
  --blue-bg:rgba(136,192,208,.2);        --p-blue-bg:rgba(136,192,208,.2);
  --blue-solid:#6cb7c9;                  --p-blue-solid:#6cb7c9;

  --shadow-sm:0 1px 3px rgba(0,0,0,.25);             --p-shadow-sm:0 1px 3px rgba(0,0,0,.25);
  --shadow:0 2px 10px rgba(0,0,0,.28);               --p-shadow:0 2px 10px rgba(0,0,0,.28);
  --shadow-hover:0 10px 28px rgba(0,0,0,.32);        --p-shadow-hover:0 10px 28px rgba(0,0,0,.32);
  --shadow-lg:0 20px 48px rgba(0,0,0,.38);           --p-shadow-lg:0 20px 48px rgba(0,0,0,.38);
  --focus:rgba(129,161,193,.3);          --p-focus:rgba(129,161,193,.3);
  --overlay:rgba(20,22,28,.55);          --p-overlay:rgba(20,22,28,.55);
  --scrim-grad:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  --p-scrim-grad:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));

  /* Clássico usa o frost azulado do Nord como "cor da equipe" em vez do
     vermelho, pra não brigar com a identidade do tema ---- */
  --chrome-bg:#2e3440;                   --p-chrome-bg:#2e3440;
  --chrome-bg-2:#3b4252;                 --p-chrome-bg-2:#3b4252;
  --chrome-bg-3:#434c5e;                 --p-chrome-bg-3:#434c5e;
  --chrome-line:#4c566a;                 --p-chrome-line:#4c566a;
  --chrome-text:#eceff4;                 --p-chrome-text:#eceff4;
  --chrome-text-dim:#c6cdda;             --p-chrome-text-dim:#c6cdda;
  --chrome-text-faint:#7b8494;           --p-chrome-text-faint:#7b8494;
  --chrome-accent:#5e81ac;               --p-chrome-accent:#5e81ac;
  --chrome-accent-text:#88c0d0;          --p-chrome-accent-text:#88c0d0;
  --chrome-accent-bg:rgba(94,129,172,.22); --p-chrome-accent-bg:rgba(94,129,172,.22);
  --chrome-shadow:0 2px 14px rgba(0,0,0,.3); --p-chrome-shadow:0 2px 14px rgba(0,0,0,.3);
}