/* theme-dark.css — Tokens canónicos de la suite Phos (modo oscuro).
   Fuente de verdad: PHOS_FLOW/src/PhosFlow.Web/theme-dark.css. Ver theme-light.css. */
:root[data-theme="dark"] {
  --bg: #09090b;
  --panel: #18181b;
  --surface: #1f1f23;
  --line: #27272a;
  --muted: #a1a1aa;
  --ink: #fafafa;
  --ink-faint: #71717a;
  --accent: #fafafa;
  --accent-ink: #18181b;
  --accent-dim: rgba(250, 250, 250, .10);
  --accent-hover: #ffffff;
  --teal: #fafafa;
  --teal-dim: rgba(250, 250, 250, .10);
  --warning-dim: rgba(245, 158, 11, .15);
  --danger-dim: rgba(220, 38, 38, .16);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, .28);
  --shadow: 0 8px 22px rgba(0, 0, 0, .32);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .48);

  /* Sidebar — dark mode */
  --sb-bg: #0c0c0e;
  --sb-text: rgba(255,255,255,.78);
  --sb-text-dim: rgba(255,255,255,.40);
  --sb-active-bg: rgba(255,255,255,.08);
  --sb-active-text: #ffffff;
  --sb-hover: rgba(255,255,255,.05);
  --sb-line: rgba(255,255,255,.08);
  --sb-avatar-bg: rgba(255,255,255,.14);
  --sb-avatar-color: #ffffff;

  /* Superficies y texto secundarios (Studio, paneles) — dark mode */
  --surface2: #27272a;
  --text2: #a1a1aa;
  --accent2: #a1a1aa;
  --red: #ef4444;
}

:root[data-theme="dark"] .sidebar { border-right: 1px solid var(--sb-line); }
:root[data-theme="dark"] .btn-secondary:hover { background: #364052; }
:root[data-theme="dark"] .btn-ghost { color: #d4dbea; }
:root[data-theme="dark"] .btn-ghost:hover { background: #3a4558; color: #ffffff; }
:root[data-theme="dark"] body .hamburger,
:root[data-theme="dark"] body .theme-toggle {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}
:root[data-theme="dark"] body .hamburger:hover,
:root[data-theme="dark"] body .theme-toggle:hover {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
}