/* Semantic aliases. These are the names UI code should reference.
   Light theme is the default; [data-theme="dark"] is the portal's night mode. */
:root {
  --surface: var(--white);
  --surface-card: var(--white);
  --surface-page: var(--slate-25);
  --surface-tint: var(--slate-50);
  --surface-sunken: var(--slate-100);

  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-tertiary: var(--slate-400);
  --text-quiet: var(--slate-500);
  --text-on-navy: var(--white);

  --border: var(--slate-200);
  --border-strong: var(--slate-300);

  --action-primary-bg: var(--navy-800);
  --action-primary-bg-hover: var(--navy-700);
  --action-primary-text: var(--white);
  --action-accent: var(--blue-accent);
  --action-accent-hover: var(--blue-hover);
  --link: var(--blue-accent);
  --link-hover: var(--blue-hover);

  --sidebar-bg: var(--slate-800);
  --sidebar-text: var(--slate-400);
  --sidebar-text-active: var(--white);
  --sidebar-hover: var(--tint-blue-10);
  --sidebar-active-bg: var(--tint-blue-20);
  --sidebar-accent: var(--blue-legacy);
  --sidebar-rule: var(--tint-white-10);

  --pill-active-bg: var(--white);
  --pill-active-text: var(--text-primary);
  --pill-active-shadow: var(--shadow-pill);

  --hero-card-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  --chart-line: var(--navy-800);
  --chart-fill-top: rgba(37, 99, 235, 0.18);
  --chart-fill-bottom: rgba(10, 26, 61, 0);
}

[data-theme="dark"] {
  --surface: var(--slate-900);
  --surface-card: var(--slate-900);
  --surface-page: var(--slate-800);
  --surface-tint: var(--slate-800);
  --surface-sunken: var(--slate-700);

  --text-primary: var(--slate-50);
  --text-secondary: var(--slate-300);
  --text-tertiary: var(--slate-400);

  --border: var(--slate-700);
  --border-strong: var(--slate-600);

  --sidebar-bg: var(--slate-900);

  --pill-active-bg: var(--slate-600);
  --pill-active-text: var(--white);
  --pill-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  --hero-card-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --chart-line: #60a5fa;
  --chart-fill-top: rgba(96, 165, 250, 0.22);
  --chart-fill-bottom: rgba(96, 165, 250, 0);
}