/* omm deck — design tokens
 * 2026-10-28 "종이 위 스펙시트" 테마.
 * 따뜻한 종이 배경 + 잉크 글자 + amber 하나. 흰 카드에 1px 선, 그림자 없음, 모서리 2~4px.
 * 터미널만 검은 패널(종이 위에 끼운 느낌, 8px 하드 오프셋 그림자).
 * 색을 새로 만들지 말 것. 다른 CSS 파일은 여기 토큰만 쓴다.
 */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-wdth-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-display: block;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}

:root {
  /* ── color: 종이(bg) · 잉크(fg) · 선 · amber 하나 ── */
  --bg-0: #f4f1ea;            /* 종이: 무대 바탕 */
  --bg-1: #ede9e0;
  --bg-2: #e6e1d6;
  --bg-3: #dcd6c8;            /* 가장 진한 종이: 터미널 오프셋 그림자 */
  --fg-0: #17140f;            /* 잉크: 본문 최상위 */
  --fg-1: #4a443b;            /* 보조 문장 */
  --fg-2: #6b6459;            /* 라벨, HUD */
  --fg-3: #a39b8d;            /* 비활성, 점선 틀 */
  --line-0: #e3ded2;          /* 표 가로선 */
  --line-1: #d9d3c5;          /* 카드·패널 테두리 */
  --line-2: rgba(23, 20, 15, 0.08);   /* 안내선 */
  --spot-dim: rgba(23, 20, 15, 0.28);  /* 스포트라이트 바깥을 어둡게 (잉크 28%) */

  --accent: #b36b00;          /* 글자용 amber (종이 위 대비 확보) */
  --accent-fill: #e89a00;     /* 칠할 때 amber (막대, 형광펜, 커튼, 진행 바) */
  --accent-press: #a06000;
  --accent-ink: #17140f;      /* amber 위에 올리는 글자색 */
  --accent-line: rgba(232, 154, 0, 0.5);
  --accent-wash: rgba(232, 154, 0, 0.12);

  /* 흰 패널: 카드, 표, 구조도 노드, 발표자 노트 */
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-strong: rgba(255, 255, 255, 0.96);
  --vignette: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(23, 20, 15, 0.07) 100%);

  /* 터미널: 종이 위에 끼운 검은 패널 */
  --term-bg: #17140f;
  --term-bar: #221e17;
  --term-line: #3a342b;
  --term-fg: #c9c2b4;
  --term-cmd: #f4f1ea;
  --term-dim: #7d7466;
  --term-shadow: 8px 8px 0 var(--bg-3);
  --term-ok: #2f9e62;
  --term-err: #c8463a;
  --term-warn: #e89a00;

  /* ── type ── */
  --font-display: "Archivo", "Pretendard", system-ui, sans-serif;  /* 영문 대형 제목 */
  --font-sans: "Pretendard", "Archivo", system-ui, sans-serif;     /* 한글 본문·제목 */
  --font-mono: "JetBrains Mono", "Pretendard", ui-monospace, monospace;

  /* 무대 기준 px (1920×1080). 화면 크기와 무관하게 무대 전체가 스케일된다. */
  --t-mega: 280px;     /* 표지 워드마크, 숫자 한 개 */
  --t-hero: 148px;     /* statement 한 문장 */
  --t-h1: 96px;
  --t-h2: 64px;
  --t-h3: 44px;
  --t-body: 34px;      /* 프로젝터 뒷줄 가독 하한 ≈ 30px */
  --t-small: 26px;
  --t-label: 20px;     /* mono 라벨·HUD. 이보다 작게 쓰지 말 것 */

  --lh-tight: 1.02;
  --lh-head: 1.14;
  --lh-body: 1.5;
  --track-display: -0.035em;
  --track-label: 0.08em;

  /* ── space (8의 배수) ── */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 104px;
  --s-7: 168px;
  --gutter: 136px;     /* 무대 좌우 여백 */
  --safe-top: 120px;   /* HUD 아래 */

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  /* ── motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo-out: 등장 기본 */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);         /* expo-in: 퇴장 */
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);     /* 커튼·카메라 */
  --ease-micro: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 160ms;
  --dur-out: 520ms;      /* 이전 장면이 빠지는 시간 */
  --dur-in: 1100ms;      /* 새 장면 요소 하나가 들어오는 시간 */
  --stagger: 70ms;
}