/**
 * Design tokens — single source of truth for color, spacing, radius,
 * typography, motion, sizing, focus.
 *
 * Token philosophy:
 *   - Semantic, not literal. `--accent` not `--blue-500`.
 *   - Only ship tokens with ≥2 consumers today. Speculative tokens
 *     create dead surface area; lint catches abstraction inflation.
 *   - Components consume from here. `inputs.css`, `buttons.css`,
 *     `transportbar.css`, etc. should reference `var(--…)` and
 *     introduce zero new magic numbers.
 */

:root {
    /* ──────────────────────────────────────────────────────────
       SURFACES — recessed-to-raised dark ladder
       ────────────────────────────────────────────────────────── */
    /* @justified: collapses 8+ ad-hoc rgba(0,0,0,X) and #1a1a1a/#1e1e1e/#2a2a2a literals */
    --surface-0: #000;                        /* page */
    --surface-1: rgba(20, 20, 20, 0.65);      /* toolbar shell (kept for blur compat) */
    --surface-2: rgba(0, 0, 0, 0.3);          /* recessed value-display, control group */
    --surface-3: rgba(0, 0, 0, 0.4);          /* input/select bg */
    --glass-surface: var(--surface-1);         /* shared blurred chrome behind live visuals */
    --glass-blur: 12px;                        /* matches the top-bar glass the editor/lane chrome reuses */

    /* ──────────────────────────────────────────────────────────
       TEXT LADDER
       ────────────────────────────────────────────────────────── */
    /* @justified: replaces 8+ rgba(255,255,255,0.X) text-color variants */
    --text-1: rgba(255, 255, 255, 0.92);      /* primary */
    --text-2: rgba(255, 255, 255, 0.7);       /* secondary */
    --text-3: rgba(255, 255, 255, 0.4);       /* muted (labels, hints) */

    /* ──────────────────────────────────────────────────────────
       BORDERS
       ────────────────────────────────────────────────────────── */
    /* @justified: replaces 6+ rgba(255,255,255,0.0X) border variants */
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);

    /* ──────────────────────────────────────────────────────────
       ACCENT (brand blue)
       ────────────────────────────────────────────────────────── */
    /* @justified: replaces 8 distinct blues — #1a73e8, #2b7de9, #3891ff,
       #4285f4, #4da3ff, #5396ff, #6eb0ff, rgb(56,145,255) — all meaning "the brand color" */
    --accent: #3891ff;
    --accent-hover: #4da3ff;
    --accent-bg-soft: rgba(56, 145, 255, 0.2); /* "this toggle is on" treatment */
    --accent-glow: 0 0 12px rgba(56, 145, 255, 0.4);

    /* ──────────────────────────────────────────────────────────
       STATUS — wait/loop warning
       ────────────────────────────────────────────────────────── */
    /* @justified: collapses #ff8c00, #ffa500, #ff6600, rgb(255,171,64) variants */
    --status-warn: rgb(255, 171, 64);
    --status-warn-bg-soft: rgba(255, 171, 64, 0.2);

    /* ──────────────────────────────────────────────────────────
       SPACING SCALE (4px base)
       ────────────────────────────────────────────────────────── */
    /* @justified: replaces ad-hoc 2/4/6/8/12/16/20/22 px values */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* ──────────────────────────────────────────────────────────
       RADIUS
       ────────────────────────────────────────────────────────── */
    /* @justified: 4/6/8/999 radii used 30+ times across components */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    /* ──────────────────────────────────────────────────────────
       TYPOGRAPHY
       ────────────────────────────────────────────────────────── */
    /* @justified: 10/11/12/14 px sizes used 20+ times across components */
    --font-xs: 10px;
    --font-sm: 11px;
    --font-md: 12px;
    --font-lg: 14px;
    --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    --font-system: system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ──────────────────────────────────────────────────────────
       CONTROL SIZING — two tiers, deliberately not unified
       ────────────────────────────────────────────────────────── */
    /* @justified: topbar buttons are 40px (touch-friendly), MIDI editor toolbar
       buttons are 32px (denser editor surface). Cohesion comes from primitive
       identity (same shape, hover, focus, color), not identical pixel size —
       same convention as Logic / Ableton. */
    --control-h-md: 32px;
    --control-h-lg: 40px;
    --control-h-sm: 24px; /* loop quick-buttons, pitch +/-, tempo +/- */

    /* ──────────────────────────────────────────────────────────
       MOTION
       ────────────────────────────────────────────────────────── */
    /* @justified: 0.15s/0.2s/0.3s ease repeated 30+ times */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --lift-1: -1px; /* translateY hover lift; tokenized to allow :prefers-reduced-motion override */

    /* ──────────────────────────────────────────────────────────
       FOCUS — was missing entirely; net accessibility win
       ────────────────────────────────────────────────────────── */
    /* @justified: every interactive primitive needs a visible focus ring */
    --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent);

    /* ──────────────────────────────────────────────────────────
       SLIDER WIDTH (parent groups override per-toolbar)
       ────────────────────────────────────────────────────────── */
    /* @justified: removes inline style="width:60px"/style="width:120px" from JS templates */
    --range-width: 100%;

    /* ──────────────────────────────────────────────────────────
       LEGACY ALIASES — let inputs.css's ui-* names keep resolving
       without rewriting Gemini's diff. Future components should
       reference the canonical tokens above, not these.
       ────────────────────────────────────────────────────────── */
    --ui-input-bg: var(--surface-3);
    --ui-input-border: var(--border-default);
    --ui-input-border-hover: var(--border-strong);
    --ui-input-text: #fff;
    --ui-slider-track-bg: rgba(255, 255, 255, 0.15);
    --ui-slider-track-height: 4px;
    --ui-slider-thumb-size: 12px;
    --ui-slider-thumb-bg: #fff;
    --ui-slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --ui-accent-color: var(--accent);
}

/* ────────────────────────────────────────────────────────────
   REDUCED MOTION — respect OS-level "reduce motion" preference.
   Slows or removes hover lifts, scales, and pulse animations.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --lift-1: 0;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}