/* Gugames design tokens. Everything visual reads from these; components live in ds.css.
   Load order: app.css → tokens.css → ds.css (tokens also remap app.css's legacy variables). */

:root {
  /* ---- palette (raw) ---- */
  --ink-950: #08080f;
  --ink-900: #0d0d17;
  --ink-850: #12121f;
  --ink-800: #181828;
  --ink-750: #1f1f33;
  --ink-700: #29293f;
  --ink-600: #3a3a55;
  --ink-400: #74748f;
  --ink-300: #a2a2bd;
  --ink-100: #e6e6f2;
  --ink-50: #f6f6fb;
  --violet-500: #7b61ff;
  --violet-400: #9a86ff;
  --violet-300: #c1b5ff;
  --pink-500: #ff4f8b;
  --lime-400: #c6f432;
  --green-400: #33d98f;
  --amber-400: #ffb547;
  --red-500: #ff4d5e;
  --cyan-400: #3ad6f0;

  /* ---- semantic color ---- */
  --c-bg: var(--ink-900);
  --c-bg-sunken: var(--ink-950);
  --c-surface: var(--ink-850);
  --c-surface-2: var(--ink-800);
  --c-surface-3: var(--ink-750);
  --c-hover: var(--ink-700);
  --c-line: rgba(255, 255, 255, .07);
  --c-line-strong: rgba(255, 255, 255, .13);
  --c-text: var(--ink-50);
  --c-text-2: var(--ink-300);
  --c-text-3: var(--ink-400);
  --c-primary: var(--violet-500);
  --c-primary-hover: var(--violet-400);
  --c-on-primary: #fff;
  --c-accent: var(--pink-500);
  --c-play: var(--lime-400);         /* the one "go play" colour: play buttons only */
  --c-on-play: #0d0d17;
  --c-success: var(--green-400);
  --c-warning: var(--amber-400);
  --c-danger: var(--red-500);
  --c-info: var(--cyan-400);
  --c-rec: #ff3b4e;
  --c-scrim: rgba(8, 8, 15, .72);
  --c-focus: var(--violet-300);
  --grad-brand: linear-gradient(135deg, #7b61ff 0%, #b05cff 45%, #ff4f8b 100%);
  --grad-surface: linear-gradient(160deg, rgba(123, 97, 255, .16), rgba(255, 79, 139, .06) 60%, transparent);

  /* ---- type ---- */
  --font-ui: Onest, Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Unbounded, Onest, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: clamp(26px, 2.6vw, 32px);
  --fs-4xl: clamp(30px, 3.6vw, 46px);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* ---- space (4pt) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---- shape ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- elevation ---- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 8px 24px -8px rgba(0, 0, 0, .6);
  --sh-3: 0 24px 60px -12px rgba(0, 0, 0, .7);
  --sh-glow: 0 10px 30px -10px rgba(123, 97, 255, .75);
  --sh-play: 0 10px 30px -10px rgba(198, 244, 50, .55);

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;

  /* ---- layout ---- */
  --top: 64px;
  --gutter: clamp(16px, 3vw, 32px);
  --page-max: 1520px;
  --z-top: 50; --z-pop: 60; --z-modal: 90; --z-toast: 100;

  /* ---- legacy names used by app.css, remapped ---- */
  --bg: var(--c-bg);
  --bg-2: var(--c-surface);
  --card: var(--c-surface-2);
  --card-2: var(--c-surface-3);
  --line: var(--c-line-strong);
  --text: var(--c-text);
  --muted: var(--c-text-2);
  --dim: var(--c-text-3);
  --accent: var(--c-primary);
  --accent-2: var(--c-accent);
  --ok: var(--c-success);
  --rec: var(--c-rec);
  --grad: var(--grad-brand);
  --radius: var(--r-md);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}