/* ===========================================================================
   Confere.la · SISTEMA
   A folha de base das telas novas (guia, mapa, elenco). Aqui moram duas
   coisas e nada mais: os tokens do sistema visual e as primitivas de texto.

   O que NÃO entra aqui, por decisão:
   · nenhuma regra de layout. Grade, coluna, pilha e rolagem são assunto de
     cada tela. Uma folha de tokens que arruma a página vira dona da página,
     e aí duas telas nunca mais conseguem discordar de boa-fé.
   · nada de peso de especificidade. Sem declaração forçada, sem esconder
     elemento. Quem herda isto precisa poder vencer sem brigar.

   Por que esta folha existe em vez de reaproveitar `arena.css`: aquela é a
   folha da arena, e é estrutural até o osso (fundo preto forçado, página sem
   rolagem, elementos suprimidos). Importar ela numa tela nova entrega uma
   tela preta e travada. Os tokens abaixo são os mesmos, extraídos literais.

   Três correções em relação à origem, todas conscientes:
   · `arena.css` chama dois tokens que não existem em lugar nenhum: um apelido
     inventado da família de texto e um apelido inventado da tinta. Aquelas
     linhas caem no valor herdado por acidente. Os nomes reais, e os únicos
     que valem aqui, são --sans e --ink.
   · `arena.css` inclina uma citação numa fonte de outra família. O DESIGN.md
     proíbe as duas coisas: a citação é monoespaçada e reta, e a família de
     texto é uma só. Aqui a citação é reta.
   · o sinal de quem está com a palavra vivia como hex solto no meio da folha,
     repetido três vezes. Virou token: --vivo.

   Os dois temas são legítimos. O claro é o valor de partida, o escuro entra
   por preferência do sistema, e `data-theme` no elemento raiz vence os dois
   em qualquer direção. Nenhuma tela nova força tema.
   =========================================================================== */

@import url('/fonts/fonts.css');

/* ============================================================ 1 · GEOMETRIA
   O que não muda com o tema: medida, voz e curva. */

:root {
  /* --- medida ---------------------------------------------------------- */
  /* O raio vive em token para que um dia a tela possa voltar ao canto vivo
     mudando uma linha. 14px no elemento grande, 10px no pequeno. */
  --radius: 14px;
  --radius-sm: 10px;
  --rule: 1px;

  /* Espaçamento do DESIGN.md: três degraus, sem meio-termo inventado. */
  --gap-sm: 8px;
  --gap-md: 14px;
  --gap-lg: 28px;

  /* Respiro da página. Cresce com a tela, começa apertado porque o alvo do
     desenho é o telefone de 375px. */
  --pad-x: clamp(16px, 2.2vw, 44px);
  --pad-y: clamp(12px, 1.7vh, 20px);
  --gutter: clamp(16px, 1.9vw, 34px);

  /* Alvo mínimo de toque. O dedo não mira em 24px. */
  --toque: 44px;

  /* Largura de leitura confortável, para a tela não esticar linha de texto
     de ponta a ponta num monitor largo. */
  --coluna: 1120px;

  /* --- voz ------------------------------------------------------------- */
  /* Três papéis, três fontes, nenhuma quarta. A pilha de reserva é toda de
     traço reto: nenhuma família de pé entra no sistema. */
  --sans: 'Satoshi', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JBMono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Bebas', 'Anton', 'Archivo', ui-sans-serif, system-ui, sans-serif;

  /* Corpo de texto. Os tamanhos do DESIGN.md são o teto: no telefone eles
     encolhem, na tela grande param no valor de projeto. */
  --t-lab: 9.5px;
  --t-nota: 12px;
  --t-corpo: 15px;
  --t-dado: 11px;
  --t-manchete: clamp(17px, 4.4vw, 24px);
  --t-titulo: clamp(30px, 8.5vw, 56px);
  --t-placar: clamp(34px, 9vw, 60px);

  /* Entreletra. A etiqueta mono é larga por definição: é ela que dá o tom de
     sala de controle. */
  --ls-lab: .22em;
  --ls-lab-tight: .14em;
  --ls-lab-wide: .32em;
  --ls-display: .015em;
  --ls-manchete: -.02em;

  --peso-corpo: 400;
  --peso-medio: 500;
  --peso-forte: 700;
  --peso-grito: 900;

  --linha-corpo: 1.45;
  --linha-titulo: 1.18;

  /* --- curva ------------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --slam: cubic-bezier(.2, 1.6, .4, 1);
  --tempo: .3s;
}

/* ========================================================== 2 · TEMA CLARO
   O papel do mockup claro: a família de cinzas neutros, tinta quase preta e
   as três cores de estado. É o valor de partida da folha, e por isso mora no
   `:root` puro: tela nova que não decide nada nasce clara e legível. */

:root,
[data-theme='light'] {
  color-scheme: light;

  --bg-1: #f9fafb;
  --bg-2: #f3f4f6;
  --bg-3: #e5e7eb;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --screen: #e5e7eb;

  --ink: #111827;
  --ink-2: #374151;
  --ink-3: #4b5563;
  --muted: #6b7280;
  --faint: #9ca3af;

  --line: #d1d5db;
  --line-soft: #e5e7eb;
  --line-hard: #111827;

  /* verde acerta */
  --ok: #059669;
  --ok-mark: #a7f3d0;
  --ok-wash: #d1fae5;
  --ok-solid: #22c55e;
  --ok-on: #052e16;

  /* vermelho erra */
  --bad: #b91c1c;
  --bad-mark: #fecaca;
  --bad-wash: #fee2e2;
  --bad-solid: #ef4444;
  --bad-on: #fff5f5;

  /* neutro morno: o impreciso, que não é acerto nem erro */
  --mid: #4b5563;
  --mid-mark: #d1d5db;
  --mid-wash: #e5e7eb;
  --mid-solid: #e5e7eb;
  --mid-on: #374151;

  /* o acento da marca é a própria tinta, invertida em chip sólido */
  --chip-bg: #111827;
  --chip-ink: #f9fafb;

  /* o sinal de que algo está acontecendo agora: transmissão no ar, raia de
     quem está com a palavra. Era hex solto em arena.css, repetido três vezes. */
  --vivo: #d0ff00;
  --vivo-ink: #0b0b0a;

  --dot: #cbd0d6;
  --veil: #f3f4f6;

  /* O card de candidato é escuro nos dois temas: é o objeto de marca da
     tela. No papel claro ele salta; no escuro, ganha aresta para não sumir. */
  --card-bg: #0b0b0a;
  --card-bg-2: #17171a;
  --card-ink: #ffffff;
  --card-line: transparent;
  --card-ok: #22c55e;
  --card-mid: #9ca3af;
  --card-bad: #ef4444;
}

/* ========================================================= 3 · TEMA ESCURO
   Pretos quentes e a mesma família de estado, com o verde subindo de tom
   porque no preto o esmeralda fechado do claro some. */

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

  --bg-1: #000000;
  --bg-2: #000000;
  --bg-3: #000000;
  --surface: #000000;
  --surface-2: #000000;
  --screen: #000000;

  --ink: #e4e4e4;
  --ink-2: #acacac;
  --ink-3: #8a8a8a;
  --muted: #686868;
  --faint: #505050;

  --line: #292929;
  --line-soft: #232323;
  --line-hard: #393939;

  --ok: #22c55e;
  --ok-mark: #22c55e;
  --ok-wash: #082d05;
  --ok-solid: #22c55e;
  --ok-on: #04150a;

  --bad: #ef4444;
  --bad-mark: #ef4444;
  --bad-wash: #320808;
  --bad-solid: #ef4444;
  --bad-on: #1a0505;

  --mid: #a0a0a0;
  --mid-mark: #5e5e5e;
  --mid-wash: #1c1c18;
  --mid-solid: #393939;
  --mid-on: #e4e4e4;

  --chip-bg: #e4e4e4;
  --chip-ink: #0a0a08;

  --vivo: #d0ff00;
  --vivo-ink: #0b0b0a;

  --dot: #232320;
  --veil: #000000;

  --card-bg: #000000;
  --card-bg-2: #000000;
  --card-ink: #f4f4f4;
  --card-line: #35352f;
  --card-ok: #22c55e;
  --card-mid: #8a8a8a;
  --card-bad: #ef4444;
}

/* ============================================== 4 · PREFERÊNCIA DO SISTEMA
   Quem não escolheu nada segue o aparelho. O `:not` é o que garante que a
   escolha manual continue valendo nos dois sentidos: quem pediu claro num
   celular no escuro recebe claro. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg-1: #000000;
    --bg-2: #000000;
    --bg-3: #000000;
    --surface: #000000;
    --surface-2: #000000;
    --screen: #000000;

    --ink: #e4e4e4;
    --ink-2: #acacac;
    --ink-3: #8a8a8a;
    --muted: #686868;
    --faint: #505050;

    --line: #292929;
    --line-soft: #232323;
    --line-hard: #393939;

    --ok: #22c55e;
    --ok-mark: #22c55e;
    --ok-wash: #082d05;
    --ok-solid: #22c55e;
    --ok-on: #04150a;

    --bad: #ef4444;
    --bad-mark: #ef4444;
    --bad-wash: #320808;
    --bad-solid: #ef4444;
    --bad-on: #1a0505;

    --mid: #a0a0a0;
    --mid-mark: #5e5e5e;
    --mid-wash: #1c1c18;
    --mid-solid: #393939;
    --mid-on: #e4e4e4;

    --chip-bg: #e4e4e4;
    --chip-ink: #0a0a08;

    --dot: #232320;
    --veil: #000000;

    --card-bg: #000000;
    --card-bg-2: #000000;
    --card-ink: #f4f4f4;
    --card-line: #35352f;
    --card-ok: #22c55e;
    --card-mid: #8a8a8a;
    --card-bad: #ef4444;
  }
}

/* ============================================================ 5 · A BASE
   O mínimo de higiene para os tokens acima chegarem à página. Nenhuma destas
   linhas decide posição de nada. */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  font-weight: var(--peso-corpo);
  line-height: var(--linha-corpo);
  -webkit-font-smoothing: antialiased;
}

/* =============================================== 6 · PRIMITIVAS DE TEXTO
   Uma classe por voz do sistema. Elas dizem só como a palavra soa: tamanho,
   peso, caixa, cor. Onde a palavra fica é problema da tela. */

/* A voz que mede: etiqueta, rótulo de HUD, estado de sistema. Mono, caixa
   alta, entreletra larga. Aparece em toda tela e é o que dá o sotaque. */
.lab {
  font-family: var(--mono);
  font-size: var(--t-lab);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-lab);
  text-transform: uppercase;
  color: var(--muted);
}
.lab--tight { letter-spacing: var(--ls-lab-tight); }
.lab--wide { letter-spacing: var(--ls-lab-wide); }
.lab--ink { color: var(--ink-2); }
.lab--faint { color: var(--faint); }
.lab--ok { color: var(--ok); }
.lab--bad { color: var(--bad); }
.lab--vivo { color: var(--vivo); }

/* A voz que grita: nome próprio e número de placar. Condensada, caixa alta,
   peso único. É a única fonte de cartaz do sistema. */
.titulo {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-titulo);
  font-weight: 400;
  line-height: var(--linha-titulo);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
}

/* A voz que fala, no volume alto: manchete de veredito, título de bloco. */
.manchete {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-manchete);
  font-weight: var(--peso-grito);
  line-height: 1.2;
  letter-spacing: var(--ls-manchete);
  color: var(--ink);
}

/* A voz que fala, no volume de conversa. */
.corpo {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-corpo);
  font-weight: var(--peso-corpo);
  line-height: var(--linha-corpo);
  color: var(--ink-2);
}

.nota {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-nota);
  line-height: 1.5;
  color: var(--muted);
}

/* Número que muda na tela: horário, contagem, placar. Alinha em coluna
   porque os algarismos têm largura igual, então o dígito não dança quando o
   valor troca. */
.dado {
  font-family: var(--mono);
  font-size: var(--t-dado);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-lab-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.numero {
  font-family: var(--display);
  font-size: var(--t-placar);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* A fala citada. Monoespaçada e reta: as aspas já dão o recuo, e inclinar
   texto está fora do sistema. */
.citacao {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-nota);
  font-weight: var(--peso-corpo);
  line-height: 1.6;
  color: var(--ink-3);
}

/* O acento da marca: tinta cheia com a cor do papel por cima. */
.chip {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-family: var(--mono);
  font-size: var(--t-lab);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ls-lab-tight);
  text-transform: uppercase;
  line-height: 1.6;
}
.chip--ok { background: var(--ok-solid); color: var(--ok-on); }
.chip--mid { background: var(--mid-solid); color: var(--mid-on); }
.chip--bad { background: var(--bad-solid); color: var(--bad-on); }
/* O sinal de agora. É a única peça que usa a cor de vivo. */
.chip--vivo { background: var(--vivo); color: var(--vivo-ink); }

/* Ligação de texto: sublinhado afastado da letra, na tinta do tema. O estado
   de foco fica visível porque nem todo mundo navega com o dedo. */
.link {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color var(--tempo) var(--ease), text-decoration-color var(--tempo) var(--ease);
}
.link:hover { text-decoration-color: var(--ink); }
.link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Texto que existe só para quem navega ouvindo a tela. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}