/*
 * White Tide — 디자인 시스템 정본 (tokens.css)
 * 이름은 Tailwind 4 @theme 이름공간(--color-* --font-* --text-* --spacing-* --radius-* --shadow-* --ease-*).
 * 브라우저가 @theme 를 모르므로 여기서는 :root 에 둔다 — 승급 때 블록 이름만 @theme 로 바꿔 globals.css 로 옮긴다.
 * style.css 는 var() 만 쓴다. 값을 바꾸면 _design/DESIGN.md 의 대비표를 `node build.mjs --contrast white-tide` 로 다시 잰다.
 */
:root {
  /* ── 색 — 맨 석고 벽 · 먹 · 녹청 한 점 · 백묵 ─────────────────────────────
   * 바탕이 흰색이 아닌 이유: 흰 장이 이미 다섯이고, #ece9e2 근처는 orin·갤러리 홈과 ΔE 0.014 로 겹친다.
   * 칠하지 않은 석고(bare plaster)는 원래 옅은 분홍 — 흰색은 조수선·액자 매트·벽 캡션에만 남긴다. */
  --color-bg: #ecc6be;          /* 맨 석고 벽 — 페이지 바탕 */
  --color-surface: #fbf8f4;     /* 백묵 — 벽 캡션 카드 · 액자 매트 · 조수선 */
  --color-band: #d7aca4;        /* 젖은 석고 — 지도 땅 · 방문 띠 · 액자 안 자리표시자(글자는 ink·ink-muted 만) */
  --color-ink: #1f1917;         /* 먹 — 제목 비닐 활자 · 본문 */
  --color-ink-muted: #534440;   /* 재 — 보조 글(날짜 설명·치수·캡션) — bg·surface·band 셋 다 4.5:1 이상 */
  --color-accent: #195949;      /* 녹청(verdigris) — "지금 전시 중" 점 · 포커스 링 · 링크 밑줄 — 한 화면에 한 점 */

  /* 역할 별칭 — 값은 위 여섯 중 하나다(새 색을 만들지 않는다) */
  --color-tide: var(--color-surface);   /* 조수선 1px(데스크톱 2px) — 장식, 글자 아님 */
  --color-mat: var(--color-surface);    /* 액자 매트 */
  --color-rule: color-mix(in oklab, var(--color-ink) 22%, transparent); /* 표·목록 괘선 — 장식선 */
  --color-focus: var(--color-accent);
  --color-on-accent: var(--color-surface);

  /* ── 서체 — 벽 활자(Familjen Grotesk) + 캡션·본문(Instrument Sans) ───────── */
  --font-display: "Familjen Grotesk", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  /* ── 글자 크기 — 벽 제목 하나와 나머지 사이를 크게 비운다(약 15배) ─────────── */
  --text-wall: clamp(5.5rem, 3.2rem + 14.5vw, 16.5rem);          /* 현재 전시 제목 · 방문 시간 "11—18" — 한 화면에 하나 */
  --text-wall--line-height: 0.86;
  --text-wall--letter-spacing: -0.045em;
  --text-wall--font-weight: 500;
  --text-poster: clamp(3.25rem, 1.9rem + 6.4vw, 8.5rem);          /* 쪽 포스터 — 작가 이름 · 작가 목록 첫 줄 */
  --text-poster--line-height: 0.9;
  --text-poster--letter-spacing: -0.035em;
  --text-display: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);        /* 구획 제목 · 작가 이름(목록) */
  --text-display--line-height: 1.02;
  --text-display--letter-spacing: -0.025em;
  --text-title: clamp(1.5rem, 1.25rem + 0.9vw, 2.125rem);         /* 프로그램 줄 제목 · 작품 제목(큰 캡션) */
  --text-title--line-height: 1.12;
  --text-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);      /* 전시 글 첫 문단 · 작가 약력 첫 문단 */
  --text-lead--line-height: 1.45;
  --text-body: 1.0625rem;                                          /* 17px 본문 */
  --text-body--line-height: 1.6;
  --text-label: 0.9375rem;                                         /* 15px 벽 캡션 본문 · 표 */
  --text-label--line-height: 1.45;
  --text-caption: 0.8125rem;                                       /* 13px 눈썹·치수·꼬리 */
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0.02em;

  /* ── 간격 — 4px 바탕 + 벽 리듬 ─────────────────────────────────────────── */
  --spacing: 0.25rem;                                               /* Tailwind 4 바탕 단위 */
  --spacing-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);            /* 가장자리 여백 */
  --spacing-section: clamp(6rem, 4rem + 8vw, 11rem);               /* 구획 사이 — 벽 한 면을 비운다 */
  --spacing-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);           /* 구획 안 덩어리 사이 */
  --spacing-mat: clamp(0.875rem, 0.5rem + 1.6vw, 2rem);            /* 액자 매트(백묵 여백) 두께 */
  --spacing-label: 1rem;                                            /* 작품 ↔ 벽 캡션 */
  --spacing-tide: 58svh;                                            /* 첫 화면 조수선 높이(눈높이 148cm 비유) — 모바일은 wireframe 참조 */
  --spacing-measure: 38rem;                                         /* 본문 한 줄 최대 폭(≈ 65자) */
  --spacing-label-w: 20rem;                                         /* 벽 캡션 카드 폭(데스크톱) */
  --spacing-target: 2.75rem;                                        /* 터치 타깃 최소 44px */

  /* ── 모서리 — 전부 직각. 둥근 것은 "지금" 점 하나 ───────────────────────── */
  --radius-none: 0;
  --radius-dot: 50%;

  /* ── 그림자 — 걸린 액자의 바닥 접지 그림자 하나(넓게 번지는 그림자 금지) ─── */
  --shadow-hang: 0 1.25rem 1.5rem -1.25rem rgb(31 25 23 / 0.16);
  --shadow-none: none;

  /* ── 이징 — 비닐 활자를 벽에 붙이는 한 번의 동작 ────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* Reveal · Line drawing · Scroll reveal */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* 선택 상태 Crossfade */
  --ease-press: cubic-bezier(0.2, 0, 0, 1);       /* Press / Tap feedback */
}