/* ============================================================================
   Tokens do design system — FONTE ÚNICA das três superfícies web.

   Consumido por:
     - Admin Web ......... copiado para wwwroot/css/tokens.css no build (.csproj)
     - Participant Web ... @import em src/styles/participant.css (inlined pelo vite)
     - Páginas do participante (ParticipantHtml.cs) ... EmbeddedResource, injetado
       inline no <style> — a CSP dessas páginas é `default-src 'none'` e nenhum
       recurso externo carrega ali, nem folha, nem fonte.

   Valores de marca vêm de docs/00-product/BRAND_ASSETS.md e NÃO se recoloram.
   Sistema visual aprovado por Helber em 03/08; escala fechada e superfícies
   unificadas em 24/08.

   REGRA DO CASCADE: componente estiliza SEMPRE por token, nunca por hex de tema.
   Valor cravado em componente é o defeito que este arquivo existe para impedir.

   O que NÃO mora aqui: medida de layout específica de uma superfície
   (--content-max, --nav-width, --header-height) e token de um só produto
   (as faixas do relatório, em tokens.admin.css). Token compartilhado é o que
   as três superfícies usam de fato.
   ============================================================================ */

:root {
  /* --- Marca — valores exatos dos arquivos-fonte; não recolorir --- */
  --brand-primary: #4223d1;
  --brand-on-primary: #ffffff;
  --brand-dark-surface: #09090b;

  /* Widgets do navegador (barra de rolagem, controle de formulário, calendário do
     date input) seguem o tema da PÁGINA, não o do sistema operacional. Sem isto o
     padrão escuro nasceria com scrollbar e select claros por baixo. */
  color-scheme: dark;

  /* --- Acento e derivados ---
     DOIS PAPÉIS, e confundi-los foi o defeito do tema escuro até 02/09: o acento como
     SUPERFÍCIE (fundo sólido que carrega texto branco) e o acento como TINTA (o próprio
     texto, sobre fundo escuro). `--color-primary` serve ao primeiro e É a cor da marca;
     usá-lo como tinta no escuro dava 2,3:1 no link e 1,8:1 no hover do menu — abaixo dos
     4,5:1 da WCAG 1.4.3 e visivelmente ilegível.
     Por isso a tinta tem token próprio, e no ESCURO ela CLAREIA no hover. Herdar o
     `--color-primary-hover` (mais escuro que o acento) invertia a direção: no claro o
     hover fecha a cor, no escuro ele precisa acender. */
  --color-primary: var(--brand-primary);
  /* No ESCURO o acento sólido ACENDE ao passar o ponteiro. O #371cb0 (mais escuro que a
     marca) é a direção do tema CLARO e vive no bloco dele: aqui ele fazia o botão
     primário apagar no hover, que é o oposto do retorno esperado. */
  --color-primary-hover: #5533e8;
  --color-accent-ink: #a292f7;
  --color-accent-ink-hover: #c6bcf9;
  --color-focus-ring: #8f7bf0;
  --brand-soft: #241b52;
  --brand-glow: rgba(115, 92, 235, 0.3);

  /* --- Superfícies e texto (escuro: preto de marca com tinta de índigo, nunca cinza puro) --- */
  --color-bg: #09090b;
  --color-surface: #141319;
  --color-raised: #1b1a23;
  /* Superfície rebaixada: cabeçalho de tabela, cabeçalho de painel colapsável e o
     botão terciário. É o que dá forma de botão à ação de apoio sem peso de acento. */
  --color-sunken: #101017;
  --color-text: #edecf5;
  --color-text-muted: #9c9aad;
  /* Borda de ESTRUTURA (cartão, painel, separador de tabela): dá forma sem pedir atenção.
     A 1,26:1 contra o cartão ela não desenhava nada e o portal escuro virava um borrão. */
  --color-border: #3a3945;
  /* Borda de CONTROLE (campo, botão de contorno). A WCAG 1.4.11 pede 3:1 para o limite que
     IDENTIFICA um controle — e campo de formulário só se distingue pela borda. A de
     estrutura não serve aqui, e antes era ela que estava nos campos. */
  --color-border-strong: #666573;

  /* --- Profundidade --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5);

  /* --- Semânticas (independentes do acento) ---
     Mesma separação do acento: a cor cheia é a SUPERFÍCIE (fundo sólido do botão armado,
     preenchimento da barra); a `-ink` é a mesma semântica vista COMO TEXTO sobre fundo
     escuro. No claro as duas coincidem — é só o escuro que precisa clarear. */
  --ok: #1d8a63;
  --warn: #b45309;
  --danger: #be3a44;
  --ok-ink: #339971;
  --warn-ink: #cf6b2e;
  --danger-ink: #de585e;

  /* --- Espaçamento (escala de 4) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  /* 7 e 8 fecham a escala para respiro entre seções, que antes virava margem solta. */
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Tipografia ---
     DECISÃO DE HELBER, 24/08: a stack é de sistema, SEMPRE. Não se adota webfont
     própria em nenhuma superfície.
     O motivo técnico que a sustenta: as páginas do participante rodam sob
     `default-src 'none'` e não podem carregar webfont — uma fonte só no Admin
     criaria a divergência que este arquivo existe para eliminar, e uma fonte de
     terceiro no fluxo do trabalhador vazaria o IP dele.
     "Segoe UI Variable Text" (não Display) é a variante de corpo no Windows 11. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;

  /* xs e 3xl fecham a escala. Antes dela, o CSS cravava 0.68rem, 0.78rem,
     0.8125rem, 0.9375rem e 1.85rem — cinco tamanhos órfãos, cinco alinhamentos
     que não fechavam. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* Três degraus nomeados no lugar dos quatro ad hoc (600, 650, 700, 750). */
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Componentes e motion --- */
  --radius: 0.65rem;
  --radius-lg: 1rem;
  --motion: 150ms ease;
  /* Piso tocável. O participante sobe para 48px na própria folha: é superfície
     exclusivamente de celular, operada em pé e muitas vezes com luva. */
  --touch-target: 44px;
}

/* ESCURO É O PADRÃO DO PRODUTO (D-056, decisão de Helber em 30/08): o tema não depende
   mais do `prefers-color-scheme` — quem não escolhe nada recebe escuro, em qualquer
   sistema operacional e nas três superfícies. Por isso o claro é o único que precisa de
   bloco: `data-theme="dark"` não casa aqui e cai no `:root` acima, que já É o escuro.
   Uma cópia de cada paleta, e nenhuma terceira fonte da verdade.
   O alternador do Admin (só ele tem um) grava a escolha em localStorage e ela vence. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f7f7fb;
  --color-surface: #ffffff;
  --color-raised: #ffffff;
  --color-sunken: #f4f3f9;
  --color-text: #17171d;
  --color-text-muted: #5b5b66;
  --color-border: #e6e5f0;
  /* No claro a tinta É a cor da marca: sobre branco ela dá 8,8:1 e não precisa de variante.
     O que muda de lado é a borda de controle — aqui ela ESCURECE para chegar aos 3:1. */
  --color-primary-hover: #371cb0;
  --color-accent-ink: var(--brand-primary);
  --color-accent-ink-hover: var(--color-primary-hover);
  --color-border-strong: #8f8e98;
  /* No claro a tinta quase coincide com a cor cheia, mas não exatamente: sobre branco as
     três paravam entre 4,04:1 e 4,47:1 — perto, e ainda assim abaixo dos 4,5:1. O ajuste é
     de um degrau de luminosidade, invisível ao lado da cor cheia que preenche a barra. */
  --ok-ink: #057954;
  --warn-ink: #ac4e02;
  --danger-ink: #bc3843;
  --brand-soft: #ece9fb;
  --brand-glow: rgba(66, 35, 209, 0.22);
  --color-focus-ring: #4223d1;
  --shadow-1: 0 1px 2px rgba(23, 23, 29, 0.05), 0 2px 8px rgba(23, 23, 29, 0.05);
  --shadow-2: 0 2px 4px rgba(23, 23, 29, 0.06), 0 12px 28px rgba(23, 23, 29, 0.09);
}