:root {
  /* --- Surfaces (layered navy-black, not flat gray) --- */
  --bg-base: #0A0E1A;
  --bg-surface-1: #0F1424;
  --bg-surface-2: #141A2E;
  --bg-surface-3: #1B2238;
  --border-subtle: rgba(148, 163, 184, 0.12);
  --border-glow: rgba(99, 102, 241, 0.35);

  /* --- Brand / semantic colors --- */
  --color-indigo: #6366F1;
  --color-indigo-soft: rgba(99, 102, 241, 0.16);
  --color-amber: #F59E0B;
  --color-amber-soft: rgba(245, 158, 11, 0.16);
  --color-emerald: #10B981;
  --color-emerald-soft: rgba(16, 185, 129, 0.14);
  --color-rose: #F43F5E;
  --color-rose-soft: rgba(244, 63, 94, 0.14);
  --color-blue: #38BDF8;

  /* --- Text --- */
  --text-primary: #E9ECF5;
  --text-secondary: #97A0B8;
  --text-muted: #626B85;

  /* --- Radii / shadows --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
}