:root {
  /* ------------------------------------------------------------------
   * Phase E — identity palette.
   *
   * The app is built around an "aurora" metaphor: a cold cyan beam,
   * an electric violet, and a warm amber as the accent for "needs you".
   * Everything else is a tint of those three plus deep space blacks.
   * ------------------------------------------------------------------ */
  --color-bg: #06070f;
  --color-bg-2: #0a0d1a;
  --color-surface: rgba(255, 255, 255, 0.03);
  --color-surface-2: rgba(255, 255, 255, 0.045);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-text: #e9ecf8;
  --color-text-muted: #8d94ab;
  --color-text-dim: #5a6179;

  --color-primary: #22e3ff;
  --color-primary-2: #6b7dff;
  --color-secondary: #ff9d4a;   /* warm amber — used for "attention" */
  --color-accent: #b06bff;      /* violet — used for AI surfaces */
  --color-glass: rgba(14, 18, 32, 0.62);
  --color-glass-strong: rgba(14, 18, 32, 0.82);
  --color-glow: rgba(34, 227, 255, 0.35);
  --color-glow-violet: rgba(176, 107, 255, 0.28);
  --color-glow-amber: rgba(255, 157, 74, 0.28);
  --color-success: #22c55e;
  --color-warning: #f5a524;
  --color-danger: #ef4855;

  /* Aurora gradients used behind the whole app. */
  --aurora-1: radial-gradient(60% 40% at 18% 12%, rgba(34, 227, 255, 0.18), transparent 62%);
  --aurora-2: radial-gradient(55% 42% at 84% 22%, rgba(176, 107, 255, 0.18), transparent 60%);
  --aurora-3: radial-gradient(70% 50% at 50% 110%, rgba(107, 125, 255, 0.16), transparent 64%);
  --aurora-4: radial-gradient(38% 30% at 88% 85%, rgba(255, 157, 74, 0.09), transparent 70%);

  /* ------------------------------------------------------------------
   * Typography — Inter for UI, Space Grotesk for display, JetBrains Mono
   * for numeric / data voice. All three are loaded from Google Fonts in
   * index.html. Display gets slightly tighter tracking to read premium.
   * ------------------------------------------------------------------ */
  --font-family-base: "Inter", system-ui, sans-serif;
  --font-family-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-40: 2.5rem;
  --font-size-48: 3rem;

  /* Spacing scale — 4px base. */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;

  --radius-6: 0.375rem;
  --radius-8: 0.5rem;
  --radius-10: 0.625rem;
  --radius-12: 0.75rem;
  --radius-14: 0.875rem;
  --radius-16: 1rem;
  --radius-20: 1.25rem;
  --radius-24: 1.5rem;

  /* ------------------------------------------------------------------
   * Elevation — four tiers.
   *  - surface: flat (cards resting on the canvas)
   *  - raised:  cards on hover / KPI cards / hero
   *  - floating: the drawer, dropdowns
   *  - overlay: toasts, command palette (max weight)
   * Each tier has a shadow recipe and an optional inner highlight.
   * ------------------------------------------------------------------ */
  --shadow-surface: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                    0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-raised:  0 1px 0 rgba(255, 255, 255, 0.06) inset,
                    0 14px 38px -18px rgba(0, 0, 0, 0.65),
                    0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-floating: 0 1px 0 rgba(255, 255, 255, 0.07) inset,
                     0 32px 80px -30px rgba(0, 0, 0, 0.8),
                     0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-overlay:  0 1px 0 rgba(255, 255, 255, 0.08) inset,
                     0 44px 120px -40px rgba(0, 0, 0, 0.9),
                     0 0 0 1px rgba(255, 255, 255, 0.1);

  /* Back-compat aliases used by existing code. */
  --shadow-sm: var(--shadow-surface);
  --shadow-md: var(--shadow-raised);
  --shadow-lg: var(--shadow-floating);

  --sidebar-width: 248px;
  --sidebar-width-rail: 72px;
  --topbar-height: 64px;
  --signal-rail-width: 320px;

  /* Motion — a single, disciplined vocabulary. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-med: 260ms;
  --dur-slow: 420ms;
}

/* Reduced motion respect. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}