/* ─── Design Tokens ───────────────────────────────────────────────────────── */

:root {
  /* Layout */
  --portal-sidebar-width: 14.5rem;
  --portal-sidebar-collapsed-width: 4.5rem;
  --portal-shell-gap: 0.625rem;

  /* Brand */
  --portal-accent-color: #ff6a1a;
  --portal-muted-color: rgba(226, 232, 240, 0.75);
  --portal-shell-bg: #050506;
  --portal-shell-panel: rgba(15, 15, 17, 0.96);
  --portal-shell-panel-strong: rgba(9, 9, 10, 0.98);
  --portal-shell-border: rgba(255, 255, 255, 0.08);
  --portal-shell-border-strong: rgba(255, 255, 255, 0.12);
  --portal-nav-hover-bg: rgba(255, 255, 255, 0.045);
  --portal-nav-active-bg: rgba(255, 255, 255, 0.075);
  --portal-nav-rail: rgba(255, 122, 50, 0.92);

  /* Typography */
  --portal-font-display: 'Space Grotesk', system-ui, sans-serif;
  --portal-font-body: 'Manrope', system-ui, sans-serif;

  /* Surfaces */
  --portal-surface-gradient: linear-gradient(180deg, #111113, #0f0f11);
  --portal-card-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  --portal-card-border: rgba(255, 255, 255, 0.08);

  /* Flash messages */
  --portal-flash-success-bg: rgba(34, 197, 94, 0.06);
  --portal-flash-success-border: rgba(34, 197, 94, 0.15);
  --portal-flash-success-text: #86efac;
  --portal-flash-error-bg: rgba(239, 68, 68, 0.06);
  --portal-flash-error-border: rgba(239, 68, 68, 0.15);
  --portal-flash-error-text: #fca5a5;

  /* Chart palette (WCAG 3:1+ on #000) */
  --portal-chart-1: #ff7b2a;
  --portal-chart-2: #55d8ff;
  --portal-chart-3: #b0ff6a;
  --portal-chart-4: #c084fc;
  --portal-chart-5: #fbbf24;

  /* Scrollbar */
  --portal-scroll-track: rgba(148, 163, 184, 0.15);
  --portal-scroll-thumb: rgba(113, 113, 113, 0.49);
}