/* atrium — 디자인 토큰 정본 (3단계 designer, 2026-10-11)
 * 이름은 Tailwind 4 @theme 이름공간, 선언은 :root (브라우저는 @theme 블록을 읽지 않는다 — lessons #73).
 * 3D 장면의 색도 여기서 읽는다(main.js 가 getComputedStyle 로 --color-* 를 가져가 three Color 로 쓴다) — 셰이더·재질에 raw hex 를 따로 두지 않는다.
 */
:root {
  /* 색 — 한낮의 차가운 콘크리트. 강조(마젠타)는 장면 3 Prism 의 빛 줄기 하나에만 */
  --color-bg: #d6d8d7;          /* 바탕 · 3D 안개·하늘 · 정지 카탈로그 바탕 */
  --color-ink: #121518;         /* 글자 · 버튼 · 평면도 선 */
  --color-mute: #464b50;        /* 보조 글자 — 단색 면(bg·sun·paper) 위에서만, 캔버스 위 금지 */
  --color-sun: #efefeb;         /* 햇빛 받은 회반죽 · 입장권 몸통 · 오쿨루스 하늘 */
  --color-paper: #c9cccb;       /* 정적 블록의 두 번째 면 · 자리표시자 바탕 · 표 줄무늬 */
  --color-shade: #9ea3a5;       /* 그늘진 콘크리트 · 1px 선 · 절취선 — 장식만, 글자 금지 */
  --color-deep: #3b4044;        /* 렌더의 가장 깊은 그늘(대비 최악값 기준) · 계단 현무암 */
  --color-accent: #a827ae;      /* 오키드 마젠타(OKLCH h 326°) — 이색성 유리 지느러미 · 평면도의 Prism 점 하나 */
  --color-beam: #e46cf0;        /* 마젠타 빛 줄기·바닥 빛 웅덩이(3D 가산 혼합 전용, DOM 금지) */
  --color-scrim: rgb(214 216 215 / 0.82); /* 캔버스 위 글자 받침 — bg 0.82, 유리·블러 아님 */

  /* 3D 재질 기준색 (main.js 가 읽는다) */
  --color-mat-board: #b9bcbc;   /* 송판 노출 콘크리트 — 입구·계단 벽 */
  --color-mat-plaster: #e9e8e4; /* 석회 회반죽 — Prism · Atrium */
  --color-mat-floor: #a7aaab;   /* 연마 콘크리트 바닥 */
  --color-mat-column: #c4c6c5;  /* 기둥 */
  --color-sky: #dfe5ea;         /* 반구광 하늘 쪽 */
  --color-bounce: #8d8b86;      /* 반구광 바닥 반사 쪽 */
  --color-sun-0900: #f4e9da;    /* 09:00 해 색(고도 18°) — 정오로 갈수록 아래로 */
  --color-sun-1200: #f3f5f7;    /* 12:00 해 색(고도 78°) */

  /* 서체 */
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* 글자 크기 — display 는 wght 500 · wdth 85 · 자간 -0.035em 기준으로 폭 표를 쟀다 */
  --text-hero: clamp(3.5rem, 9.2vw, 9.5rem);   /* Threshold 헤드라인 (모바일 2줄은 --text-hero-m) */
  --text-hero-m: 4rem;
  --text-room: clamp(3rem, 7.5vw, 7.5rem);     /* 방 이름 · Atrium 두 줄 */
  --text-h2: clamp(2.25rem, 4.5vw, 4rem);      /* 정적 블록 제목 */
  --text-quote: clamp(1.5rem, 2.4vw, 2.25rem); /* 방 개념 한 줄 — Instrument Serif 이탤릭 */
  --text-lead: clamp(1.0625rem, 1.25vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-field: 0.6875rem;                     /* 입장권 필드 이름 · 수치 단위 (mono, 대문자) */
  --text-figure: clamp(1.5rem, 2.2vw, 2rem);   /* 방 수치 (mono) */

  --leading-tight: 0.92;
  --leading-body: 1.55;
  --tracking-display: -0.035em;
  --tracking-field: 0.14em;
  --tracking-mark: 0.32em;

  /* 간격 — 4px 척도 + 유동 여백 */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-gutter: clamp(1.25rem, 3.6vw, 3.5rem);
  --spacing-ticket: 3.5rem;                    /* 입장권 높이(데스크톱) · 모바일 그루터기 3rem */
  --spacing-textblock: min(38vw, 36rem);       /* 캔버스 위 글자 블록 폭(≥1024) */

  /* 모서리·그림자 */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-punch: 50%;                         /* 입장권 구멍 · 절취 홈만 */
  --shadow-none: none;
  --shadow-ticket: 0 1px 0 rgb(18 21 24 / 0.08), 0 12px 32px -18px rgb(18 21 24 / 0.35);
  --shadow-focus: 0 0 0 2px var(--color-sun), 0 0 0 4px var(--color-ink);

  /* 이징 — 스크롤 장면은 이징 없이(스크롤이 곧 곡선), 구간 안 모양만 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-linear: linear;

  /* 시간 */
  --duration-enter: 480ms;
  --duration-press: 120ms;
  --duration-canvas-in: 400ms;                 /* 포스터 → 캔버스 교차 */
}