/* atelier-noon — 디자인 시스템 정본 (Zenith · SS27)
 * 이름은 Tailwind 4 @theme 이름공간 — 승급 때 globals.css 의 @theme 안으로 그대로 옮긴다.
 * style.css 는 여기의 var() 만 쓴다. 대비 실측: node build.mjs --contrast atelier-noon (DESIGN.md 대비표).
 * 원칙: 정오에는 그림자가 없다 — 그림자 토큰은 초점 고리 하나뿐이다.
 */

:root {
  /* ── 색 · 지면 ─────────────────────────────────────────────── */
  --color-bg: #ffffff;            /* 순백 — 종이색 아님(C = 0) */
  --color-ink: #111111;           /* 본문·UI 잉크 (흰 위 18.88:1) */
  --color-ink-soft: #5c5c5c;      /* 보조 글자 (흰 위 6.69:1) — 판 위에는 쓰지 않는다 */
  --color-accent: #000000;        /* 강조 = 무채. 보도니 제목·검정 버튼·선택 상태만 */
  --color-ink-inverse: #ffffff;   /* 어두운 판(graphite·shadow) 위 글자와 검정 버튼 글자 */
  --color-rule: #e4e4e4;          /* 머리카락 선 — 장식, 글자 아님 */
  --color-rule-strong: #8a8a8a;   /* 조작 요소 경계(사이즈 칸·품절 사선) — 흰 위 3.45:1 */

  /* ── 색 · 판 (자리표시자 = 컬러 칩, 사진이 오면 사진 아래 깔린다) ── */
  --color-plate-optic: #f1f1ef;      /* 판 위 글자: ink */
  --color-plate-chalk: #e3e2de;      /* 판 위 글자: ink */
  --color-plate-limestone: #c4c2bc;  /* 판 위 글자: ink */
  --color-plate-sky: #c9d5de;        /* 정오의 하늘 — 히어로 판. 판 위 글자: ink */
  --color-plate-graphite: #474747;   /* 판 위 글자: ink-inverse */
  --color-plate-shadow: #151515;     /* 판 위 글자: ink-inverse */

  /* ── 서체 ─────────────────────────────────────────────────── */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-weight-display: 400;     /* opsz 96 의 헤어라인이 살아 있는 굵기 */
  --font-weight-body: 400;
  --font-weight-strong: 600;

  /* ── 글자 크기 (390 → 1440) ──────────────────────────────── */
  --text-hero: clamp(5.5rem, 3rem + 13vw, 15rem);          /* Zenith 98 → 235px */
  --text-hero--line-height: 0.82;
  --text-display: clamp(3rem, 1.75rem + 5vw, 7rem);        /* 페이지 제목 48 → 100px */
  --text-display--line-height: 0.92;
  --text-display-s: clamp(2rem, 1.25rem + 3vw, 4.5rem);    /* 카테고리 행·매장 제목 32 → 63px */
  --text-display-s--line-height: 1;
  --text-headline: clamp(2rem, 1rem + 3.4vw, 4.25rem);     /* 캠페인 문구 32 → 65px */
  --text-headline--line-height: 1.06;
  --text-numeral: clamp(2.5rem, 1.5rem + 3vw, 5rem);       /* 판 위 로마 숫자 40 → 67px */
  --text-numeral--line-height: 1;
  --text-title: clamp(2rem, 1.5rem + 1.6vw, 3.5rem);       /* 상품 이름 32 → 47px */
  --text-title--line-height: 1.02;
  --text-lead: 1.25rem;
  --text-lead--line-height: 1.45;
  --text-body: 1rem;
  --text-body--line-height: 1.6;
  --text-small: 0.875rem;
  --text-small--line-height: 1.5;
  --text-label: 0.75rem;                                   /* 대문자 라벨 — Instrument Sans wdth 85 */
  --text-label--line-height: 1.3;

  --tracking-hero: -0.03em;
  --tracking-display: -0.02em;
  --tracking-label: 0.14em;
  --leading-body: 1.6;

  /* ── 간격 (4px 척도 + 이름 붙은 리듬) ───────────────────────── */
  --spacing: 0.25rem;
  --spacing-margin: clamp(1.25rem, 4vw, 4rem);             /* 바깥 여백 20 → 58px */
  --spacing-gutter: clamp(0.75rem, 1.7vw, 1.5rem);         /* 거터 12 → 24px */
  --spacing-header: 4rem;                                  /* 머리 높이 — 데스크톱 */
  --spacing-header-compact: 3.5rem;                        /* 머리 높이 — 모바일 */
  --spacing-band: 12.5rem;                                 /* 히어로 흰 띠 — 데스크톱 */
  --spacing-chip: clamp(0.75rem, 1.4vw, 1.25rem);          /* 판 안쪽 여백(숫자·비율 표) */
  --spacing-spread: clamp(4rem, 2rem + 6vw, 9rem);         /* 룩북 펼침면 사이 */
  --spacing-section: clamp(6rem, 3rem + 9vw, 12rem);       /* 구간 사이 */

  /* ── 모서리 · 그림자 ───────────────────────────────────────── */
  --radius-none: 0;                                        /* 모든 판·버튼·칸은 직각 */
  --radius-dot: 50%;                                       /* 색 선택 점만 */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #111111;    /* 유일한 그림자 = 초점 고리 (어느 판 위에서도 보인다) */

  /* ── 비율 ─────────────────────────────────────────────────── */
  --aspect-hero-wide: 16 / 9;
  --aspect-hero: 3 / 4;
  --aspect-look: 4 / 5;
  --aspect-look-tall: 2 / 3;
  --aspect-product: 3 / 4;
  --aspect-detail: 3 / 2;

  /* ── 구간점 (미디어 쿼리 값의 기록 — CSS 변수는 쿼리에 못 쓴다) ── */
  --breakpoint-md: 48rem;      /* 768 — 이 밑은 모바일 배치 */
  --breakpoint-lg: 68.75rem;   /* 1100 — 이 위는 12열 데스크톱 */
  --container-prose: 38rem;

  /* ── 움직임 ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);               /* Reveal · Scroll reveal · Crossfade */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);           /* Accordion / Collapse */
  --ease-hand: cubic-bezier(0.5, 0, 0.1, 1);               /* 그림자 시침 Rotate — 느리게 떠나 확실히 멈춘다, 넘침 없음 */
  --default-transition-duration: 200ms;
  --default-transition-timing-function: var(--ease-out);
  --animate-reveal: noon-reveal 900ms var(--ease-out) both;  /* 히어로 판 — 로드 때 한 번 */
  --animate-rise: noon-rise 700ms var(--ease-out) 150ms both; /* 히어로 제목 */
}

@keyframes noon-reveal {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes noon-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --default-transition-duration: 0ms;
    --animate-reveal: none;
    --animate-rise: none;
  }
}