:root {
  /* Primary gradient */
  --c-light: #EDE4F7;
  --c-mid: #C8A0E8;
  --c-deep: #8B4FD1;
  --c-light-ok: oklch(0.92 0.05 300);
  --c-mid-ok: oklch(0.82 0.16 305);
  --c-deep-ok: oklch(0.62 0.24 300);
  --grad-primary: linear-gradient(135deg, var(--c-light) 0%, var(--c-mid) 50%, var(--c-deep) 100%);
  --grad-bar: linear-gradient(90deg, var(--c-light) 0%, var(--c-mid) 50%, var(--c-deep) 100%);

  /* Accents */
  --c-accent: #C79FE0;
  --c-neon: #B87EE8;
  --c-neon-ok: oklch(0.78 0.2 305);
  --c-glow: oklch(0.7 0.24 305);
  --c-dim: #3b2a52;
  --c-live: oklch(0.72 0.2 25);
  --c-ink: #14091f;

  /* Background */
  --bg-top: #1A1224;
  --bg-bottom: #0A0710;
  --bg-top-ok: oklch(0.09 0.03 285);
  --bg-bottom-ok: oklch(0.04 0.01 270);
  --bg-blue-glow: oklch(0.55 0.22 260);
  --panel: rgb(20 12 32 / 0.72);

  /* Type */
  --font-display: "Orbitron", "Arial Black", Impact, sans-serif;
  --font-body: "Rajdhani", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --max-w: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
}

@supports (color: oklch(0 0 0)) {
  :root {
    --c-light: var(--c-light-ok);
    --c-mid: var(--c-mid-ok);
    --c-deep: var(--c-deep-ok);
    --c-neon: var(--c-neon-ok);
    --bg-top: var(--bg-top-ok);
    --bg-bottom: var(--bg-bottom-ok);
  }
}