/* public/css/tokens.css — base do sistema visual (redesenho de 07/10/2026).
   Spec: docs/superpowers/specs/2026-10-07-redesign-visual-design.md
   O tema escuro vem do data-theme="dark" que o /js/tema.js põe no <html>,
   inclusive quando a escolha é "automático". Nenhuma cor nova entra sem
   passar no teste de contraste (test/design-tokens.test.js). */

/* Aurora (27/10/2026): Geist no lugar da Manrope. O arquivo 700 cobre também o
   800 que as páginas usam nos títulos, para o navegador não inventar negrito. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/geist-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/geist-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/geist-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('/fonts/geist-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/geist-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  color-scheme: light;

  --fonte: 'Geist', system-ui, sans-serif;
  --fonte-mono: 'Geist Mono', ui-monospace, monospace;

  --t-destaque: 40px;
  --t-titulo: 26px;
  --t-secao: 18px;
  --t-corpo: 15px;
  --t-legenda: 12.5px;
  --t-codigo: 13px;

  --r-p: 10px;
  --r-m: 14px;
  --r-g: 18px;
  --r-xg: 20px;
  --r-pilula: 999px;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;

  --fundo: #f4f6fc;
  --superficie: #ffffff;
  --superficie-2: #eaedf7;
  /* Cartão de cada pessoa/item (14/10/2026). "cartao" fica solto sobre o
     fundo da página; "cartao-dentro" fica dentro de um painel. No claro são o
     branco e o creme de sempre; no escuro, o mesmo preto mais claro que o
     painel, para cada pessoa saltar do fundo preto. */
  --cartao: #ffffff;
  --cartao-dentro: #f4f6fc;
  /* Trilho da barra de meta e fundo das etiquetas dos cartões. */
  --trilho: #e1e5f2;
  --linha: #e3e7f2;
  --texto: #0c1024;
  --texto-2: #4d5373;
  --texto-3: #646a87;

  --marca: #0047ff;
  --marca-forte: #0036c4;
  --marca-suave: #e5ecff;
  --marca-texto: #0047ff;

  --falta: #c4213f;
  --falta-suave: #ffe8ec;
  --atencao: #975a00;
  --atencao-suave: #fff3dc;
  --ok: #0e7240;
  --ok-suave: #e3f8ec;
  --excesso: #6b4fd8;
  --excesso-suave: #efeaff;
  --neutro: #5e6380;
  --neutro-suave: #eaedf7;

  /* Faixa do Telegram (08/10/2026): amarela com letra vermelha nos dois temas,
     para chamar a atenção, por pedido do usuário. */
  --alerta-fundo: #ffd60a;
  --alerta-texto: #b0001e;

  --sombra-flutuante: 0 12px 32px rgba(22, 21, 26, .12);
  /* Profundidade dos cartões (13/10/2026): sombra em vez de borda fina, que
     deixava a tela com cara de documento. "alta" é o cartão sob o mouse. */
  --sombra-cartao: 0 1px 2px rgba(22, 21, 26, .05), 0 4px 16px rgba(22, 21, 26, .06);
  --sombra-cartao-alta: 0 2px 4px rgba(22, 21, 26, .06), 0 12px 28px rgba(22, 21, 26, .10);
  /* Cor de cada pessoa no avatar (13/10/2026), com letra branca: as mesmas
     nos dois temas. Ponta clara do degradê das barras de meta. */
  --avatar-c0: #0047ff; --avatar-c1: #7c3aed; --avatar-c2: #b45309; --avatar-c3: #be123c;
  --avatar-c4: #0f766e; --avatar-c5: #a21caf; --avatar-c6: #15803d;
  --barra-marca-fim: #5b8cff; --barra-ok-fim: #34c27a;

  /* Aurora (27/10/2026, pedido do usuário: "cara de tecnologia, moderno e
     clean"). Degradê azul→violeta nos botões e barras, brilho atrás do
     conteúdo e painéis de vidro. O branco passa no AA sobre as duas pontas
     do degradê (test/design-tokens.test.js). */
  --grad-marca: linear-gradient(120deg, #0047ff, #6d3bff);
  --grad-marca-forte: linear-gradient(120deg, #0036c4, #5a2be0);
  --grad-barra: linear-gradient(90deg, #0047ff, #7c4dff 60%, #13b5d6);
  --brilho-marca: 0 8px 24px -8px rgba(0, 71, 255, .55);
  --aurora: radial-gradient(900px 520px at 85% -40px, rgba(109, 59, 255, .20), transparent 70%),
            radial-gradient(760px 480px at 0% 105%, rgba(19, 181, 214, .16), transparent 70%);
  --vidro: rgba(255, 255, 255, .72);
  --vidro-forte: rgba(255, 255, 255, .86);
  --vidro-borda: rgba(15, 23, 60, .08);
  --vidro-desfoque: blur(16px) saturate(140%);
  --anel-ativo: inset 0 0 0 1px rgba(0, 71, 255, .18);
  /* Texto e ícone sobre o degradê/cobalto: branco nos dois temas. */
  --sobre-marca: #ffffff;
  /* Halo da caixa do login (etapa 4): o brilho violeta em volta do cartão. */
  --halo: 0 40px 120px -40px rgba(109, 59, 255, .45);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Fundo preto e painéis um tom acima (14/10/2026, pedido do usuário). */
  --fundo: #050506;
  --superficie: #0c0e16;
  --superficie-2: #1a1d2a;
  /* Cartões um tom mais claros (14/10/2026, pedido do usuário; era #282933).
     O --texto-3 e o --trilho subiram junto para manter o contraste. */
  --cartao: #252a3e;
  --cartao-dentro: #252a3e;
  --trilho: #3a4060;
  --linha: #20243a;
  --texto: #eef0ff;
  --texto-2: #a9b0cf;
  --texto-3: #9aa2c4;

  --marca: #3366ff;
  /* Fundo do hover dos botões cobalto: o branco precisa de 4,5:1 por cima. */
  --marca-forte: #2a57f0;
  --marca-suave: #17204a;
  --marca-texto: #7a9dff;

  --falta: #ff6b81;
  --falta-suave: #3a1820;
  --atencao: #f2b247;
  --atencao-suave: #33270f;
  --ok: #45d18a;
  --ok-suave: #10291c;
  --excesso: #a593ff;
  --excesso-suave: #241d42;
  --neutro: #a9b0cf;
  --neutro-suave: #1e2235;

  /* Faixa do Telegram (08/10/2026): amarela com letra vermelha nos dois temas,
     para chamar a atenção, por pedido do usuário. */
  --alerta-fundo: #ffd60a;
  --alerta-texto: #b0001e;

  --sombra-flutuante: 0 12px 32px rgba(0, 0, 0, .45);
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
  --sombra-cartao-alta: 0 2px 6px rgba(0, 0, 0, .55), 0 14px 32px rgba(0, 0, 0, .5);

  --grad-marca: linear-gradient(120deg, #2a57f0, #6d3bff);
  --grad-marca-forte: linear-gradient(120deg, #1f47d6, #5a2be0);
  --grad-barra: linear-gradient(90deg, #3366ff, #8b5cf6 60%, #22d3ee);
  --brilho-marca: 0 8px 28px -8px rgba(76, 110, 255, .7);
  --aurora: radial-gradient(960px 560px at 85% -60px, rgba(99, 102, 241, .34), transparent 70%),
            radial-gradient(820px 500px at 0% 108%, rgba(34, 211, 238, .16), transparent 70%);
  --vidro: rgba(22, 26, 42, .62);
  --vidro-forte: rgba(18, 21, 34, .82);
  --vidro-borda: rgba(255, 255, 255, .07);
  --vidro-desfoque: blur(18px) saturate(140%);
  --anel-ativo: inset 0 0 0 1px rgba(122, 162, 255, .28);
  --halo: 0 40px 140px -30px rgba(99, 102, 241, .55);
}

/* Celular e tablet (27/10/2026): o desfoque do vidro é o efeito mais pesado
   do Aurora e trava a rolagem em aparelho simples. Em tela de toque ele sai e
   os painéis ficam quase opacos, que é o que o desfoque fazia parecer. */
@media (hover: none) and (pointer: coarse) {
  :root {
    --vidro-desfoque: none;
    --vidro: rgba(255, 255, 255, .9);
    --vidro-forte: rgba(255, 255, 255, .96);
  }
  :root[data-theme="dark"] {
    --vidro: rgba(20, 23, 37, .92);
    --vidro-forte: rgba(16, 19, 31, .97);
  }
}