/* tokens.css — lifted verbatim from docs/design/rebuild-2026-09-17/mock-shared.css
 * (:root + prefers-color-scheme dark). Dark follows system only; no toggle.
 */
:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #1f2328;
  --card: #f4f6f9;              /* cool light grey: the strip field, the top and bottom strips */
  --card-foreground: #1f2328;
  --muted: #e8ecf2;             /* hover fills, the player ground */
  --muted-foreground: #59616b;
  --track: #d9e0e8;             /* the duration bar under the silhouette */
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --primary-hover: #1d4ed8;
  --primary-soft: rgb(37 99 235 / .30);   /* the selected fragment, the progress body */
  --scrim: rgb(255 255 255 / .55);        /* the bar outside the fragment */
  --wave-ink: rgb(89 97 107 / .35);       /* the loudness silhouette */
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;
  --border: #dfe3e8;
  --ring: var(--primary);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --text-base: 14px;
  --text-lg: 16px;
  --text-name: 15px;
  --text-count: 15px;
  --text-sm: 12px;
  --text-time: 12px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --strip-top: 48px;
  --strip-bottom: 60px;
  --strip-h: 96px;              /* the console band */
  --rail: 40px;                 /* the state glyph column */
  --bar-h: 32px;                /* the duration track */
  --label-h: 20px;              /* the time readouts above the handles, and their edit fields */
  --time-w: 52px;               /* an mm:ss field */
  --handle-w: 8px;
  --handle-h: 24px;
  --handle-hit: 24px;
  --pinch: calc(var(--handle-w) + var(--space-2) / 2);  /* half the minimum gap between handles */
  --front-w: 3px;               /* the progress front */
  --control-h: 28px;
  --control-inset: 3px;
  --btn-h: 36px;
  --act-w: 120px;               /* the action column, so every strip's settings share one edge */
  --player-h: 44px;
  --drop-h: 64px;
  --field-w: 40px;
  --icon: 24px;
  --icon-glyph: 14px;
  --mark: 20px;
  --mark-radius: 5px;
  --check: 16px;
  --ring-width: 2px;
  --slide-in: 24px;             /* the player entering from the left */
  --duration-fast: 120ms;       /* fills, chips, hovers */
  --duration-swap: 240ms;       /* bar out, player in */
  --duration-max: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --target-min: 44px;
  --shadow: 0 6px 18px -8px rgb(31 35 40 / .30);
  --shadow-raised: 0 1px 2px rgb(31 35 40 / .12);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #14171b; --foreground: #e6e9ee; --card: #1c2027; --card-foreground: #e6e9ee;
    --muted: #262b33; --muted-foreground: #9aa3ae; --track: #2f353e; --border: #333a44;
    --primary: #60a5fa; --primary-foreground: #0a1b33; --primary-hover: #93c5fd;
    --primary-soft: rgb(96 165 250 / .32);
    --scrim: rgb(20 23 27 / .55);
    --wave-ink: rgb(154 163 174 / .35);
    --destructive: #f87171; --destructive-foreground: #2a0b0b;
    --shadow: 0 6px 18px -8px rgb(0 0 0 / .65);
    --shadow-raised: 0 1px 2px rgb(0 0 0 / .5);
  }
}
/* @pair --foreground on --background */
/* @pair --foreground on --card */
/* @pair --foreground on --track */
/* @pair --foreground on --muted */
/* @pair --muted-foreground on --background */
/* @pair --muted-foreground on --card */
/* @pair --primary-foreground on --primary */
/* @pair --primary on --background */
/* @pair --primary on --card */
/* @pair --destructive on --card */

/* One frame at a time (owner rule 10.09): every focusable control draws its ring ON the border,
   never outside it; nothing falls back to the browser ring. Product rules may override. */
:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: var(--outline-width, 2px) solid var(--ring, currentColor);
  outline-offset: calc(-1 * var(--border-width, 1px));
}
:where(input, select, textarea)[aria-invalid='true']:focus-visible {
  outline-color: var(--destructive, currentColor);
}