:root {
      /* Brand */
      --cobalt-500: #0047AB;
      --cobalt-600: #003A8C;
      --cobalt-300: #2D7DFF;

      /* Neutrals */
      --bg: #070A12;
      --surface: #0F172A;
      --border: #1F2A44;

      /* Text */
      --text: #E6EDF7;
      --muted: #9AA7BD;
      --on-primary: #FFFFFF;

      /* Accents */
      --cyan: #22D3EE;
      --amber: #F59E0B;
      --red: #EF4444;

      /* UI */
      --radius: 16px;
      --radius-lg: 22px;
      --shadow: 0 10px 30px rgba(0,0,0,0.35);
      --shadow-soft: 0 8px 20px rgba(0,0,0,0.25);

      /* Focus */
      --focus-ring: 0 0 0 3px rgba(45, 125, 255, 0.45);

      /* Tints */
      --bg-alpha-70: rgba(7, 10, 18, 0.7);
      --bg-alpha-90: rgba(7, 10, 18, 0.9);
      --surface-alpha-60: rgba(15, 23, 42, 0.6);
      --surface-alpha-70: rgba(15, 23, 42, 0.7);
      --surface-alpha-75: rgba(15, 23, 42, 0.75);
      --surface-alpha-80: rgba(15, 23, 42, 0.8);
      --surface-alpha-90: rgba(15, 23, 42, 0.9);
      --cobalt-300-25: rgba(45, 125, 255, 0.25);
      --cobalt-300-40: rgba(45, 125, 255, 0.4);
      --cobalt-300-60: rgba(45, 125, 255, 0.6);
      --cobalt-500-28: rgba(0, 71, 171, 0.28);
      --cyan-15: rgba(34, 211, 238, 0.15);
      --cyan-12: rgba(34, 211, 238, 0.12);
      --cyan-40: rgba(34, 211, 238, 0.4);
      --red-12: rgba(239, 68, 68, 0.12);
      --red-50: rgba(239, 68, 68, 0.5);
      --muted-60: rgba(154, 167, 189, 0.6);
    }