/* Design tokens · AI Video Studio
   Source: Figma 笔试题 (wWJBHJs4d0Ey3YiHD7fgG2). See TOKENS.md for provenance. */

@font-face {
  font-family: "TikTok Sans";
  src: url("../assets/fonts/TikTokSans-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color */
  --color-primary: #fe2c55;
  --color-on-primary: #fff;
  --color-teal-strong: #009691;
  --color-teal-soft: #d2f0f0;
  --color-teal-track: #edfafa;
  --color-progress: linear-gradient(187.6deg, #47edf3 56.9%, #00c8ff 94.5%);
  --color-avatar: #8512a7; /* Avatar component only; deliberately not part of the token set */
  --playhead: var(--color-teal-strong);

  --text-1: #000;
  --text-2: rgba(0, 0, 0, .48);
  --text-3: rgba(0, 0, 0, .34);
  --text-65: rgba(0, 0, 0, .65); /* Figma "Text/2" default; used by chips and the banner copy */
  --scrim: rgba(0, 0, 0, .65);
  --fill-1: rgba(0, 0, 0, .05);
  --fill-2: rgba(0, 0, 0, .03);
  --border-1: rgba(0, 0, 0, .12);
  --surface: #fff;
  --page-bg: #f5f5f5;
  --frame-a: #d9d9d9;
  --frame-b: #b3b3b3;

  /* radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-input: 16px;
  --radius-pill: 41px;
  --radius-capsule: 999px;

  /* layout */
  --header-h: 54px;
  --sidebar-w: 46px;
  --chat-w: 432px;
  --preview-w: 938px;
  --panel-gap: 8px;
  --panel-header-h: 51.5px;
  --control-h-s: 32px;

  /* shadow */
  --shadow-menu: 0 24px 60px rgba(0, 0, 0, .16);

  /* motion (inferred, not in Figma) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* type */
  --font: "TikTok Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

/* type styles (size / weight / line-height / tracking) */
.t-20    { font: 400 20px/28px var(--font); }
.t-15sb  { font: 600 15px/1.5 var(--font);  letter-spacing: -.3px; }
.t-13sb  { font: 600 13px/1.5 var(--font);  letter-spacing: -.13px; }
.t-13r   { font: 400 13px/18px var(--font); letter-spacing: .13px; }
.t-11m   { font: 500 11px/16px var(--font); letter-spacing: .11px; }
.t-11r   { font: 400 11px/16px var(--font); letter-spacing: .11px; }
.t-14sb  { font: 600 14px/1.3 var(--font); }
.t-10sb  { font: 600 10px/1.5 var(--font);  letter-spacing: -.4px; }