/* ORIN — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간).
 * 페이지는 이 파일을 <link> 로 먼저 싣고, style.css 는 여기 있는 var() 만 쓴다.
 * 승급(Next.js) 때는 :root 블록을 그대로 globals.css 의 @theme 로 옮긴다.
 * 방향: Loupe Tray — 은회색 쟁반 + 고대비 세리프 + 자수정 한 점. 근거·대비표는 _design/DESIGN.md.
 */
:root {
  /* ── 색 ───────────────────────────────────────────────────────────────
   * 바탕은 순백이 아니다: #fff 와 ΔE 0.070, 은을 올려 둔 쟁반의 차가운 회백.
   * 강조(자수정)는 면을 칠하지 않는다 — 실제 크기 막대·선택 표시·포커스·돌에만. */
  --color-bg: #e6e8ea;              /* 은회색 쟁반 — 페이지 바탕 */
  --color-surface: #f3f4f5;         /* 쟁반 받침(core) · 헤더 알약 · 시트 — 바탕보다 한 단 밝게 들뜬다 */
  --color-plate: #dadde1;           /* 우물·표본판(자리표시자) · 고지 쟁반 — 사진이 놓일 자리 */
  --color-ink: #121418;             /* 흑연 잉크 — 제목·본문·주 버튼 바탕 */
  --color-ink-muted: #4f545b;       /* 보조 글 · 라벨 · 표본판 선화 */
  --color-line: #c5c9ce;            /* 머리카락 선 — 장식용(글자 아님, 대비 기준 밖) */
  --color-line-strong: #7f848b;     /* 입력·칩 테두리 — 비텍스트 UI 3:1 */
  --color-accent: #5a2d82;          /* 자수정 — OKLCH 305°, 유일한 색 */
  --color-accent-soft: #e2dbe9;     /* 선택된 칩·견본의 받침 (면적 작게) */
  --color-band-night: #16181c;      /* 꼬리 띠 — 흑연 */
  --color-on-night: #e6e8ea;        /* 꼬리 띠 위 글 */
  --color-on-night-muted: #9ca1a8;  /* 꼬리 띠 위 보조 글 */
  --color-accent-on-night: #c7b2e0; /* 꼬리 띠 위 포커스·점 */
  --color-scrim: rgb(18 20 24 / 0.44); /* 시트·메뉴 뒤 막 — 글자 색 아님 */

  /* ── 서체 ─────────────────────────────────────────────────────────────
   * Gloock 은 400 한 굵기뿐 — 굵게(bold) 쓰지 않는다(가짜 굵기 금지). */
  --font-display: "Gloock", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── 글자 크기 (Tailwind 4: --text-* + --line-height · --letter-spacing 짝) ── */
  --text-xs: 0.75rem;                                   /* 12 — 배율 태그·눈금·라벨(대문자) */
  --text-xs--line-height: 1.35;
  --text-xs--letter-spacing: 0.08em;
  --text-sm: 0.875rem;                                  /* 14 — 캡션·쟁반 머리 줄·표 */
  --text-sm--line-height: 1.45;
  --text-base: 1rem;                                    /* 16 — 본문·입력(iOS 확대 방지 하한) */
  --text-base--line-height: 1.6;
  --text-lg: 1.1875rem;                                 /* 19 — 리드 */
  --text-lg--line-height: 1.5;
  --text-xl: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);      /* 24→32 — 쟁반 큰 이름·수치 */
  --text-xl--line-height: 1.15;
  --text-2xl: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);   /* 36→56 — 구간 제목 H2 */
  --text-2xl--line-height: 1.05;
  --text-2xl--letter-spacing: -0.01em;
  --text-index: clamp(2.5rem, 1.2rem + 4.6vw, 5.5rem);  /* 40→88 — 컬렉션 색인 줄 이름 */
  --text-index--line-height: 1;
  --text-index--letter-spacing: -0.015em;
  --text-3xl: clamp(3rem, 1.6rem + 4.8vw, 6rem);        /* 48→96 — 컬렉션·상품 H1 */
  --text-3xl--line-height: 0.98;
  --text-3xl--letter-spacing: -0.02em;
  --text-display: clamp(3rem, 1rem + 6.4vw, 7rem);      /* 48→112 — 홈 H1 · 꼬리 워드마크 */
  --text-display--line-height: 0.95;
  --text-display--letter-spacing: -0.025em;

  /* ── 간격 (Tailwind 4 기본 단위 0.25rem + 이 템플릿의 이름 붙은 간격) ── */
  --spacing: 0.25rem;
  --spacing-bezel: 0.375rem;                            /* 쟁반 껍질 → 받침 사이 6px */
  --spacing-gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);  /* 페이지 옆 여백 16→48 */
  --spacing-grid: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); /* 격자 거터 12→24 */
  --spacing-stack: clamp(1.25rem, 1rem + 1vw, 2rem);    /* 블록 안 묶음 사이 20→32 */
  --spacing-section: clamp(6rem, 4rem + 6vw, 10rem);    /* 구간 사이 96→160 — 렌즈의 py-24~py-40 */
  --spacing-tray-head: 3rem;                            /* 쟁반 머리 줄 높이 48 — 번호·이름·가격 */

  /* ── 모서리 — 동심원: 받침 = 쟁반 − 껍질 여백 ── */
  --radius-tray: clamp(1.25rem, 1rem + 1vw, 1.75rem);   /* 20→28 */
  --radius-core: calc(var(--radius-tray) - var(--spacing-bezel));
  --radius-well: calc(var(--radius-core) - 0.375rem);
  --radius-pill: 999px;   /* 원형 요소만 — 견본·점·스위치 */
  --radius-sm: 2px;       /* 버튼·칩·태그 — 보석함 칸 모서리 */

  /* ── 그림자 — 떠 있는 그림자는 없다(브리프 금지). 받침 윗변의 안쪽 빛 한 줄만 ── */
  --shadow-core: inset 0 1px 0 rgb(255 255 255 / 0.75);
  --shadow-ring: 0 0 0 1px var(--color-line);           /* 쟁반 껍질의 머리카락 선 */
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* ── 이징 — linear·기본 ease-in-out 금지(렌즈) ── */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);     /* 등장·Crossfade — 무겁게 내려앉는다 */
  --ease-lens: cubic-bezier(0.32, 0.72, 0, 1);          /* 누름·hover — 렌즈의 스프링 흉내 */
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);   /* 화면 안 A→B — ×6 ↔ 1:1 */

  /* ── 폭 ── */
  --container-page: 90rem;                              /* 1440 */
  --container-prose: 38rem;                             /* 본문 한 줄 ≈ 66자 */
  --breakpoint-md: 40rem;                               /* 640 — 4열 → 8열 (미디어쿼리엔 값으로 적는다) */
  --breakpoint-lg: 64rem;                               /* 1024 — 8열 → 12열 */
}

/* 테마 밖 — 모션 길이. Tailwind 4 에 길이 이름공간이 없어 :root 에 따로 둔다(승급 때도 :root). */
:root {
  --duration-press: 120ms;
  --duration-swap: 240ms;
  --duration-accordion: 280ms;
  --duration-crossfade: 320ms;
  --duration-sheet: 360ms;
  --duration-loupe: 480ms;
  --duration-reveal: 720ms;
  --stagger: 60ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-press: 0ms;
    --duration-swap: 0ms;
    --duration-accordion: 0ms;
    --duration-crossfade: 0ms;
    --duration-sheet: 0ms;
    --duration-loupe: 0ms;
    --duration-reveal: 0ms;
    --stagger: 0ms;
  }
}