/* Colors — UI UX Pro Max
   A deep-space navy canvas lit by ambient blue + warm-orange glows.
   Electric blue is the primary action; warm orange is the signature accent.
   Hero text rides a blue -> pink -> orange gradient. */

:root {
  /* ---- Navy canvas & surfaces (dark) ---- */
  --navy-950: #080b14; /* deepest void / page underlay */
  --navy-900: #0b0f1c; /* page base background */
  --navy-880: #0d121f;
  --navy-850: #0f1525; /* raised panel */
  --navy-800: #141b2e; /* card / surface */
  --navy-750: #1a2236; /* surface hover */
  --navy-700: #232c44; /* strong border / divider-2 */
  --navy-650: #2a3450;
  --navy-600: #313c5b; /* outline on dark */

  /* ---- Brand blue (primary action) ---- */
  --blue-200: #c9dbff;
  --blue-300: #9cc0ff;
  --blue-400: #7aa6f7;
  --blue-500: #5188f2; /* PRIMARY */
  --blue-600: #3b6fd6;
  --blue-700: #2c56ae;
  --blue-900: #16244a; /* tinted fill on dark */

  /* ---- Brand orange (accent / terminal prompt) ---- */
  --orange-300: #f6b98a;
  --orange-400: #f59e6b;
  --orange-500: #ec7b3c; /* ACCENT */
  --orange-600: #d9652a;
  --orange-900: #3a2113; /* tinted fill on dark */

  /* ---- Pink (hero gradient mid-stop) ---- */
  --pink-400: #d58fb0;
  --pink-500: #c878a0;

  /* ---- Neutral text on dark ---- */
  --white: #f8fafc;
  --slate-100: #e4e9f2;
  --slate-200: #c7d0e0;
  --slate-300: #aab4c8;
  --slate-400: #94a3b8; /* body */
  --slate-500: #6b7689; /* muted / labels */
  --slate-600: #4a5468; /* faint / placeholder */

  /* ---- Semantic ---- */
  --success-500: #3dd68c;
  --success-900: #103527;
  --warning-500: #f5b945;
  --warning-900: #3a2d10;
  --danger-500: #f2585b;
  --danger-900: #3a1518;
  --info-500: #5188f2;
  --info-900: #16244a;

  /* ---- Alpha helpers (for glass borders / overlays) ---- */
  --white-04: rgba(248, 250, 252, 0.04);
  --white-06: rgba(248, 250, 252, 0.06);
  --white-08: rgba(248, 250, 252, 0.08);
  --white-12: rgba(248, 250, 252, 0.12);
  --white-16: rgba(248, 250, 252, 0.16);
  --black-40: rgba(5, 7, 12, 0.40);
  --black-60: rgba(5, 7, 12, 0.60);

  /* ---- Semantic aliases (use these in components) ---- */
  --bg-page: var(--navy-900);
  --bg-sunken: var(--navy-950);
  --surface-card: var(--navy-800);
  --surface-raised: var(--navy-850);
  --surface-hover: var(--navy-750);
  --surface-terminal: #0a0f1c;

  --border-subtle: var(--white-08);
  --border-default: var(--white-12);
  --border-strong: var(--navy-700);
  --border-focus: var(--blue-500);

  --text-strong: var(--white);
  --text-body: var(--slate-400);
  --text-muted: var(--slate-500);
  --text-faint: var(--slate-600);
  --text-on-primary: var(--white);

  --accent-primary: var(--blue-500);
  --accent-primary-hover: var(--blue-400);
  --accent-secondary: var(--orange-500);
  --accent-secondary-hover: var(--orange-400);

  color-scheme: dark;
}