/* ==========================================================================
   HAKUSHI Design Tokens
   미슐랭 1스타 일식당 하쿠시 — 디자인 시스템 단일 출처
   이 파일은 향후 워드프레스 theme.json으로 1:1 매핑됨.
   ========================================================================== */

/* Greg Company 로고 폰트 (Avenir Next Demi) — 푸터 credit에 사용 */
@font-face {
  font-family: 'AvenirNext';
  src: url('../fonts/AvenirNextCyr-Demi.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color Palette ---------- */
  --color-bg: #FFFFFF;            /* White — 메인 배경 */
  --color-fg: #0A0A0A;            /* Deep Black — 본문/타이틀 */
  --color-fg-soft: #2A2A2A;       /* 보조 텍스트 */
  --color-accent: #A6192E;        /* Michelin Red (공식 별 로고에서 샘플링) — 별·CTA 호버 등 절제 사용 */
  --color-muted: #F4F2EE;         /* Off-white — 섹션 구분용 옅은 베이지톤 */
  --color-border: #E5E5E5;        /* 라인·구분선 */

  /* 스크롤 배경 전환 단계 — 백지(白紙)에서 옅은 종이 톤으로 자연스럽게 흐름 (moah.studio식) */
  --bg-step-hero:  #FFFFFF;       /* Hero — 순백 (백지) */
  --bg-step-strip: #121212;       /* 공간 사진 — 블랙에 가깝게 (먹, 사진이 떠오르도록) */
  --bg-step-intro:   #D8D0BE;     /* 쉐프+인용 공용 - 그레이지 탄 (사용자 지정 #d8d0be). 인용 섹션도 이 토큰 사용 → 끊김 없는 한 블록 */
  --bg-step-courses: #EEE9E0;     /* Menu  - 무광 베이지 (사용자 선택 M3) */
  --color-overlay: rgba(10, 10, 10, 0.4);  /* 이미지 오버레이 */

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", "Noto Serif KR", "Nanum Myeongjo",
                  "Apple SD Gothic Neo", "Iowan Old Style", Georgia, serif;
  --font-body: "Pretendard", "Pretendard Variable", "Noto Sans KR",
               -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace;

  --fs-display-xl: clamp(3.5rem, 7vw, 6rem);      /* 56-96px — 히어로 타이틀 */
  --fs-display-lg: clamp(2.5rem, 5vw, 4rem);       /* 40-64px — 섹션 헤드라인 */
  --fs-display-md: clamp(1.875rem, 3.5vw, 2.75rem); /* 30-44px */
  --fs-display-sm: clamp(1.375rem, 2.2vw, 1.75rem); /* 22-28px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-body: 1rem;          /* 16px */
  --fs-body-sm: 0.875rem;   /* 14px */
  --fs-caption: 0.75rem;    /* 12px — 캡션·라벨 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;
  --lh-loose: 1.8;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.15em;       /* 라벨·캡션 — 대문자 라벨에 적합 */

  /* ---------- Spacing (8pt grid) ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 128px;
  --space-8: 192px;

  /* ---------- Layout ---------- */
  --container-wide: 1280px;       /* 일반 와이드 컨텐츠 */
  --container-content: 720px;     /* 본문/긴 텍스트 */
  --container-narrow: 560px;      /* 카피·인용구 */
  --gutter: clamp(1.5rem, 4vw, 3rem);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 600ms;

  /* ---------- Borders ---------- */
  --border-thin: 1px solid var(--color-border);
  --border-accent: 1px solid var(--color-accent);
}