/* BeamCue design system v2 — "instrument"
 * Ground: cool ink. Signal: lime. Vocabulary: rulers, playheads, clips, timecodes.
 * Replaces the v1 Coral system in tokens.css. Studio still consumes v1 until its
 * twenty CSS layers are migrated; see design.md "Migration".
 */
:root {
  /* --- ground and structure --- */
  --bg: oklch(15.5% 0.022 265);
  --bg-2: oklch(19.5% 0.021 265);
  --bg-3: oklch(24% 0.02 265);
  --bg-4: oklch(28% 0.019 265);
  /* Adjacent grounds differ by only 1.11:1, so on this palette a hairline is
     the only thing that can express a boundary. At the original 29% / 38%
     these measured 1.30:1 and 1.83:1 against --bg-2 and boundaries vanished.
     --line divides rows inside a panel; --line-2 draws control borders and
     panel edges and clears WCAG 1.4.11's 3:1 for non-text. Do not lower them. */
  --line: oklch(40% 0.018 265);
  --line-2: oklch(52% 0.016 265);

  /* --- text --- */
  --fg: oklch(96% 0.005 250);
  --fg-2: oklch(70% 0.012 258);
  --fg-3: oklch(63% 0.014 260);

  /* --- signal and state ---
   * sig is the ONE signal: playhead, selected clip, primary action, live hotspot.
   * Text on sig is always --bg, never white.
   */
  --sig: oklch(88% 0.19 118);
  --sig-hover: oklch(82% 0.19 118);
  --sig-dim: oklch(88% 0.19 118 / 0.14);
  --data: oklch(74% 0.14 232);
  --warn: oklch(80% 0.15 75);
  --danger: oklch(66% 0.19 22);
  --danger-dim: oklch(66% 0.19 22 / 0.16);

  /* --- type --- */
  --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", "Noto Sans KR Variable", system-ui, sans-serif;
  --font-body: "Manrope Variable", "Manrope", "Noto Sans KR Variable", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, monospace;
  --track-display: -0.045em;
  --track-label: 0.16em;

  /* --- space (4-point) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* --- shape and controls --- */
  --radius-control: 9px;
  --radius-panel: 14px;
  --radius-round: 999px;
  --control-height: 2.75rem;
  --control-height-sm: 2.125rem;
  --control-height-lg: 3.375rem;

  /* --- elevation and motion --- */
  --shadow-sm: 0 0.25rem 0.75rem oklch(6% 0.02 265 / 0.34);
  --shadow-md: 0 1rem 2.5rem oklch(6% 0.02 265 / 0.5);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-short: 140ms;
  --duration-medium: 220ms;

  /* --- timeline primitives ---
   * Shared geometry: Studio's timeline, the player's scrubber, and the
   * marketing pages' page spine all render from these.
   */
  --ruler-tick: var(--line-2);
  --ruler-tick-major: var(--fg-3);
  --ruler-tick-gap: 40px;
  --ruler-tick-major-gap: 200px;
  --clip-bg: var(--bg-4);
  --clip-border: var(--line-2);
  --clip-radius: 8px;
  --clip-bg-selected: var(--sig-dim);
  --clip-border-selected: var(--sig);
  --playhead: var(--sig);
  --playhead-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-short: 0ms;
    --duration-medium: 120ms;
  }
}