/*
 * Design tokens (docs/ui-ux.md, "Sistema visual" e "Direção visual (D64)"). Paleta provisória: a marca da NBS ainda não
 * foi definida, então trocar a identidade visual é editar este arquivo e nenhum outro.
 * Telas ao vivo (telão, entrada na sala, jogo e resultado do jogador) usam o tema de jogo: classe `.game`. O backoffice
 * (D69) usa o mesmo tema, pela classe `.office` no corpo da página (templates/base.html.twig), sem animação.
 *
 * Contraste (WCAG, razão de luminância; texto >= 4.5:1, texto grande e em negrito >= 3:1; um par só passa se
 * passar no pior caso de tamanho que a tela usa, e o texto da opção desce até 16 px, que não é "grande"):
 *   claro   texto #1f2937/#f9fafb 14.05 · apagado #4b5563/#fff 7.56 · branco/acento #1d4ed8 6.70
 *           ok #047857/#ecfdf5 5.21 · erro #b91c1c/#fef2f2 5.91 · aviso #92400e/#fef3c7 6.37
 *   jogo    branco/fundo #14213d 15.97 · branco/painel #1f3160 12.60 · branco/ficha #26396e 11.09
 *           apagado #c9d4ee sobre fundo 10.75 · painel 8.48 · ficha 7.47
 *           destaque #ffc93c sobre fundo 10.40 · painel 8.20 · ficha 7.22 · tinta #1b1b3a/destaque 10.81
 *           verde #3ddc97 sobre fundo 9.04 · painel 7.13 · tinta #0b1b30/verde 9.79
 *   cartão  tinta #1b1b3a/#fff 16.61 · apagada #4a5578/#fff 7.34 · /#fff4d2 6.68 · tinta/#fff4d2 15.12
 *           certo #137a47/#fff 5.38 · /#fff4d2 4.90 · erro #a3170f/#fff 7.82 · /#fff4d2 7.12 · link #1e6fe0/#fff 4.77
 *   opções  texto sobre a cor (grande e negrito; todas já passam de 4.5, para valer também a 16 px):
 *           ▲ branco/#e0312b 4.52 · ◆ branco/#1e6fe0 4.77 · ● #1b1b3a/#ffc21a 10.27 · ■ branco/#1a8548 4.67
 *           ★ branco/#8e3fd9 5.44 · ⬟ branco/#0d817c 4.72
 *           Ajuste sobre o protótipo (D64): ■ era #1f9d55 (3.49) e ⬟ era #0e8f8a (3.95), abaixo do critério; as
 *           sombras desses dois escureceram junto. ▲ ficou como no protótipo (4.52, margem curta mas passa).
 *   dica de tecla (1 a 6): branco sobre --scrim-strong (preto 55%) em cima da cor da opção: ▲ 12.52 · ◆ 12.64 · ● 6.78 ·
 *           ■ 12.48 · ★ 13.46 · ⬟ 12.57
 *   resultado (D65, gráficos do fechamento, sobre --panel #1f3160 e --game-bg #14213d): acerto #13a57a · erro #e0533a · sem resposta
 *           #7f86d1; separação CVD adjacente (acerto-erro-sem resposta) ΔE 8.6 deutan, piso normal 24.9, contraste >= 3:1 (todos PASS).
 *           Número dentro do segmento em tinta --on-good #0b1b30: 5.51 / 4.51 / 5.14 (branco daria 3.14 a 3.84: não usar).
 *           A validação vale para a ordem fixa acerto, erro, sem resposta.
 *   backoffice (D69, estados sempre com texto junto da cor): tinta #1b1b3a sobre jogável #3ddc97 9.40 · falta algo #ffb020 9.08 ·
 *           somente leitura #c9b3f5 8.90 · ação principal #ffc93c 10.81; branco sobre perigo #e0312b 4.52 · secundária #1e6fe0 4.77
 *           · lilás de botão #8e3fd9 5.44; aviso no cartão #8a4b00/#fff 6.80; apagada #4a5578/linha #e6eaf5 6.10; erro #5c0f0b/#ffe3e0 12.7;
 *           laranja #ffb020 sobre fundo 8.73 · lilás #c9b3f5 sobre fundo 8.56 · erro de contagem #ff8a5c sobre painel 5.43
 *   avatar  branco sobre as 12 cores de --avatar-0..11: de 5.13 (#2e7d32) a 11.32 (#4e342e)
 */
:root {
    /* Superfície e texto (tema claro: celular e backoffice) */
    --color-bg: #f9fafb;
    --color-surface: #ffffff;
    --color-surface-2: #f3f4f6;
    --color-text: #1f2937;
    --color-muted: #4b5563;
    --color-border: #d1d5db;
    --color-border-strong: #9ca3af;
    --color-accent: #1d4ed8;
    --color-on-accent: #ffffff;
    --color-accent-soft: #dbeafe;
    --color-nav: #1f2937;
    --color-on-nav: #ffffff;
    --color-focus: #1d4ed8;

    /* Estado */
    --color-ok: #047857;
    --color-ok-bg: #ecfdf5;
    --color-error: #b91c1c;
    --color-error-bg: #fef2f2;
    --color-warn: #92400e;
    --color-warn-bg: #fef3c7;

    /* Opção de resposta: índice fixo -> cor, texto e sombra fixos (as formas ficam em assets/lib/options.js) */
    --opt-0: #e0312b;
    --opt-0-text: #ffffff;
    --opt-0-shade: #9c1b17;
    --opt-1: #1e6fe0;
    --opt-1-text: #ffffff;
    --opt-1-shade: #124a9c;
    --opt-2: #ffc21a;
    --opt-2-text: #1b1b3a;
    --opt-2-shade: #c28e00;
    --opt-3: #1a8548;
    --opt-3-text: #ffffff;
    --opt-3-shade: #0f5a30;
    --opt-4: #8e3fd9;
    --opt-4-text: #ffffff;
    --opt-4-shade: #5e2496;
    --opt-5: #0d817c;
    --opt-5-text: #ffffff;
    --opt-5-shade: #075a56;

    /* Tema de jogo (D64): fundo profundo com padrão de pontos, painéis e fichas com sombra sólida, cartão branco */
    --game-bg: #14213d;
    --game-dot: rgba(255, 255, 255, .07);
    --game-dot-size: 26px; /* 30px no telão */
    --game-text: #ffffff;
    --on-dark-muted: #c9d4ee;
    --panel: #1f3160;
    --panel-shade: #0a1328;
    --chip: #26396e;
    --chip-shade: #0f1c3d;
    --card: #ffffff;
    --card-ink: #1b1b3a;
    --card-muted: #4a5578;
    --card-hilite: #fff4d2;
    --card-hilite-edge: #ffe29a;
    --card-border: #b8c2dc;
    --card-link: #1e6fe0;
    --card-ok: #137a47;
    --card-error: #a3170f;
    --hilite: #ffc93c;
    --hilite-shade: #c99410;
    --on-hilite: #1b1b3a;
    --good: #3ddc97;
    --good-shade: #1e9e68;
    --on-good: #0b1b30;
    /* Resultado do fechamento (D65): ordem fixa acerto, erro, sem resposta; número dentro em --on-good */
    --result-correct: #13a57a;
    --result-wrong: #e0533a;
    --result-unanswered: #7f86d1;
    /* Backoffice (D69): estado e ação. Jogável = verde (--good), falta algo = laranja, somente leitura = lilás, perigo = vermelho,
       ação principal = amarelo (--hilite), secundária = azul. A sombra sólida de cada um fica no par `-shade`. */
    --state-warn: #ffb020;
    --state-warn-shade: #b87400;
    --state-readonly: #c9b3f5;
    --state-readonly-shade: #8f74c9;
    --danger: var(--opt-0);
    --danger-shade: var(--opt-0-shade);
    --secondary: var(--opt-1);
    --secondary-shade: var(--opt-1-shade);
    --tertiary: var(--opt-4);
    --tertiary-shade: var(--opt-4-shade);
    --card-warn: #8a4b00;
    --card-line: #e6eaf5;
    --alert-bg: #ffe3e0;
    --alert-ink: #5c0f0b;
    --dash: #4c63a3;
    --stat-wrong: #ff8a5c;
    --medal-1: #ffc93c;
    --medal-2: #d9e1f2;
    --medal-3: #f0a868;
    --wash: rgba(255, 255, 255, .22); /* ficha da forma sobre a cor da opção */
    --scrim: rgba(0, 0, 0, .35);
    --scrim-strong: rgba(0, 0, 0, .55);
    --scrim-soft: rgba(0, 0, 0, .12);

    /* Avatar padrão (iniciais): 12 cores, texto branco; a ordem é parte do contrato do hash (assets/lib/avatar.js) */
    --avatar-0: #c62828;
    --avatar-1: #ad1457;
    --avatar-2: #6a1b9a;
    --avatar-3: #4527a0;
    --avatar-4: #283593;
    --avatar-5: #1565c0;
    --avatar-6: #00695c;
    --avatar-7: #2e7d32;
    --avatar-8: #9e4d00;
    --avatar-9: #bf360c;
    --avatar-10: #4e342e;
    --avatar-11: #37474f;
    --avatar-text: #ffffff;
    /* Editor de avatar (D62): as 12 cores do pincel e do fundo do desenho. A ordem é contrato com os rótulos do Twig
       (templates/avatar/_editor.html.twig); o JS lê a cor pelo estilo calculado do botão, nunca repete o hex. */
    --draw-0: #111111;
    --draw-1: #ffffff;
    --draw-2: #9ca3af;
    --draw-3: #e0312b;
    --draw-4: #f97316;
    --draw-5: #ffc21a;
    --draw-6: #1a8548;
    --draw-7: #0d9488;
    --draw-8: #1e6fe0;
    --draw-9: #8e3fd9;
    --draw-10: #ec4899;
    --draw-11: #7c4a21;
    --avatar-sm: 2rem;
    --avatar-md: 2.75rem;
    --avatar-lg: 3.5rem;
    --avatar-xl: 7rem;
    --avatar-hero: 9.375rem;
    --avatar-ring: #ffffff; /* cor da moldura; podium e destaque trocam por --medal-N e --hilite */

    /* Espaço, raio, sombra */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-sm: .4rem;
    --radius-md: .75rem;
    --radius-lg: 1.25rem;
    --radius-round: 999px;
    --radius-chip: .875rem;
    --radius-button: 1.125rem;
    --radius-block: 1.375rem;
    --radius-panel: 1.75rem;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .12);
    /* Sombra sólida do tema de jogo: `0 var(--lift-*) 0 <cor da sombra>`; sem blur. Ao tocar, o botão desce --press. */
    --lift-chip: .3125rem;
    --lift-button: .375rem;
    --lift-block: .5rem;
    --lift-panel: .625rem;
    --lift-pressed: .125rem;
    --press: .25rem;
    --ring: .25rem; /* moldura do avatar */
    --touch-min: 3rem; /* alvo de toque >= 48 px */
    --office-width: 75rem; /* largura do conteúdo do backoffice */
    --border-field: .1875rem; /* borda grossa dos campos */
    --border-dash: .25rem;

    /* Tipografia: corpo na pilha do sistema; display (Fredoka, auto-hospedada em assets/fonts/, @font-face em base.css)
       só em títulos, botões, placar, código da sala e números grandes. Sem CDN (o evento pode rodar sem internet). */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Movimento: as animações de fase (fatia 3) usam só estes tokens */
    --duration-press: 80ms; /* afundar do botão ao toque */
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 600ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* Tema de jogo (telão, entrada na sala, jogo e resultado do jogador) e backoffice (D69, `.office` no corpo, sem animação).
   Troca só os tokens semânticos; o fundo com padrão de pontos vai no corpo da página. */
.game,
:root:has(.game),
.office {
    --color-bg: var(--game-bg);
    --color-surface: var(--panel);
    --color-surface-2: var(--chip);
    --color-text: var(--game-text);
    --color-muted: var(--on-dark-muted);
    --color-border: var(--panel-shade);
    --color-border-strong: var(--on-dark-muted);
    --color-accent: var(--hilite);
    --color-on-accent: var(--on-hilite);
    --color-accent-soft: var(--chip);
    --color-focus: var(--hilite);
    --color-ok: var(--good);
    --color-ok-bg: var(--panel);
    --color-error: var(--card-error);
    --color-error-bg: var(--card);
    --color-warn: var(--on-hilite);
    --color-warn-bg: var(--hilite);
}
:root:has(.game) body,
.office {
    background-color: var(--game-bg);
    background-image: radial-gradient(var(--game-dot) 2px, transparent 2.5px);
    background-size: var(--game-dot-size) var(--game-dot-size);
}
:root:has(.screen), .office { --game-dot-size: 30px; }

/* Cartão branco dentro do tema de jogo: tinta escura e cores de estado que passam no branco. No backoffice, `.card`,
   `.table-card` e `.result` são cartões brancos. */
.paper,
.office .card,
.office .table-card,
.office .result {
    --color-text: var(--card-ink);
    --color-muted: var(--card-muted);
    --color-border: var(--card-border);
    --color-border-strong: var(--card-muted);
    --color-ok: var(--card-ok);
    --color-error: var(--card-error);
    --color-accent: var(--card-link);
    --color-surface: var(--card);
    --color-surface-2: var(--card-hilite);
    --color-accent-soft: var(--card-hilite);
    color: var(--card-ink);
}

/* Quem pede menos movimento: durações quase nulas (a troca de opacidade curta fica por conta de cada animação). */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-press: 1ms;
        --duration-fast: 1ms;
        --duration-base: 1ms;
        --duration-slow: 1ms;
    }
}