/* kaqtu — tema da plataforma.
 *
 * FONTE ÚNICA dos tokens de identidade. Antes daqui, doze páginas repetiam o
 * mesmo bloco :root com nomes diferentes para as mesmas cores (--muted e
 * --text-muted, --primary2 e --primary-2 e --secondary, --warn e --warning),
 * e mudar a paleta exigia doze edições.
 *
 * Toda página da plataforma carrega este arquivo ANTES do seu próprio <style>,
 * então continua podendo sobrescrever o que for específico dela.
 *
 * Dois sistemas convivem:
 *   Laboratório  o tema escuro de tudo que é do professor
 *   Papel        fundo branco, para onde o material impresso aparece — e para
 *                as telas do aluno, cujos diagramas são traçados escuros
 */

:root {
  color-scheme: dark;

  /* ============================================================
     1. PRIMITIVOS — Laboratório
     ============================================================ */
  --bg: #0B1020;
  --surface: #141B33;
  --surface-2: #1E2745;
  --text: #F2F5FF;
  --text-muted: #A9B4D0;
  --primary: #8AA4FF;          /* azul — estrutura, links, rótulos          */
  --secondary: #7C5CFF;        /* violeta — gráfico, nunca texto (4,36:1)   */
  --accent: #C6FF5E;           /* verde-lima — ação, foco e progresso, só   */
  --on-accent: #0B1020;
  --on-primary: var(--on-accent);  /* texto sobre o degradê --primary/--primary-2;
                                       aqui é o mesmo tom porque --primary é claro.
                                       Nos temas Papel abaixo, --primary escurece e
                                       este token vira claro — ver comentário lá. */
  --border: #2E3A5C;
  --border-input: #7A88B0;
  --focus: #C6FF5E;
  --success: #34D399;          /* validação conferida, e só isso            */
  --warning: #FBBF24;
  --danger: #FB7185;

  /* ============================================================
     2. PRIMITIVOS — Papel (fundo branco fixo)
     ============================================================ */
  --paper-surface: #FFFFFF;
  --paper-subtle: #F1F5F9;
  --paper-border: #E2E8F0;
  --paper-ink: #0F172A;
  --paper-secondary: #334155;
  --paper-muted: #55637B;
  --paper-indigo: #4F46E5;
  --paper-indigo-dark: #3730A3;
  --paper-green: #10B981;      /* só preenchimento; como texto reprova      */
  --paper-success: #047857;    /* a versão que passa como texto (5,48:1)    */
  --paper-warning: #B45309;
  --paper-danger: #BE123C;

  /* ============================================================
     3. APELIDOS — os nomes que as páginas já usavam
     Ficam para que nenhuma tela quebre. Em código novo, use os
     primitivos acima.
     ============================================================ */
  --bg-1: var(--bg);
  --bg-2: #10162C;             /* o segundo tom dos gradientes de fundo     */
  --muted: var(--text-muted);
  --primary-2: var(--secondary);
  --primary2: var(--secondary);
  --warn: var(--warning);
  --primary-soft: color-mix(in srgb, var(--primary) 16%, transparent);
  --success-soft: color-mix(in srgb, var(--success) 16%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 16%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent);

  /* ============================================================
     3b. CAMPO DE PARTÍCULAS DA LANDING (campo.js)
     Apelidos próprios, não os primitivos direto: no claro, --accent
     continua sendo o lima da marca (usado em botões), mas um lima
     claro sobre o fundo Papel quase some — por isso --campo-c ganha
     um tom mais escuro só para os pontinhos. --campo-a/--campo-b
     seguem --primary/--secondary normalmente: no claro eles já
     escurecem sozinhos (indigo em vez de azul/violeta pastel), então
     não precisam de um apelido próprio nem de override no bloco claro.
     ============================================================ */
  --campo-a: var(--primary);
  --campo-b: var(--secondary);
  --campo-c: var(--accent);

  /* ============================================================
     4. TIPOGRAFIA — display carrega a personalidade,
     mono é a voz da máquina (estado, contador, código, unidade)
     ============================================================ */
  --ff-display: 'MuseoModerno', system-ui, sans-serif;
  --ff-texto: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fs-hero: clamp(38px, 6.8vw, 100px);
  --fs-h2: clamp(27px, 3.4vw, 42px);
  --fs-h3: 19px;
  --fs-h4: 16.5px;
  --fs-corpo: 16px;
  --fs-corpo-lg: clamp(17px, 2vw, 20px);
  --fs-peq: 14px;
  --fs-mono: 12.5px;
  --ls-display: -.03em;
  --ls-mono: .08em;

  /* ============================================================
     5. ESPAÇO — nomeado por papel, mesmos degraus do raio
     ============================================================ */
  --sp-xs: 6px;
  --sp-sm: 10px;
  --sp-md: 14px;
  --sp-lg: 20px;
  --sp-xl: 24px;
  --sp-2xl: 56px;
  --sp-secao: clamp(64px, 8vw, 104px);

  /* ============================================================
     6. RAIO — um por papel, não um raio global
     ============================================================ */
  --r-xs: 6px;                 /* chips e tags                              */
  --r-sm: 10px;                /* botões, campos, documentos                */
  --r-md: 14px;                /* cards e caixas de conteúdo                */
  --r-lg: 20px;                /* painéis do primeiro plano                 */
  --r-pill: 999px;
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);

  /* ============================================================
     7. MOVIMENTO
     ============================================================ */
  --e-saida: cubic-bezier(.16, 1, .3, 1);   /* algo entrando em cena        */
  --e-cena: cubic-bezier(.65, 0, .35, 1);   /* troca de estado              */
  --e-micro: cubic-bezier(.2, 0, 0, 1);     /* hover, foco                  */
  --t-micro: 180ms;
  --t-elem: 560ms;
  --t-cena: 1100ms;

  /* ============================================================
     8. PROFUNDIDADE — sombra pesada só no plano de cima
     ============================================================ */
  --z-campo: 0;
  --z-doc: 1;
  --z-fixo: 2;
  --z-topo: 50;
  --z-skip: 100;
  --shadow: 0 12px 30px -16px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --sombra-fixo: 0 30px 70px -34px rgba(0, 0, 0, .7);
  --blur-topo: 14px;

  --topbar-h: 56px;
}

/* ==================================================================
   TEMA — o Laboratório escuro (bloco :root do topo) é sempre o ponto
   de partida, pra todo mundo, independente da preferência do SO.
   ESCOLHA MANUAL — o botão de tema (ver _appbar.html e
   _tema_toggle.html) grava a escolha em localStorage e aplica
   data-tema="claro" em <html> antes da primeira pintura, sempre que o
   visitante já tiver escolhido o claro alguma vez; sem escolha
   registrada, ou com data-tema="escuro", fica no Laboratório escuro
   do bloco :root do topo.

   --on-accent não muda aqui: --accent (verde-lima) é o mesmo nos dois
   temas, e tinta clara sobre fundo lima não tem contraste — por isso
   as tintas AQUI não incluem --on-accent, herdando sempre o #0B1020
   do :root do topo.

   --on-primary MUDA aqui, e de propósito: no Laboratório --primary é um
   azul claro (#8AA4FF) e pede tinta escura; aqui --primary vira indigo
   escuro (paper-indigo), e a mesma tinta escura (#0B1020) já não tem
   contraste nenhum — foi o bug relatado por Carlos em 12/09/2026 num
   toggle segmentado (texto preto sobre botão indigo). Por isso, ao
   contrário de --on-accent, este token troca para claro nos dois temas
   Papel abaixo.
   ================================================================== */
:root[data-tema="claro"] {
  color-scheme: light;
  --bg: var(--paper-subtle);
  --bg-1: var(--paper-subtle);
  --bg-2: var(--paper-surface);
  --surface: var(--paper-surface);
  --surface-2: var(--paper-subtle);
  --border: var(--paper-border);
  --border-input: #94A3B8;
  --text: var(--paper-ink);
  --text-muted: var(--paper-muted);
  --muted: var(--paper-muted);
  --primary: var(--paper-indigo);
  --secondary: var(--paper-indigo-dark);
  --primary-2: var(--paper-indigo-dark);
  --primary2: var(--paper-indigo-dark);
  --primary-soft: #EEF0FF;
  --on-primary: #FFFFFF;
  --campo-c: var(--paper-indigo-dark);
  --success: var(--paper-success);
  --danger: var(--paper-danger);
  --warning: var(--paper-warning);
  --warn: var(--paper-warning);
  --focus: var(--paper-indigo);
  --shadow: 0 12px 30px -18px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .08);
}

/* ==================================================================
   PAPEL — as telas do aluno.
   Claro de propósito: os diagramas (schemdraw, matplotlib) são traçados
   escuros que presumem fundo branco e somem no escuro, sobretudo os
   circuitos. Os mesmos apelidos apontam para o subsistema Papel, então
   os componentes não precisam saber em qual dos dois estão.
   ================================================================== */
body.tema-aluno {
  color-scheme: light;
  --bg: var(--paper-subtle);
  --bg-1: var(--paper-subtle);
  --bg-2: var(--paper-surface);
  --surface: var(--paper-surface);
  --surface-2: var(--paper-subtle);
  --border: var(--paper-border);
  --border-input: #94A3B8;
  --text: var(--paper-ink);
  --text-muted: var(--paper-muted);
  --muted: var(--paper-muted);
  --primary: var(--paper-indigo);
  --secondary: var(--paper-indigo-dark);
  --primary-2: var(--paper-indigo-dark);
  --primary2: var(--paper-indigo-dark);
  --primary-soft: #EEF0FF;
  --on-primary: #FFFFFF;
  --success: var(--paper-success);
  --danger: var(--paper-danger);
  --warning: var(--paper-warning);
  --warn: var(--paper-warning);
  --focus: var(--paper-indigo);
  --shadow: 0 12px 30px -18px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .08);
  background: var(--bg);
  color: var(--text);
}

/* ==================================================================
   BASE COMPARTILHADA
   O <style> de cada página vem depois deste arquivo, então continua
   ganhando de tudo aqui.
   ================================================================== */
body {
  font-family: var(--ff-texto);
}

h1, h2, h3 {
  font-family: var(--ff-display);
  letter-spacing: -.015em;
  text-wrap: balance;
}

code, kbd, samp, pre, .mono {
  font-family: var(--ff-mono);
}

.mono {
  font-variant-numeric: tabular-nums;
}

:is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* O atributo `hidden` tem que esconder — sempre.

   Regra do navegador é `[hidden] { display: none }`, com a especificidade de um
   seletor de atributo; qualquer `.minha-classe { display: flex }` nossa vence
   (estilo de autor sempre ganha do estilo do navegador) e o elemento reaparece
   mesmo marcado como hidden. Isso já tinha mordido em telas diferentes, e cada
   uma remendou com um `.classe[hidden]` próprio. Aqui a garantia é uma só, para
   a plataforma inteira: quem faz `el.hidden = true` no JS pode confiar. */
[hidden] { display: none !important; }