/* Lowtarn (slug: hollowmere) — 디자인 시스템 정본.
 * 이름은 Tailwind 4 @theme 이름공간 그대로다. 브라우저가 @theme 를 모르니 :root 에 두고,
 * 승급(Next.js) 때 이 블록을 globals.css 의 @theme 로 옮긴다.
 * 렌즈: industrial-brutalist-ui (Tactical Telemetry — 어두운 바탕, 1px 칸, 모서리 0, 그림자 0).
 * 색은 안개 하나 + 초록 점 하나. 나머지는 전부 같은 청록 축의 명도 계단이다.
 */
:root {
  /* ── 색 — 바탕(이름에 bg·surface 가 든 것) ─────────────────────────── */
  --color-bg: #163735;            /* tarn — 해 질 녘 호수 위 안개 밤. 페이지 바탕 */
  --color-surface: #0b1e1e;       /* deep — 레일 · 실루엣 · 물 밑. bg 보다 어둡다 */
  --color-surface-raise: #1c403d; /* shoal — 표 머리 · 선택된 줄 · 눌린 칸 */

  /* ── 색 — 전경 ───────────────────────────────────────────────────── */
  --color-ink: #d6dfdb;           /* fog — 본문·제목. 이 사이트의 '한 가지 색' */
  --color-ink-dim: #9fb2ae;       /* fog-dim — 보조 글·라벨·꺼진 내비 */
  --color-accent: #94e379;        /* 소나 초록 — 수심계 화면의 점(소나 블립). '지금 여기' 에만. 면적 1% 이하 */

  /* ── 색 — 장식(글자에 쓰지 않는다) ─────────────────────────────── */
  --color-rule: #3e605c;          /* 1px 괘선 · 칸 나눔 · 눈금 */
  --color-fog-dot: #6f8d88;       /* 망점 안개의 점 · 먼 실루엣 */

  /* ── 서체 ────────────────────────────────────────────────────────── */
  --font-display: "Bebas Neue", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-body: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Chivo", system-ui, sans-serif;        /* HUD 라벨·숫자 — 대문자 + tnum */
  --font-data--font-feature-settings: "tnum" 1, "lnum" 1;

  /* ── 글자 크기 — 두 극단(거대 Bebas ↔ 작은 대문자 라벨)과 그 사이 본문 ── */
  --text-micro: 0.75rem;                          /* 12px — HUD 라벨, 대문자 +0.1em */
  --text-micro--letter-spacing: 0.1em;
  --text-micro--line-height: 1.3;
  --text-small: 0.875rem;                         /* 14px — 표·목록 보조 */
  --text-small--line-height: 1.5;
  --text-body: 1rem;                              /* 16px — 본문 Chivo 400 */
  --text-body--line-height: 1.65;
  --text-lede: clamp(1.125rem, 0.9rem + 0.8vw, 1.375rem); /* 로그라인·도입 */
  --text-lede--line-height: 1.45;
  --text-h3: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);      /* Bebas — 칸 제목·이름 */
  --text-h3--line-height: 0.95;
  --text-h2: clamp(3rem, 1.6rem + 4.6vw, 5.75rem);        /* Bebas — 페이지 제목 */
  --text-h2--line-height: 0.88;
  --text-h1: clamp(6rem, 1.8rem + 12.4vw, 13rem);         /* Bebas — 워드마크(홈 히어로) */
  --text-h1--line-height: 0.82;
  --text-depth: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);     /* Bebas — 레일 수심 읽기·카운트다운 */
  --text-depth--line-height: 0.9;

  /* ── 간격 — 4px 격자. 칸 안은 빽빽, 칸 사이는 크게(쌍봉 밀도) ── */
  --spacing: 0.25rem;                      /* Tailwind 4 기본 단위 */
  --spacing-hair: 1px;                     /* 괘선 — gap:1px 로 칸을 가른다 */
  --spacing-cell: 0.75rem;                 /* 12px — 칸 안 여백(빽빽) */
  --spacing-gutter: clamp(1rem, 0.6rem + 1.4vw, 2.5rem);  /* 16~40px */
  --spacing-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);   /* 블록 안 묶음 사이 */
  --spacing-section: clamp(5rem, 2.6rem + 8vw, 10rem);    /* 블록 사이 — 크게 비운다 */
  --spacing-rail: 17.5rem;                 /* 280px — 고정 레일 폭(≥1024px) */
  --spacing-bar: 3.5rem;                   /* 56px — 모바일 머리줄 높이(고정 아님) */
  --spacing-tap: 2.75rem;                  /* 44px — 최소 터치 타깃 */
  --spacing-measure: 38rem;                /* 본문 한 줄 최대 폭(≈68자) */

  /* ── 모서리 — 전부 90°. 원은 초록 점 하나 ─────────────────────── */
  --radius-none: 0px;
  --radius-dot: 9999px;

  /* ── 그림자 — 없다. 깊이는 명도 계단과 망점 밀도로 낸다 ─────────── */
  --shadow-none: none;
  --shadow-hair: 0 0 0 1px var(--color-rule);        /* 윤곽선 대용 — 흐림 0 */
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink); /* 포커스 링 — 안개색 */

  /* ── 이징 — 계기판은 미끄러지지 않는다 ───────────────────────── */
  --ease-instant: steps(1, end);                     /* hover·선택 — 즉시 */
  --ease-step: steps(6, end);                        /* 수심 읽기 숫자 — 계단 */
  --ease-drift: linear;                              /* 안개 흐름 Loop */
  --ease-settle: cubic-bezier(0.2, 0, 0, 1);         /* 초록 점이 페이지 수심에 내려앉을 때 한 번 */

  /* ── 망점 안개 — 점 지름·격자(스타일은 var() 로만 읽는다) ─────── */
  --fog-dot-size: 1.1px;
  --fog-grid-near: 5px;
  --fog-grid-far: 8px;
  --fog-drift-duration: 90s;
}