/* YouLoop v3 — design tokens
 * Concept: a loop station / cue deck. Dark room, hardware readouts (mono numerals),
 * one "record red" accent carried over from v2, violet/cyan cue colours for A/B.
 * Layer 1 = primitives, layer 2 = semantic. Components consume layer 2 only. */
@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    color-scheme: dark;

    /* — layer 1: primitives — */
    --ink-950: oklch(13% 0.012 275);
    --ink-900: oklch(17% 0.014 275);
    --ink-850: oklch(21% 0.016 275);
    --ink-800: oklch(26% 0.018 275);
    --ink-700: oklch(32% 0.02 275);
    --ink-600: oklch(42% 0.02 275);
    --ink-400: oklch(62% 0.018 275);
    --ink-300: oklch(74% 0.015 275);
    --ink-100: oklch(94% 0.008 275);

    --red-500: oklch(66% 0.215 25);
    --red-600: oklch(58% 0.205 25);
    --violet-400: oklch(74% 0.16 300);
    --cyan-300: oklch(85% 0.12 200);
    --green-400: oklch(80% 0.16 150);
    --amber-400: oklch(84% 0.15 80);
    --blue-400: oklch(76% 0.11 240);

    /* category hues (same values users know from v2) */
    --cat-rave: #ff3d8c;
    --cat-goa: #a855f7;
    --cat-dnb: #22d3ee;
    --cat-hardcore: #ef4444;
    --cat-hardstyle: #f97316;
    --cat-metal: #a3a3a3;
    --cat-dancefloor: #facc15;
    --cat-others: #10b981;

    /* — layer 2: semantic — */
    --color-bg: var(--ink-950);
    --color-surface: var(--ink-900);
    --color-surface-2: var(--ink-850);
    --color-surface-3: var(--ink-800);
    --color-border: var(--ink-700);
    --color-border-strong: var(--ink-600);
    --color-text: var(--ink-100);
    --color-text-2: var(--ink-300);
    --color-text-3: var(--ink-400);
    --color-accent: var(--red-500);
    --color-accent-strong: var(--red-600);
    --color-on-accent: var(--ink-950);
    --color-accent-soft: color-mix(in oklch, var(--red-500) 16%, transparent);
    --color-accent-line: color-mix(in oklch, var(--red-500) 45%, transparent);
    --color-mark-a: var(--violet-400);
    --color-mark-b: var(--cyan-300);
    --color-ok: var(--green-400);
    --color-warn: var(--amber-400);
    --color-info: var(--blue-400);
    --color-danger: var(--red-500);
    --color-focus: var(--cyan-300);
    --color-stage: oklch(6% 0.01 275);

    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --text-lg: 1.125rem;
    --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-display: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    --shadow-pop: 0 20px 50px oklch(0% 0 0 / 0.55), 0 0 0 1px var(--color-border);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    --tap: 2.75rem; /* 44px minimum touch target */
  }

  /* Category colour mapping, driven by data-category on badges/chips/options. */
  [data-category="Rave"] { --cat: var(--cat-rave); }
  [data-category="Goa/Psy"] { --cat: var(--cat-goa); }
  [data-category="Drum&Bass"] { --cat: var(--cat-dnb); }
  [data-category="Hardcore"] { --cat: var(--cat-hardcore); }
  [data-category="Hardstyle"] { --cat: var(--cat-hardstyle); }
  [data-category="Metal"] { --cat: var(--cat-metal); }
  [data-category="Dancefloor"] { --cat: var(--cat-dancefloor); }
  [data-category="Others"] { --cat: var(--cat-others); }
}