/* VANTAR Datum — 디자인 시스템 정본 (tokens)
 *
 * 이름은 Tailwind 4 @theme 이름공간이다(--color-* --font-* --text-* --spacing-* --radius-* --shadow-* --ease-*,
 * 그리고 Tailwind 4 가 아는 --tracking-* --leading-* --container-*). 정적 페이지라 브라우저가 @theme 를 모르므로
 * :root 에 둔다 — 서비스로 승급할 때 이 블록을 globals.css 의 @theme 로 그대로 옮긴다.
 * style.css 는 여기 있는 var() 만 쓴다. 새 색이 필요하면 여기 먼저 더하고 DESIGN.md 대비표를 다시 잰다.
 */
:root {
  /* ── 색: 바탕 ─────────────────────────────────────────────
   * 흑연(graphite)이 페이지, 카본(carbon)이 판·표머리·꼬리. 순검정이 아닌 이유: luma-ritual(#1d0a10)과
   * OKLab ΔE 0.083 을 벌리고, "사진 뒤 검은 무대" 라는 이 카테고리의 기본값에서 한 단 떨어지려고. */
  --color-bg: #1a2228;
  --color-surface: #11171b;
  --color-surface-raised: #232d34;

  /* ── 색: 글자·선 ──────────────────────────────────────────
   * ink 본문 · mute 보조 본문(4.5 통과) · faint 큰 글자·눈금만(3 통과, 본문 금지) · line 괘선·치수선 바탕(글자 금지) */
  --color-ink: #e8ecef;
  --color-mute: #9aa5ad;
  --color-faint: #75818a;
  --color-line: #3a4751;

  /* ── 색: 강조 — 계기판 바늘 하나 ─────────────────────────
   * 한 화면에 신호 주황이 차지하는 면적은 CTA 한 개 + 활성 표시(바늘·선택 테두리)뿐. 면 채우기 금지. */
  --color-signal: #ff6a2b;
  --color-on-signal: #11171b;

  /* ── 색: 외장색 6 (구성 페이지의 자리표시자 바탕만 바꾼다 — 글자를 직접 얹지 않는다) ── */
  --color-paint-signal: #d4541f; /* VT-01 Signal */
  --color-paint-halide: #9ba4ab; /* VT-02 Halide */
  --color-paint-salt: #dfe3e5; /* VT-03 Salt */
  --color-paint-basalt: #0e1114; /* VT-04 Basalt */
  --color-paint-fjord: #1d3f55; /* VT-05 Fjord */
  --color-paint-lichen: #58624f; /* VT-06 Lichen */

  /* ── 색: 실내 소재 3 (소재 칩 · 실내 판 색조) ── */
  --color-trim-slate: #4a5258; /* wool-blend */
  --color-trim-umber: #5b3b2b; /* recycled nappa */
  --color-trim-chalk: #cdc9c1; /* microsuede */

  /* ── 서체 ─────────────────────────────────────────────────
   * display = 숫자·모델명·라벨(모노, tabular 기본) · body = 문장. 서가: /_shared/fonts/jetbrains-mono · /_shared/fonts/manrope */
  --font-display: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-display);

  /* ── 글자 크기 (유동 — 390 에서 최소, 1440 에서 최대 근처) ─────── */
  --text-label: 0.75rem; /* 12px 모노 대문자 라벨 — 이보다 작게 쓰지 않는다 */
  --text-label--line-height: 1.35;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.55;
  --text-base: 1rem;
  --text-base--line-height: 1.65;
  --text-lead: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  --text-lead--line-height: 1.55;
  --text-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --text-h3--line-height: 1.2;
  --text-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --text-h2--line-height: 1.05;
  --text-stat: clamp(1.75rem, 0.75rem + 3.9vw, 4.25rem); /* 수치 — 390=28px · 1440=68px */
  --text-stat--line-height: 1;
  --text-display: clamp(2.75rem, 1rem + 6.2vw, 6.5rem); /* 모델명 DATUM — 390=44px · 1440=104px */
  --text-display--line-height: 0.9;
  --text-giant: clamp(3.25rem, 0.5rem + 9.5vw, 9.5rem); /* 가격·막 번호 — 390=52px · 1440≈145px · 페이지당 한 종류 */
  --text-giant--line-height: 0.88;

  /* ── 자간·행간 ── */
  --tracking-label: 0.14em; /* 모노 대문자 라벨 */
  --tracking-display: -0.04em; /* 큰 모노 — 글자 사이 구멍을 줄인다 */
  --tracking-body: -0.005em;
  --leading-tight: 0.9;
  --leading-body: 1.65;

  /* ── 간격 (4px 척도 + 이름 붙은 리듬) ── */
  --spacing: 0.25rem; /* Tailwind 4 기본 단위 — calc(var(--spacing) * n) */
  --spacing-tick: 0.5rem; /* 눈금 길이 */
  --spacing-bezel: 0.375rem; /* 이중 베젤: 바깥 쟁반과 안쪽 판 사이 */
  --spacing-gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem); /* 좌우 여백 · 격자 간격 */
  --spacing-block: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); /* 블록 안 묶음 사이 */
  --spacing-section: clamp(5rem, 2.5rem + 8vw, 11rem); /* 섹션 사이 — 렌즈의 거대 여백 */
  --spacing-bar: 3.5rem; /* 맨 위 눈금 자 머리의 높이 · 요약 띠 */

  /* ── 폭 ── */
  --container-page: 90rem; /* 1440 */
  --container-text: 36rem; /* 본문 한 줄 ≈ 62자 */
  --container-quote: 52rem;

  /* ── 모서리 — 판은 각지고, 쟁반·섬·스와치만 둥글다 ── */
  --radius-none: 0;
  --radius-hair: 0.25rem; /* 칩·라벨 받침 */
  --radius-tray: 1.5rem; /* 이중 베젤 바깥 쟁반 */
  --radius-plate: calc(1.5rem - 0.375rem); /* 안쪽 판 = 쟁반 − 베젤 (동심) */
  --radius-pill: 999px; /* 스와치 점 전용 — 버튼·머리는 둥글림 0 */

  /* ── 그림자 — 넓고 옅게. 진한 드롭섀도 금지 ── */
  --shadow-tray: 0 2.5rem 5rem -2.5rem rgb(4 7 9 / 0.55);
  --shadow-inset-hi: inset 0 1px 0 rgb(232 236 239 / 0.07);
  --shadow-island: 0 1rem 2.5rem -1rem rgb(4 7 9 / 0.6);

  /* ── 이징 ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 등장·응답 — 기본 */
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1); /* 렌즈의 "질량 있는" 곡선 — 섬 내비·바늘 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 화면 위에서 A→B 로 옮길 때만(바늘·선택 테두리) */

  /* ── 길이 (Tailwind 4 이름공간 밖 — 승급 때 :root 에 남긴다) ── */
  --duration-press: 120ms;
  --duration-swap: 320ms;
  --duration-reveal: 700ms;
  --duration-draw: 900ms;
  --duration-tick: 1100ms;
}