/**
 * ===============================================================================
 * ARQUIVO: app/static/css/tokens.css
 * CAMADA: Estilização / Design Tokens
 * PAPEL NO SISTEMA:
 *   - Define a paleta escura de BAIXO CONTRASTE (cinzas quentes + acento sálvia),
 *     raios, sombras, tipografia e curvas de animação usados em todo o app.
 *   - Mapeia esses tokens para as variáveis do Pico CSS v2 (--pico-*), de modo que
 *     inputs, selects, switches e o <dialog> do framework herdem o mesmo visual.
 *   - As cores por vestibular NÃO ficam aqui: são geradas no JS (ui.js > colorFor)
 *     a partir do nome, com saturação baixa, e aplicadas via variável --c.
 * ===============================================================================
 */

:root[data-theme="dark"] {
  /* Superfícies (do fundo para cima) */
  --bg: #15171a;
  --bg-elev: #181a1e;
  --surface: #1c1f23;
  --surface-2: #212429;
  --surface-hover: #23262c;

  /* Linhas */
  --border: #272a30;
  --border-strong: #31353c;

  /* Texto */
  --text: #c6c9ce;
  --text-strong: #dfe1e4;
  --muted: #8a8f97;
  --faint: #5d626a;

  /* Acento (sálvia suave) e estados */
  --accent: #8fb3a6;
  --accent-soft: rgba(143, 179, 166, 0.1);
  --accent-softer: rgba(143, 179, 166, 0.06);
  --accent-line: rgba(143, 179, 166, 0.32);
  --danger: #c99393;
  --danger-soft: rgba(201, 147, 147, 0.1);
  --danger-line: rgba(201, 147, 147, 0.3);
  --warn: #c9b48f;
  --warn-soft: rgba(201, 180, 143, 0.08);

  /* Forma */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.7);

  /* Tipografia */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Movimento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 140ms;
  --normal: 220ms;

  /* Layout */
  --sidebar-w: 256px;
  --content-max-w: 1440px;
  --touch-target: 44px;

  /* --------------------------- Mapeamento Pico CSS --------------------------- */
  --pico-font-family: var(--font);
  --pico-font-family-monospace: var(--mono);
  --pico-font-size: 93.75%;
  --pico-line-height: 1.5;
  --pico-font-weight: 400;
  --pico-spacing: 1rem;
  --pico-border-radius: var(--radius-sm);
  --pico-transition: var(--fast) var(--ease);

  --pico-background-color: var(--bg);
  --pico-color: var(--text);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--border);

  --pico-h1-color: var(--text-strong);
  --pico-h2-color: var(--text-strong);
  --pico-h3-color: var(--text-strong);
  --pico-h4-color: var(--text-strong);
  --pico-h5-color: var(--text);
  --pico-h6-color: var(--text);

  --pico-primary: var(--accent);
  --pico-primary-background: var(--accent-soft);
  --pico-primary-border: var(--accent-line);
  --pico-primary-underline: var(--accent-line);
  --pico-primary-hover: var(--text-strong);
  --pico-primary-hover-background: var(--accent-soft);
  --pico-primary-hover-border: var(--accent-line);
  --pico-primary-focus: var(--accent-soft);
  --pico-primary-inverse: var(--text-strong);

  --pico-form-element-background-color: var(--surface-2);
  --pico-form-element-selected-background-color: var(--surface-hover);
  --pico-form-element-border-color: var(--border);
  --pico-form-element-color: var(--text-strong);
  --pico-form-element-placeholder-color: var(--faint);
  --pico-form-element-active-background-color: var(--surface-2);
  --pico-form-element-active-border-color: var(--accent-line);
  --pico-form-element-focus-color: var(--accent-soft);
  --pico-form-element-invalid-border-color: var(--danger-line);
  --pico-switch-background-color: var(--border-strong);
  --pico-switch-checked-background-color: var(--accent);
  --pico-switch-color: var(--text-strong);
  --pico-switch-thumb-box-shadow: none;

  --pico-card-background-color: var(--surface);
  --pico-card-border-color: var(--border);
  --pico-card-box-shadow: var(--shadow-lg);
  --pico-card-sectioning-background-color: var(--bg-elev);

  --pico-modal-overlay-background-color: rgba(10, 11, 13, 0.62);
  --pico-modal-overlay-backdrop-filter: blur(6px);

  --pico-code-background-color: var(--bg-elev);
  --pico-code-color: var(--text);
  --pico-kbd-background-color: var(--surface-2);
  --pico-kbd-color: var(--muted);
}