/* nuvial — 디자인 시스템 정본. 이름은 Tailwind 4 @theme 이름공간, 선언은 :root (브라우저는 @theme 를 읽지 않는다).
 * 시간의 기준은 숨 한 번 = 4초. 모든 길이는 그 분수다. */
:root {
  /* 색 — 세이지·돌 mid 톤 + 베리 강조(점·작은 글자만, 큰 면 금지) */
  --color-stone: #aeb3a0;        /* 바탕 */
  --color-stone-hi: #c6c9b8;     /* 이중 베젤 안쪽 핵 · 활성 판 · 시트 */
  --color-stone-lo: #959b86;     /* 이중 베젤 바깥 껍질 · 괘선 영역 — 위에 작은 글자 금지 */
  --color-scrim: #b9bdab;        /* 영상 위 글자 덮개(그라데이션 끝색) */
  --color-moss: #2f3a31;         /* 예약 CTA 면 · 주 버튼 */
  --color-ink: #1b211c;          /* 본문·제목 */
  --color-ink-soft: #353f37;     /* 보조 글자 */
  --color-mist: #e9eadf;         /* 이끼 위 글자 */
  --color-berry: #9a2d5a;        /* 강조 — 점·선·포커스 링(돌 위) */
  --color-berry-ink: #6a1c3d;    /* 강조 글자(작은 글자 4.5:1) */
  --color-line: rgb(27 33 28 / 0.18);      /* 괘선 1px */
  --color-line-strong: rgb(27 33 28 / 0.42);
  --color-shell: rgb(27 33 28 / 0.06);     /* 베젤 껍질 바탕 */
  --color-highlight: rgb(255 255 255 / 0.35); /* 베젤 안쪽 윗선 */

  /* 서체 */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-display--variation: "opsz" 72;
  --font-display--weight: 380;
  --font-body--weight: 420;

  /* 글자 크기 — display 는 실측 폭 표(wireframe 7절)에 맞춘 값 */
  --text-display: clamp(3rem, 7.2vw, 7rem);
  --text-display--line-height: 0.98;
  --text-h2: clamp(2.25rem, 5.2vw, 5.25rem);
  --text-h2--line-height: 1.02;
  --text-h3: clamp(1.75rem, 3.2vw, 3.25rem);
  --text-h3--line-height: 1.06;
  --text-h4: 2rem;
  --text-h4--line-height: 1.1;
  --text-figure: clamp(3rem, 5vw, 4.5rem);
  --text-lead-serif: clamp(1.375rem, 2vw, 2rem);
  --text-lead: clamp(1.125rem, 1.4vw, 1.3125rem);
  --text-body: 1.0625rem;
  --text-body--line-height: 1.6;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;           /* 눈썹·라벨, 대문자 + 자간 0.16em */
  --tracking-display: -0.02em;
  --tracking-micro: 0.16em;

  /* 간격 — 4px 바탕 단계 + 유동 3개(유동은 margin·gap 에만, #50) */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;
  --spacing-frame: clamp(0.625rem, 1.1vw, 1rem);     /* 히어로 창·CTA 면의 바깥 여백 10~16px */
  --spacing-gutter: clamp(1rem, 3vw, 2.5rem);
  --spacing-section: clamp(6rem, 12vw, 10rem);
  --spacing-bezel: 0.375rem;                           /* 이중 베젤 껍질 두께 6px */
  --container: 75rem;                                  /* 1200px */
  --track-gap: 3.5rem;                                 /* 가로 트랙 판 사이 56px */
  --panel-lg: min(72vw, 65rem);                        /* 큰 판 1040px */
  --panel-sm: min(36vw, 32.5rem);                      /* 작은 판 520px */

  /* 반경 — 바깥 − 껍질 = 안쪽(동심) */
  --radius-window: 1.75rem;                            /* 28px 히어로 창·CTA 면·시트 위 */
  --radius-shell: 2rem;
  --radius-core: calc(2rem - 0.375rem);
  --radius-pill: 999px;
  --radius-sm: 0.5rem;

  /* 그림자 — 넓게 퍼진 잉크 그림자만, 진한 검정 금지 */
  --shadow-float: 0 1px 1px rgb(27 33 28 / 0.04), 0 18px 48px -18px rgb(27 33 28 / 0.22);
  --shadow-core: inset 0 1px 0 var(--color-highlight);
  --shadow-sheet: 0 -24px 64px -24px rgb(27 33 28 / 0.35);

  /* 이징 — 숨(대칭 사인)·가라앉음(감속)·누름 */
  --ease-breath: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-travel: cubic-bezier(0.65, 0, 0.35, 1);       /* 트랙 정류장 사이 이동(진행도에 적용) */

  /* 시간 — 숨 한 번(4초)의 분수 */
  --duration-breath: 4000ms;      /* 숨선 반 주기 · 영상 리듬 */
  --duration-quarter: 1000ms;     /* 포스터→영상 교차 */
  --duration-eighth: 500ms;       /* 시트·등장 */
  --duration-sixteenth: 250ms;    /* hover·펼침·닫힘 */
  --duration-press: 120ms;

  /* 층 — 체계 층만 */
  --z-stage: 1;
  --z-nav: 20;
  --z-sheet: 40;
}