/* haruhome — 디자인 시스템 정본 (3단계 · designer)
 * 이름은 Tailwind 4 @theme 이름공간 그대로 — 승급 때 `:root` 를 `@theme` 로 바꿔 globals.css 에 옮긴다.
 * style.css 는 여기 변수만 쓴다(raw 색 금지). 근거 · 대비 실측 · 쓰임 규칙은 _design/DESIGN.md.
 * 렌즈: minimalist-ui · 12열 격자 0 · 알약은 필터 칩 하나 · 헤어라인은 표와 목록 구분에만.
 */
:root {
  /* ── 색 ─────────────────────────────────────────────────────────────
   * 바탕 · 면(이름에 bg/surface/band — 대비표가 배경으로 읽는다) */
  --color-bg: #ffffff; /* 페이지 흰 바탕 */
  --color-surface: #f3f4f1; /* 사진 무대 · 꼬리 · 고지 상자 — 에셋 배경과 같은 값 */
  --color-surface-sunk: #e9ebe6; /* 무대 hover · 막대 트랙 · 자리표시자 코너 */
  --color-band: #1b1e1b; /* 프로모션 띠 · 채운 버튼 · 선택된 칩 — 먹과 같은 값의 "면" 이름 */

  /* 글자 · 선 */
  --color-ink: #1b1e1b; /* 본문 · 제목 · 가격 */
  --color-ink-muted: #5d635c; /* 보조 글 · 정가 취소선 · 라벨 (흰 6.17 · 무대 5.59) */
  --color-ink-faint: #8e948b; /* 글자 금지 — 빈 별 · 비활성 아이콘 · 큰 숫자 보조(흰 3.11) */
  --color-line: #e1e4de; /* 헤어라인 — 표 행 · 목록 구분에만 */
  --color-line-strong: #c5cac2; /* 스와치 가장자리(아이보리가 흰 바탕에 묻히지 않게) · 자리표시자 점선 */
  --color-on-band: #ffffff; /* 먹 면 위 글자 */

  /* 강조 — 잎색. 글자와 고리에만, 면으로 칠하지 않는다 */
  --color-accent: #3f7a2c; /* 할인율 · 혜택가 · 선택 고리 · 포커스 링 (흰 5.21 · 무대 4.72) */
  --color-accent-soft: #a6dc9c; /* 먹 면 위의 숫자(프로모션 띠 22% · D-17) (먹 10.69) */

  /* 제품 외장색 — 스와치 원과 에셋 미술 방향이 같은 값을 쓴다 */
  --color-finish-ivory: #ebe5d8;
  --color-finish-sage: #a3b59b;
  --color-finish-charcoal: #3a3d3a;

  /* 덮개 — 서랍 · 메뉴 뒤판 (반투명이라 대비표에서 빠진다) */
  --color-scrim: rgb(27 30 27 / 0.42);

  /* ── 서체 ───────────────────────────────────────────────────────────
   * display = 제품명 · 가격 · 사양 숫자 · 구간 제목 (IBM Plex Sans KR 400/700)
   * sans    = 본문 · UI (Pretendard Variable) */
  --font-display: "IBM Plex Sans KR", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif;

  /* ── 글자 크기 ──────────────────────────────────────────────────────
   * 폭 표(wireframe 4)가 이 clamp 로 계산됐다 — 바꾸면 폭 표도 다시 잰다 */
  --text-display: clamp(2rem, 1.25rem + 2.4vw, 3.25rem); /* 홈 H1 · 브랜드 H1 — 32 → 52 */
  --text-display--line-height: 1.16;
  --text-display--letter-spacing: -0.02em;
  --text-h1: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); /* 쪽 제목 · 상세 상품명 — 28 → 40 */
  --text-h1--line-height: 1.24;
  --text-h1--letter-spacing: -0.02em;
  --text-h2: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); /* 구간 제목 — 22 → 28 */
  --text-h2--line-height: 1.3;
  --text-h2--letter-spacing: -0.02em;
  --text-h3: 1.125rem; /* 카드 묶음 제목 · FAQ 질문 · 약속 제목 — 18 */
  --text-h3--line-height: 1.45;
  --text-price-lg: 2rem; /* 상세 판매가 — 32 */
  --text-price-lg--line-height: 1.1;
  --text-price: 1.125rem; /* 카드 할인율 · 판매가 — 18 */
  --text-price--line-height: 1.2;
  --text-stat: 2.5rem; /* 후기 평균 4.8 · 약속 번호 — 40 */
  --text-stat--line-height: 1;
  --text-body: 1rem; /* 본문 — 16 */
  --text-body--line-height: 1.7;
  --text-ui: 0.9375rem; /* 내비 · 버튼 · 카드 상품명 — 15 */
  --text-ui--line-height: 1.45;
  --text-sm: 0.875rem; /* 보조 · 표 값 · 사양 값(≥720) — 14 */
  --text-sm--line-height: 1.55;
  --text-xs: 0.8125rem; /* 정가 취소선 · 별점 · 모델 코드 · 프로모션 띠 — 13 */
  --text-xs--line-height: 1.5;
  --text-2xs: 0.75rem; /* 사양 라벨 · 딱지 — 12, 가장 작은 글자 */
  --text-2xs--line-height: 1.4;

  /* ── 간격 ───────────────────────────────────────────────────────────
   * 4px 단계. fluid(clamp)는 margin · gap 에만 — 테두리 · 면 상자의 padding 은 리터럴 단계(lessons #50) */
  --spacing: 0.25rem; /* Tailwind 4 기본 단위 */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-container: 75rem; /* 1200 — 가운데 고정 폭 */
  --spacing-page-x: clamp(1.25rem, 0.45rem + 2.2vw, 2.5rem); /* 20 → 40 (wireframe 0 의 20 · 24 · 32 · 40 과 맞춘 근사 — 구현은 브레이크포인트 값을 우선) */
  --spacing-section: clamp(3.5rem, 2.6rem + 2.8vw, 6rem); /* 구간 사이 56 → 96 */
  --spacing-block: clamp(2rem, 1.6rem + 1.2vw, 3rem); /* 구간 제목 → 내용 · 블록 안 큰 틈 32 → 48 */
  --spacing-grid: clamp(0.75rem, 0.4rem + 1.1vw, 1.5rem); /* 상품 격자 틈 12 → 24 */
  --spacing-split: 3.5rem; /* 히어로 · 상세 2단 틈 56 */
  --spacing-header: 4.5rem; /* 머리 72 (모바일 3.5rem) */
  --spacing-promo: 2.25rem; /* 프로모션 띠 36 (모바일 2rem) */
  --spacing-tap: 2.75rem; /* 최소 터치 44 */

  /* ── 반경 ─────────────────────────────────────────────────────────── */
  --radius-xs: 4px; /* 딱지 */
  --radius-sm: 6px; /* 버튼 · 수량 칸 · 검색 칸 모양 버튼 (≤ 8 규칙) */
  --radius-md: 8px; /* 사진 무대 · 고지 상자 · 서랍 모서리 */
  --radius-pill: 999px; /* 필터 칩 전용 — 다른 곳에 쓰지 않는다 */
  --radius-round: 50%; /* 스와치 원 · 장바구니 개수 */

  /* ── 그림자 — 서랍 · 메뉴 시트에만. 카드 · 버튼은 그림자 0 ────────── */
  --shadow-drawer: 0 0 0 1px rgb(27 30 27 / 0.06), -12px 0 40px rgb(27 30 27 / 0.12);
  --shadow-sheet: 0 -12px 40px rgb(27 30 27 / 0.12);

  /* ── 이징 · 길이 ─────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Crossfade · Hover effect · Accordion · Press */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* 닫힘 */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* 서랍 Slide in */
  --default-transition-duration: 200ms;
  --default-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --default-transition-duration: 0.01ms;
  }
}