/* fathom — 디자인 시스템 정본. 이름은 Tailwind 4 @theme 이름공간, 선언은 :root(브라우저가 읽는 곳 — lessons #73).
   3D 재질·물색·빛 색도 여기서 읽는다(scene.js 는 getComputedStyle 로만 — 셰이더에 raw hex 0). */
:root {
  /* 선상(정적 블록·카탈로그 바탕) — mid 회청 */
  --color-bg: #41555a;
  --color-foam: #e9eee9;          /* 밝은 글자(깊은 물·선상) */
  --color-ink: #0d1a1c;           /* 어두운 글자(얕은 물) · 주 단추 글자 */
  --color-mute: #c4d0cc;          /* 보조 글자 — 단색 면(bg·deep·water-1000 이하) 위만 */
  --color-line: #71878a;          /* 1px 선·눈금 — 글자 금지(bg 위 2.07) */
  --color-deep: #060c0f;          /* 후원 띠 · 깊은 받침 바탕 */
  --color-shallow: #a6c3be;       /* 얕은 받침 바탕 · 자리표시자 바탕 */

  /* 강조 — 생물 발광(OKLCH h 126°). 면 금지: 자 눈금 막대·3D 발광 점만 */
  --color-accent: #b8e26a;

  /* 캔버스 위 받침(그라데이션 끝값 — 글자 자리 하한은 DESIGN 대비표) */
  --color-scrim-shallow: rgb(166 195 190 / 0.84);
  --color-scrim-deep: rgb(6 12 15 / 0.72);

  /* 물색 = 안개색 키프레임(수심 로그 축 보간) · 카탈로그 띠 */
  --color-water-0: #9dbfb9;
  --color-water-50: #5f8f92;
  --color-water-200: #2f5a66;
  --color-water-1000: #0b1c24;
  --color-water-4000: #04090c;
  --color-water-6000: #03070a;

  /* 3D 재질·빛 */
  --color-sun: #f3f5e8;           /* 수면 밑면·빛 기둥·카우스틱 */
  --color-lamp: #efe6cf;          /* 잠수정 등 */
  --color-sand: #c9c4ae;          /* 대륙붕 모래 */
  --color-sed: #8b8574;           /* 심해 퇴적물 */
  --color-rock: #3b3d3a;          /* 해령 암반 */
  --color-snow: #d7ddd6;          /* 마린 스노 */

  /* 서체 */
  --font-display: "Schibsted Grotesk", "Pretendard Variable", system-ui, sans-serif;
  --font-serif: "Hahmlet", "Pretendard Variable", serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, sans-serif;

  /* 글자 크기 */
  --text-hero: clamp(6rem, 20vw, 18rem);       /* 표지 수심계 0 m */
  --text-hero-m: 6rem;
  --text-depth: clamp(3.5rem, 8vw, 8rem);      /* 구간 수심계 */
  --text-depth-m: 3.25rem;
  --text-h1: clamp(2.25rem, 4vw, 4rem);
  --text-h1-m: 2rem;
  --text-zone: clamp(2rem, 3.4vw, 3.5rem);
  --text-h2: clamp(1.875rem, 3.6vw, 3.5rem);
  --text-quote: clamp(1.25rem, 1.8vw, 1.75rem);
  --text-lead: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --text-body: 1rem;
  --text-figure: clamp(1.375rem, 2vw, 1.875rem);
  --text-small: 0.875rem;
  --text-field: 0.75rem;
  --text-rule: 0.8125rem;                      /* 자 워드마크·판독 */

  /* 간격 — 0.25rem 척도 + 배치 값 */
  --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-40: 10rem;
  --spacing-gutter: clamp(1.25rem, 3.6vw, 3.5rem);
  --spacing-rail: 4.5rem;                      /* 자 레일 폭(1024+) */
  --spacing-rail-m: 1.75rem;                   /* 오른쪽 눈금(<1024) */
  --spacing-textblock: min(40vw, 36rem);
  --spacing-coverblock: min(56vw, 52rem);

  /* 모서리 — 직각 기본(도록), 원은 발광 점·자 판독 점만 */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-dot: 50%;

  /* 그림자 — 쓰지 않는다(물속엔 단단한 그림자가 없다). 포커스만 */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-deep), 0 0 0 4px var(--color-foam);
  --shadow-focus-shallow: 0 0 0 2px var(--color-shallow), 0 0 0 4px var(--color-ink);

  /* 이징 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* 등장 */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 누름 */
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);  /* 물빛 뒤집힘 */
  --ease-linear: linear;                                /* scrub 전용 */

  /* 시간 */
  --duration-press: 120ms;
  --duration-flip: 240ms;
  --duration-cross: 400ms;
  --duration-reveal: 480ms;
}