/* Tokens de tema — compartilhado por todas as páginas (ver tema.js pro
   alternador). Três estados: sistema (padrão, segue o SO via
   prefers-color-scheme), claro e escuro (escolha explícita, salva em
   localStorage e vence o SO).

   Paleta 100% neutra (cinza puro, sem matiz nenhum) + destaque
   MONOCROMÁTICO preto/branco invertido — padrão X/Grok. No escuro o botão
   primário é branco com texto preto, no claro é preto com texto branco.
   Nada de cor de marca competindo com o vermelho/verde semântico de
   risco/status, e nenhuma escola precisa (nem pode) configurar a própria
   cor de destaque.

   (Essa paleta já foi bege/carvão "quente" numa versão anterior, mas isso
   ficou inconsistente ao adotar o destaque monocromático — fundo com viés
   de cor e destaque neutro não combinam. Cinza neutro de verdade em tudo.)

   --accent-contrast NÃO é fixo entre os temas aqui (diferente de quando o
   destaque era dourado): como o preenchimento inverte (preto no claro,
   branco no escuro), o texto em cima dele também precisa inverter. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --text: #0f1419;
  --text-muted: #536471;
  --border: #eff3f4;

  --accent: #0f1419;
  --accent-hover: #000000;
  --accent-ink: #0f1419;
  --accent-light: #536471;
  --accent-contrast: #ffffff;

  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --info: #3b82f6;
  --info-rgb: 59, 130, 246;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.05), 0 14px 32px rgba(0, 0, 0, 0.09);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --accent-rgb: 15, 20, 25;
  --surface-rgb: 255, 255, 255;
  --success-rgb: 22, 163, 74;
  --danger-rgb: 220, 38, 38;
  --shimmer: rgba(0, 0, 0, 0.04);

  /* aliases pro nome antigo dos tokens, usados no resto do projeto */
  --card: var(--surface);
  --muted: var(--text-muted);
  --ok: var(--success);
  --input-bg: var(--surface-2);
  --card-rgb: var(--surface-rgb);
  --ok-rgb: var(--success-rgb);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #000000;
    --surface: #16181c;
    --surface-2: #202327;
    --text: #e7e9ea;
    --text-muted: #71767b;
    --border: #2f3336;

    --accent: #e7e9ea;
    --accent-hover: #ffffff;
    --accent-ink: #e7e9ea;
    --accent-light: #71767b;
    --accent-contrast: #000000;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.4);

    --accent-rgb: 231, 233, 234;
    --surface-rgb: 22, 24, 28;
    --shimmer: rgba(255, 255, 255, 0.07);
  }
}

:root[data-tema="escuro"] {
  --bg: #000000;
  --surface: #16181c;
  --surface-2: #202327;
  --text: #e7e9ea;
  --text-muted: #71767b;
  --border: #2f3336;

  --accent: #e7e9ea;
  --accent-hover: #ffffff;
  --accent-ink: #e7e9ea;
  --accent-light: #71767b;
  --accent-contrast: #000000;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.4);

  --accent-rgb: 231, 233, 234;
  --surface-rgb: 22, 24, 28;
  --shimmer: rgba(255, 255, 255, 0.07);
}

.tema-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.tema-toggle:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-1px); }
.tema-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-toggle svg { display: block; }