/* KOBI Studio Cut tokens, copied from docs/design/kobi-studio-cut/tokens.css. The site is light
   (data-theme="light" on its page); the app mock-ups on it are dark (data-theme="dark"). */
:root, [data-theme="dark"] {
  --bg: #0d0d0f;
  --surface: #151517;
  --surface-2: #1c1c1f;
  --surface-3: #26262a;
  --line: #29292e;
  --line-strong: #6a6a73;
  --ink: #ededef;
  --ink-2: #a6a6ae;
  --ink-3: #85858f;
  --accent: #c8f24b;
  --accent-hover: #d7fa73;
  --accent-soft: #263010;
  --on-accent: #10140a;
  --focus: var(--accent);
  --agent: #ff8f6b;
  --agent-soft: #33201a;
  --success: #52c7ea;
  --warning: #f5b841;
  --danger: #ff6b6b;
  --clip-video: #26508a;
  --clip-image: #1d6470;
  --clip-voice: #2e6e45;
  --clip-audio: #7a5a1c;
  --clip-text: #8a3558;
  --stage: #000000;
  --on-stage: #ffffff;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #f0f0ee;
  --surface-3: #e4e4e0;
  --line: #deded9;
  --line-strong: #8a8a84;
  --ink: #141416;
  --ink-2: #55555c;
  --ink-3: #68686f;
  --accent: #4f6b00;
  --accent-hover: #3f5600;
  --accent-soft: #e8f1cb;
  --on-accent: #ffffff;
  --focus: var(--accent);
  --agent: #b4401c;
  --agent-soft: #fbe6de;
  --success: #0b6e8f;
  --warning: #8a5a00;
  --danger: #c42b2b;
  --clip-video: #bfd3f2;
  --clip-image: #b5dfe3;
  --clip-voice: #c3e5cc;
  --clip-audio: #f0ddb0;
  --clip-text: #f2c6d8;
  --stage: #000000;
  --on-stage: #ffffff;
  --scrim: rgba(20, 20, 22, 0.6);
  --shadow-pop: 0 8px 24px rgba(20, 20, 22, 0.12);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --control-sm: 28px;
  --control-md: 32px;
  --control-lg: 40px;
  --topbar-h: 44px;
  --rail-w: 64px;
  --panel-w: 320px;
  --inspector-w: 300px;
  --track-h: 48px;
  --track-h-audio: 40px;
  --track-head-w: 120px;
  --opacity-disabled: 0.4;
  --font-sans: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
.display { font-family: var(--font-sans); font-size: 32px; line-height: 44px; font-weight: 600; }
.title { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 600; }
.heading { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; }
.micro { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 500; }
.timecode { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; }
.timecode-lg { font-family: var(--font-mono); font-size: 20px; line-height: 28px; font-weight: 500; }