/* 쇼츠오토 디자인 토큰 정본. 방향: design/redesign-2026-09/ref-v2.html(앱 셸)·editor-v1.html(편집기).
 * theme.css 의 --surface·--accent·--space-* 와 이름이 겹치지 않게 --c-·--fs-·--sp-·--r- 접두를 쓴다.
 * 지금은 스튜디오(studio/)만 이 파일을 쓴다. */
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* 색 — 역할 */
  --c-bg: #0f1213;
  --c-bg-raised: #141819;
  --c-bg-sunken: #0a0c0d;
  --c-panel: #131718;
  --c-panel-raised: #181c1e;
  --c-surface: rgba(255, 255, 255, 0.04);
  --c-surface-hover: rgba(255, 255, 255, 0.07);
  --c-line: rgba(255, 255, 255, 0.08);
  --c-line-strong: rgba(255, 255, 255, 0.14);
  --c-text: #f3f4f4;
  --c-text-soft: #d6d8d9;
  --c-muted: #8f9395;
  --c-dim: #62676a;
  --c-brand-1: #ff3b47;
  --c-brand-2: #ff7a3d;
  --c-brand-3: #ffb547;
  --c-brand-grad: linear-gradient(100deg, var(--c-brand-1), var(--c-brand-2) 55%, var(--c-brand-3));
  --c-brand-wash: rgba(255, 122, 61, 0.12);
  --c-brand-line: rgba(255, 122, 61, 0.6);
  --c-success: #56d68b;
  --c-warning: #e6b45f;
  --c-danger: #ff6b73;
  --c-focus: #ff7a3d;

  /* 타임라인 트랙 색(editor-v1) */
  --c-track-source: rgba(255, 255, 255, 0.1);
  --c-track-subtitle: #8b6cff;
  --c-track-text: #ff9a3d;
  --c-track-comment: #3fc98a;
  --c-playhead: #ffffff;

  /* 타입 — 읽기 최소 12px */
  --font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-hero: 44px;
  --fw-regular: 500;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;
  --lh-tight: 1.2;
  --lh-body: 1.55;
  --ls-tight: -0.03em;

  /* 간격 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* 모서리 */
  --r-sm: 7px;
  --r-btn: 9px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* 크기 */
  --side-w: 200px;
  --control-h: 40px;
  --m-fast: 140ms ease-out;
}