/* driftlands — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간, 선언은 :root — @theme 블록은 브라우저가 읽지 않는다 #73)
 * 대비 실측은 _design/DESIGN.md 대비표. 바탕 하늘색은 키 아트 위쪽 하늘에서 뽑았다 — 사진과 같은 식구로 두려고. */
:root {
  /* 색 — 팔레트 5 */
  --color-sky: #7f98ac;          /* 바탕 (mid) */
  --color-hull: #132230;         /* 잉크 — 선체 남색 */
  --color-amber: #f2a03d;        /* 강조 — 석양 호박. 면은 단추·바늘·고른 고리만 */
  --color-cream: #f7ecd9;        /* 구름 크림 — 어두운 면·사진 위 글자 */
  --color-dusk: #22364a;         /* 땅거미 — 계기판 판·고른 줄·꼬리 */

  /* 색 — 역할 (설비 대비표가 리터럴만 읽어서 값을 다시 적는다) */
  --color-bg: #7f98ac;           /* = sky */
  --color-band: #22364a;         /* = dusk — 땅거미 면(고른 줄·꼬리·섬 판) */
  --color-surface-high: #9db1c1; /* 밝은 하늘 면 — 항로도·표 줄무늬 */
  --color-ink: #132230;          /* = hull */
  --color-ink-soft: #1c2e3d;     /* 하늘 위 보조 글자 — 4.64:1 */
  --color-cream-soft: #b9c8d6;   /* 땅거미 위 보조 글자 — 7.26:1. 구현에서 무채 #bbb9b1 → 하늘빛 틴트(impeccable gray-on-color, 대비도 오름) */
  --color-plate: rgb(34 54 74 / 0.95);         /* 계기판 판 — 땅거미 95% (qa-1 P2-2: 86% 는 아래 글자가 비쳐 겹쳐 읽혔다) */
  --color-plate-rim: rgb(247 236 217 / 0.16);  /* 판 안쪽 머리카락선 */
  --color-rule: rgb(19 34 48 / 0.28);          /* 하늘 위 구분선 */
  --color-rule-dark: rgb(247 236 217 / 0.18);  /* 땅거미 위 구분선 */
  --color-scrim: rgb(19 34 48 / 0.62);         /* 사진 가장자리 번짐 끝 값 */
  --color-scrim-low: rgb(19 34 48 / 0.65);     /* 히어로 아래 번짐(데스크톱) — DESIGN 대비표 5.86:1 */
  --color-scrim-deep: rgb(19 34 48 / 0.78);    /* 히어로 아래 번짐(<720) — 세로 화면은 밝은 구름 위로 글자가 온다(구현 실측) */
  --color-veil: rgb(19 34 48 / 0.55);          /* 예약 판 뒤 덮개 */
  --color-focus-light: var(--color-hull);      /* 하늘 면 위 포커스 고리 */
  --color-focus-dark: var(--color-amber);      /* 땅거미·사진 위 포커스 고리 */

  /* 서체 */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  /* 글자 크기 — display 폭은 wireframe 폭 표에서 실측 */
  --text-hero: clamp(4rem, 16.5vw, 11.5rem);
  --text-display: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  --text-title: clamp(2.25rem, 1rem + 3vw, 4rem);
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;
  --text-gauge: 1.0625rem;       /* 고도계 숫자 — Instrument Sans tabular-nums */

  --text-hero--line-height: 0.86;
  --text-display--line-height: 0.92;
  --text-title--line-height: 0.95;
  --text-body--line-height: 1.6;
  --tracking-display: 0.01em;
  --tracking-label: 0.14em;

  /* 간격 — 4px 바탕 척도 + 유동 2개(margin·gap 에만, #50) */
  --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-gutter: clamp(1.25rem, 0.5rem + 3.3vw, 4rem);
  --spacing-section: clamp(6rem, 4rem + 8vw, 11rem);
  --spacing-corner: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);   /* 귀퉁이 판과 화면 가장자리 */
  --spacing-dock: 4rem;          /* <720 아래 띠 높이 (safe-area 별도) */

  /* 모서리 — 계기판은 각지게, 그림 액자만 살짝 */
  --radius-plate: 3px;
  --radius-frame: 10px;
  --radius-ring: 999px;          /* 섬 표지 고리 전용 — 단추에 쓰지 않는다 */

  /* 그림자 — 남색 물든 넓은 번짐, 검정 금지 */
  --shadow-plate: 0 1px 0 rgb(247 236 217 / 0.12) inset, 0 12px 32px -12px rgb(19 34 48 / 0.45);
  --shadow-frame: 0 24px 60px -24px rgb(19 34 48 / 0.55);
  --shadow-text-on-photo: 0 1px 18px rgb(19 34 48 / 0.55);

  /* 이징·길이 */
  --ease-sail: cubic-bezier(0.32, 0.72, 0, 1);       /* 기본 — 바람 받은 돛처럼 빨리 차고 길게 멎는다 */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* 상태 전환(Crossfade·Accordion) */
  --ease-gust: cubic-bezier(0.65, 0, 0.35, 1);       /* 화면 위에서 A→B 이동(메뉴 판) */
  --duration-press: 120ms;
  --duration-swap: 220ms;
  --duration-reveal: 280ms;
  --duration-enter: 520ms;
  --stagger: 60ms;
}