/*
 * Luma Ritual — design tokens (정본)
 * 이름은 Tailwind 4 @theme 이름공간 그대로다. 승급 때 이 블록을 globals.css 의 @theme { } 안으로 옮기면 된다.
 * 브라우저가 @theme 을 모르므로 여기서는 :root 에 둔다.
 *
 * 색 규칙 — UI 는 3색(night · pearl · rose)과 무대 하나(garnet). 나머지 raw-* 는 "물건"(병의 면·원료 견본)에만 쓴다.
 * 그라디언트·블러·유리·큰 그림자 없음. 빛은 평평한 면(facet)으로 그린다.
 */
:root {
  /* ── 바탕 ─────────────────────────────────────────── */
  --color-bg: #1d0a10;            /* night — 블랙 체리 래커. 페이지 바탕 */
  --color-surface: #3d1220;       /* garnet — 제품이 서는 무대(stage). 면 분할의 두 번째 면 */
  --color-band: #ff5f7e;          /* 고지 띠(announcement bar) 바탕 = rose. 위에 night 글자 */

  /* ── 글자 ─────────────────────────────────────────── */
  --color-ink: #f6ece6;           /* pearl — 본문·제목. 밝은 채움(버튼) 위에서는 글자가 --color-bg */
  --color-ink-muted: #bda5a8;     /* 보조 글자·라벨·선택 안 된 칩 테두리 */
  --color-accent: #ff5f7e;        /* rose — 가격·활성 링크·% 숫자. 넓은 면에 쓰지 않는다(고지 띠만 예외) */
  --color-champagne: #f0c68e;     /* luma line(액면선)·포커스 링·동백 원료 */
  --color-line: #5a2a36;          /* 괘선(장식) — 1px. 글자·컨트롤 경계로 쓰지 않는다 */

  /* ── 원료 — 물건에만 (병의 면 · 원료 견본). 글자색으로 쓰지 않는다 ── */
  --color-raw-amber: #e9973b;     /* bakuchiol */
  --color-raw-coral: #e0503a;     /* rosehip seed oil */
  --color-raw-tansy: #5a82f0;     /* blue tansy */
  --color-raw-jade: #7fc6a4;      /* green tea · cucumber */
  --color-raw-camellia: #f0c68e;  /* camellia oil (= champagne) */
  --color-raw-rose: #ff5f7e;      /* rose water (= accent) */
  --color-raw-pearl: #f6ece6;     /* niacinamide (= ink) */

  /* ── 서체 ─────────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", "Pretendard Variable", system-ui, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, sans-serif;

  /* 크기 — display 는 폭 75%(condensed)·굵기 300 으로 쓴다. 1440 에서 hero ≈ 130px, 390 에서 ≈ 60px */
  --text-display: clamp(3.625rem, 9vw, 9rem);
  --text-display--line-height: 0.9;
  --text-display--letter-spacing: -0.03em;
  --text-h1: clamp(2.75rem, 5.6vw, 5.5rem);
  --text-h1--line-height: 0.95;
  --text-h2: clamp(2rem, 3.6vw, 3.5rem);
  --text-h2--line-height: 1;
  --text-h3: clamp(1.375rem, 1.8vw, 1.75rem);
  --text-h3--line-height: 1.15;
  --text-numeral: clamp(3.5rem, 7.5vw, 7.5rem);   /* 1% · 5% · pH 5.4 — display 200 */
  --text-numeral--line-height: 0.85;
  --text-lead: clamp(1.125rem, 1.4vw, 1.3125rem);
  --text-lead--line-height: 1.5;
  --text-body: 1.0625rem;
  --text-body--line-height: 1.6;
  --text-small: 0.875rem;
  --text-small--line-height: 1.5;
  --text-label: 0.75rem;                          /* 대문자 · 자간 0.14em · Pretendard 600 */
  --text-label--line-height: 1.3;
  --text-label--letter-spacing: 0.14em;

  /* ── 간격 (4px 바탕) ──────────────────────────────── */
  --spacing: 0.25rem;
  --spacing-2xs: 0.25rem;   /* 4 */
  --spacing-xs: 0.5rem;     /* 8 */
  --spacing-sm: 0.75rem;    /* 12 */
  --spacing-md: 1rem;       /* 16 */
  --spacing-lg: 1.5rem;     /* 24 */
  --spacing-xl: 2rem;       /* 32 */
  --spacing-2xl: 3rem;      /* 48 */
  --spacing-3xl: 4.5rem;    /* 72 */
  --spacing-4xl: 7rem;      /* 112 — 구간 사이(모바일 72) */
  --spacing-5xl: 10rem;     /* 160 — 큰 구간 사이(데스크톱만) */
  --spacing-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --spacing-bar: 2.25rem;   /* 고지 띠 높이 36 (모바일 32) */
  --spacing-nav: 4.5rem;    /* 내비 높이 72 (모바일 56) */
  --spacing-measure: 38rem; /* 본문 한 줄 최대 폭 */

  /* ── 모서리 ───────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 2px;         /* 원료 견본 */
  --radius-md: 4px;         /* 버튼 · 옵션 칩 */
  --radius-lg: 10px;        /* 카드 무대 상한 */
  --radius-pill: 999px;     /* 작은 범례 점만. 큰 컨테이너·버튼에 쓰지 않는다 */

  /* ── 그림자 — 쓰지 않는다. 포커스 링만 ─────────────── */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px #1d0a10, 0 0 0 4px #f0c68e;

  /* ── 이징 ─────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* 채움(reveal) · 호버 — 빠르게 시작해 천천히 선다 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* 화면 안에서 A→B */
  --ease-press: cubic-bezier(0.2, 0, 0, 1);        /* 누름 피드백 */
}