/* ───────────────────────────────────────────────
   Frame.io Feedback AI 디자인 토큰
   모든 화면을 시사실(어두운 무채색) 한 공간으로 쓴다 — 영상과 썸네일의 색 판단을 방해하지 않도록.
   밝은 작업실 토큰은 남겨 두지만 지금은 쓰지 않는다.
   빨강(--rec)은 '녹화 중' 신호 하나에만 쓴다 — 로고의 점, 검수 시작(녹화) 버튼, 검수 중 표시.
   그 밖의 강조는 무채색의 굵기·크기·모양으로 한다.
   ─────────────────────────────────────────────── */

@font-face {
  font-family: "SUIT Variable";
  src: url("/assets/fonts/SUIT-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Variable";
  src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+20A9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 원색 */
  --paper: #e7e8ea;
  --paper-hi: #f3f3f4;
  --paper-lo: #dadbde;
  --ink: #000000;
  --ink-2: #393b40;
  --ink-3: #5f6268;
  --ink-4: #8a8d93;
  --rule: #c2c4c9;
  --rule-2: #a3a6ac;

  --room: #1b1c1f;
  --room-hi: #242529;
  --room-lo: #131416;
  --well: #000000;
  --light: #eff0f2;
  --light-2: #b8bbc1;
  --light-3: #8b8e95;
  --light-4: #6b6e75;
  --room-rule: #2f3136;
  --room-rule-2: #45484e;

  /* 녹화등 — 유일한 색 */
  --rec: #ec2a20;
  --rec-on-dark: #ff4036;

  /* 의미 토큰 (작업실 기본) */
  --bg: var(--paper);
  --bg-hi: var(--paper-hi);
  --bg-lo: var(--paper-lo);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --line: var(--rule);
  --line-2: var(--rule-2);
  --mon: var(--well);
  --inverse-bg: var(--ink);
  --inverse-fg: var(--paper-hi);

  /* 서체 */
  --sans: "SUIT Variable", "SUIT", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --num: "Archivo Variable", "SUIT Variable", system-ui, sans-serif;

  /* 글자 크기 */
  --fs-hero: clamp(30px, 3.4vw, 52px);
  --fs-h1: clamp(28px, 2.7vw, 42px);
  --fs-h2: clamp(21px, 1.7vw, 26px);
  --fs-h3: 17px;
  --fs-body: 15.5px;
  --fs-small: 13.5px;
  --fs-micro: 12px;

  /* 간격 */
  --gutter: clamp(16px, 3.2vw, 48px);
  --rail: clamp(16px, 5.4vw, 88px);

  /* 움직임 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.2, 1.5, 0.35, 1);
  --t-fast: 140ms;
  --t-med: 280ms;
  --t-slow: 560ms;

  /* 줄무늬(제브라) — 주의가 필요한 영역 */
  --hatch: repeating-linear-gradient(-45deg, currentColor 0 1.5px, transparent 1.5px 7px);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: var(--room);
  --bg-hi: var(--room-hi);
  --bg-lo: var(--room-lo);
  --fg: var(--light);
  --fg-2: var(--light-2);
  --fg-3: var(--light-3);
  --fg-4: var(--light-4);
  --line: var(--room-rule);
  --line-2: var(--room-rule-2);
  --inverse-bg: var(--light);
  --inverse-fg: var(--room-lo);
  --rec: var(--rec-on-dark);
  color-scheme: dark;
}