/* ═══════════════════════════════════════════════════════════════
   tokens.css — Meridian Design System (Rodada 5)
   Fonte única da verdade de cor/tipografia/espaçamento/raio/sombra/
   duração, consumida pelo dashboard E pelo app do aluno (e páginas
   públicas). Nunca usar hex fora deste arquivo — ver checks/c_lint.py.
═══════════════════════════════════════════════════════════════ */

/* ── Fontes self-hosted (sem CDN em runtime) ──────────────────────
   Albert Sans e Bodoni Moda são fontes variáveis (wght num único
   arquivo) — 2 arquivos por família (latin + latin-ext) cobrem todos
   os pesos usados. font-display: swap. Preload das críticas feito
   no <head> de cada página (ver dashboard.html/aluno.html/index.html). */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/albert-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/albert-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/bodoni-moda-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/bodoni-moda-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Cor — base dark (padrão, único tema do app do aluno) ─────── */
  --bg:  #0D1017;
  --s1:  #161A23;
  --s2:  #1E232E;
  --tx:  #F2F3F5;
  --mut: #8A91A0;
  --dim: #5C6373;
  --border: rgba(242,243,245,0.10);
  --border-strong: rgba(242,243,245,0.18);

  /* Acento — padrão de fábrica; editável por profissional (brand_primary),
     validado por contraste em runtime (ver js/brand.js) — se a cor
     escolhida falhar o mínimo, o app ajusta pra variante acessível mais
     próxima e avisa. --on-accent é recalculado via luminância; o valor
     aqui é só o fallback estático antes do JS rodar. */
  --accent:    #E8B04B;
  --accent-2:  #F0C476;
  --on-accent: #15181D;
  /* Texto sobre cor de marca escolhida pelo profissional: o app escolhe
     entre os dois pelo maior contraste (js/aluno.js, contrastText). */
  --shadow-ink: #000000; /* base de sombras e véus (via color-mix) */
  --on-color-dark: #111111;
  --on-color-light: #FFFFFF;

  /* Status — semântico, nunca usado como acento de marca */
  --ok:   #4FAE7A;
  --err:  #D9685C;
  --warn: #D9A94F;
  --info: #5C8FBF;

  /* CHK-E2 (herdado) — tom de aba inativa com contraste mínimo garantido
     contra --s2 em cada tema; nunca usar --mut aqui (falha o contraste
     nesse componente especificamente). */
  --nav-tab-inactive: #7E92A8;
  --nav-tab-inactive-light: #5A7085;

  /* Espaçamento — escala 4px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Raio — pequeno de propósito (editorial, não "card de IA" arredondado) */
  --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px;

  /* Sombra — discreta, nunca "glow" genérico */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.35);

  /* Duração */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* Tipografia */
  --font-ui:      'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  /* --fs-2xs só para sobrelinha em CAIXA ALTA com espaçamento (rótulo de
     KPI/painel); nenhum texto corrido abaixo de --fs-xs (12px). */
  --fs-2xs: 11px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px;
  --lh-tight: 1.15; --lh-base: 1.5;
  --tracking-overline: 0.12em;

  /* Tintas da cor de acento/estados (fundo de badge, hover, borda fina).
     Derivadas do token, então acompanham a cor do profissional e o tema. */
  --accent-tint:   color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line:   color-mix(in srgb, var(--accent) 35%, transparent);
  --ok-tint:   color-mix(in srgb, var(--ok) 12%, transparent);
  --err-tint:  color-mix(in srgb, var(--err) 12%, transparent);
  --warn-tint: color-mix(in srgb, var(--warn) 12%, transparent);
  --info-tint: color-mix(in srgb, var(--info) 12%, transparent);
  --overlay: rgba(0,0,0,0.6);

  /* Séries de gráfico (categorias), ordem FIXA, nunca reciclada: dourado,
     azul, laranja, verde-água, violeta, magenta. Validada (dataviz
     validate_palette.js) contra --s1 escuro: banda de luminosidade,
     croma mínimo, separação para daltonismo (ΔE >= 9) e contraste >= 3:1.
     Série única usa --accent; estados (ok/err/warn) nunca viram série. */
  --cat-1: #c98500; --cat-2: #3987e5; --cat-3: #d95926;
  --cat-4: #199e70; --cat-5: #9085e9; --cat-6: #d55181;

  /* Acento do Hub no tema claro: o #E8B04B de marca é claro demais para
     servir de TEXTO sobre fundo claro (1.58:1). Mesmo matiz, escurecido
     (>= 5.4:1 contra --bg e --s2 claros). Antes ficava como hex solto em
     dashboard.css. */
  --accent-text-light: #805212;
}

/* ── Variante clara — só existe hoje no dashboard (toggle já existente),
   nunca no app do aluno (dark-only, regra da Rodada 5). Mesmos nomes de
   token, valores derivados — nenhum componente precisa saber qual tema
   está ativo. */
[data-theme="light"] {
  --bg:  #F6F4EF;
  --s1:  #FFFFFF;
  --s2:  #ECE7DC;
  --tx:  #15181D;
  --mut: #5B6370;
  --dim: #868D99;
  --border: rgba(21,24,29,0.12);
  --border-strong: rgba(21,24,29,0.22);
  /* Mini-rodada pré-lançamento / item 2 — --accent (#E8B04B) é usado como
     TEXTO em vários lugares (css/dashboard.css, admin.css, legal.css,
     form.css: .t-link, .toggle-btn:hover etc), não só como fundo de botão.
     Contra o fundo claro deste tema dava 1.78:1 (achado real, abaixo até
     do mínimo de UI de 3:1, bem abaixo do 4.5:1 de texto) — igual ao
     padrão já usado pro --ok/--warn/--err/--info abaixo: mesmo matiz,
     escurecido só aqui, 4.71:1 contra --bg claro. --on-accent vira branco
     nesse tema (3.44:1 com o texto escuro antigo não bastava; branco dá
     5.18:1) — continua resolvendo o par fundo-dourado-escuro/texto onde
     --accent é usado como FUNDO (.btn-primary, .chip-accent etc). */
  --accent: #926413;
  --on-accent: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(21,24,29,0.08);
  --shadow-md: 0 6px 20px rgba(21,24,29,0.10);
  /* CHK-E (axe color-contrast): --ok/--warn/--err/--info são tons claros,
     pensados pra TEXTO sobre fundo escuro (--bg/--s2 daqui de cima) — como
     TEXTO sobre o fundo claro deste tema eles caem entre 1.96:1 e 3.02:1,
     bem abaixo do mínimo 4.5:1. Versões escurecidas só pra este tema,
     mesmo matiz, >=5.3:1 contra --bg e --s2 claros (nunca usadas como
     FUNDO de badge — lá o próprio --ok/--warn/--err/--info claro continua,
     com texto escuro por cima, contraste já resolvido nesse caso). */
  --ok:   #1D6342;
  --warn: #8A5A0A;
  --err:  #9E3024;
  --info: #2F597F;
  /* séries de gráfico no tema claro: mesmos matizes, passo para fundo claro */
  --cat-1: #a86f00; --cat-2: #2a78d6; --cat-3: #eb6834;
  --cat-4: #1baf7a; --cat-5: #6250d6; --cat-6: #e87ba4;
}

* , *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--tx);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* palavras compostas longas (alemão) quebram em vez de vazar da caixa */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Controles de formulário herdam a fonte do app (por padrão o navegador
   usa a fonte do sistema em input/select/button). Especificidade zero,
   qualquer classe de componente continua vencendo. */
:where(button, input, select, textarea) { font-family: inherit; }

/* Movimento reduzido: sem animação decorativa, transições instantâneas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}