:root {
  /* DEBUG (HEX only - do not use in code) */
  --bg-hex: #06122d;
  --card-hex: #081024;
  --border-hex: #26395c;
  --text-hex: #e5e7eb;
  --muted-hex: #9ca3af;
  --yellow-hex: #f7c600;
  --pink-hex: #ec4899;
  --cream-hex: #fefce8;
  --black-hex: #000000;
  --white-hex: #ffffff;

  /* Core RGB */
  --bg-rgb: 6 18 45;
  --card-rgb: 8 16 36;
  --border-rgb: 38 57 92;
  --text-rgb: 229 231 235;
  --muted-rgb: 156 163 175;
  --yellow-rgb: 247 198 0;
  --pink-rgb: 236 72 153;
  --black-rgb: 0 0 0;
  --white-rgb: 255 255 255;
  --cream-rgb: 254 252 232;

  --gold-deep-rgb: 214 152 32;
  --gold-accent-rgb: 232 178 28;
  --rose-deep-rgb: 201 92 138;

  /* Extra RGB */
  --blue-a-rgb: 120 160 255;
  --blue-b-rgb: 80 120 255;
  --amber-rgb: 253 186 44;
  --road-bg-rgb: 43 45 58;
  --road-dash-rgb: 247 247 247;
  --ink-rgb: 17 17 17;
  --slate-900-rgb: 17 24 39;
  --avatar-a-rgb: 255 233 201;
  --avatar-b-rgb: 251 191 119;

  /* Opaque */
  --bg: rgb(var(--bg-rgb));
  --card: rgb(var(--card-rgb));
  --border: rgb(var(--border-rgb));
  --text: rgb(var(--text-rgb));
  --muted: rgb(var(--muted-rgb));
  --yellow: rgb(var(--yellow-rgb));
  --pink: rgb(var(--pink-rgb));
  --black: rgb(var(--black-rgb));
  --cream: rgb(var(--cream-rgb));
  --ink: rgb(var(--ink-rgb));

  /* Alpha helpers */
  --text-92: rgb(var(--text-rgb) / 0.92);
  --text-86: rgb(var(--text-rgb) / 0.86);
  --text-55: rgb(var(--text-rgb) / 0.55);
  --cream-92: rgb(var(--cream-rgb) / 0.92);

  --white-15: rgb(var(--white-rgb) / 0.15);
  --white-30: rgb(var(--white-rgb) / 0.3);
  --white-60: rgb(var(--white-rgb) / 0.6);

  --yellow-10: rgb(var(--yellow-rgb) / 0.1);
  --yellow-30: rgb(var(--yellow-rgb) / 0.3);
  --yellow-50: rgb(var(--yellow-rgb) / 0.5);

  --pink-15: rgb(var(--pink-rgb) / 0.15);
  --pink-50: rgb(var(--pink-rgb) / 0.5);
  --pink-75: rgb(var(--pink-rgb) / 0.75);

  --blue-a-10: rgb(var(--blue-a-rgb) / 0.1);
  --blue-b-08: rgb(var(--blue-b-rgb) / 0.08);

  --amber-12: rgb(var(--amber-rgb) / 0.12);
  --amber-22: rgb(var(--amber-rgb) / 0.22);

  --black-25: rgb(var(--black-rgb) / 0.25);
  --black-50: rgb(var(--black-rgb) / 0.5);
  --black-65: rgb(var(--black-rgb) / 0.65);
  --black-75: rgb(var(--black-rgb) / 0.75);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 999px;

  /* Surfaces / lines */
  --glass: rgb(var(--white-rgb) / 0.03);
  --line: rgb(148 163 184 / 0.45);
  --line-soft: rgb(148 163 184 / 0.22);
  --nav-bg: rgb(var(--card-rgb) / 0.72);

  /* Shadows */
  --shadow-hero: 0 24px 60px rgb(var(--black-rgb) / 0.8);
  --shadow-card: 0 12px 28px var(--black-65);
  --shadow-hover: 0 18px 32px var(--black-75);
  --shadow-heavy: 0 18px 45px rgb(var(--black-rgb) / 0.85);
  --shadow-nav: 0 18px 45px rgb(var(--black-rgb) / 0.72);
  --shadow-float: 0 14px 40px var(--black-25);
  --shadow-modal: 0 30px 90px var(--black-75);
  --shadow-chip: 0 10px 22px var(--black-50);
  --shadow-chip-strong: 0 10px 25px var(--black-75);
  --shadow-soft: 0 10px 22px rgb(var(--black-rgb) / 0.22);

  /* Accents */
  --accent: var(--yellow);
  --neon-outer: 0 10px 30px var(--pink-15);
}