/* ═══════════════════════════════════════════════════
   FARO Design Tokens v2.0 — tokens.css
   브레이크포인트: mobile 0-767 | tablet 768-1023 | desktop 1024+ | wide 1280+
   폰트 최소값: 15px (공개 페이지 가독 텍스트 기준, h1/h2/h3 제외)
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── 브랜드 팔레트 ─── */
  --ink:       #18130f;
  --brown:     #261d17;
  --ivory:     #f8f3ea;
  --paper:     #fffaf3;
  --cream:     #efe5d8;
  --gold:      #a8875d;
  --champ:     #c7aa72;
  --muted:     #706052;
  --line:      rgba(38, 29, 22, .12);
  --line-gold: rgba(168, 135, 93, .32);

  /* ─── 시맨틱 색상 ─── */
  --color-primary:     #a8875d;
  --color-secondary:   #c7aa72;
  --color-bg:          #f8f3ea;
  --color-surface:     rgba(255, 255, 255, .64);
  --color-text:        #18130f;
  --color-muted:       #706052;
  --color-border:      rgba(38, 29, 22, .12);
  --color-border-gold: rgba(168, 135, 93, .32);

  /* 하위 호환 별칭 */
  --main-color:    var(--color-primary);
  --sub-color:     var(--color-secondary);
  --bg-color:      var(--color-bg);
  --surface-color: var(--color-surface);
  --muted-text:    var(--color-muted);
  --border-color:  var(--color-border);

  /* ─── 서체 ─── */
  --serif: Georgia, 'Times New Roman', 'Noto Serif KR', serif;
  --sans:  'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', Arial, sans-serif;

  /* ─── 타이포그래피 역할별 유체 스케일 (clamp — 뷰포트 전 구간 연속 확대, 구간별 재정의 금지) ─── */
  --font-body:     clamp(15px, 1.1vw, 16px);   /* Body */
  --font-h3:       clamp(18px, 1.8vw, 24px);   /* Point / Card Title */
  --font-subtitle: clamp(22px, 2.4vw, 32px);   /* Sub Title */
  --font-h2:       clamp(30px, 3.5vw, 46px);   /* Section Title */
  --font-h1:       clamp(40px, 5vw, 64px);     /* Hero Title */
  --font-hero:     clamp(40px, 5vw, 64px);     /* Hero Title (Home 히어로 h1 전용 — h1과 동일 역할) */
  --font-display:  48px;   /* 숫자 통계 전용 — 본문 타이포 시스템과 별도 유지 */

  /* 레거시 토큰 (14px 이상으로 상향) */
  --text-xs:    15px;  /* 구 10.5px → 14px → 15px(최소 가독 기준) */
  --text-sm:    14px;  /* 구 11.5px */
  --text-base:  16px;  /* 구 13.5px */
  --text-md:    17px;  /* 구 16px   */
  --text-lg:    20px;  /* 구 23px   h3 모바일 */
  --text-xl:    26px;  /* 구 34px   h2 모바일 */
  --text-2xl:   32px;  /* 구 50px   h1 모바일 */

  /* ─── 간격 스케일 (디자인 시스템 1~10) ───
     1~4는 기존 값과 동일해 그대로 유지. 5~8은 기존에 20/24/28/32px로 정의되어 있었으나
     --space-5는 header/.button/.store-controls 3곳에서 20px로 실사용 중이었어서
     해당 3곳을 리터럴 20px로 먼저 분리한 뒤 여기서 새 값으로 갱신(회귀 없음 확인).
     --space-6/7/8/10은 실사용처 0건 확인 후 갱신. --space-9는 신규. */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  96px;

  /* ─── 섹션 여백: 기존 단일 반응형 토큰(브레이크포인트마다 mobile.css에서 재대입, .section/.store-controls가 사용 중 — 무수정) ─── */
  --section-px: 20px;  /* 모바일 좌우 패딩 */
  --section-py: 64px;  /* 모바일 상하 패딩 */

  /* ─── 섹션 여백: 신규 브레이크포인트별 확정 토큰 (1차는 정의만, 개별 섹션 연결은 2차) ─── */
  --section-py-mobile:  56px;
  --section-py-tablet:  72px;
  --section-py-desktop: 88px;
  --section-py-compact-mobile:  48px;
  --section-py-compact-tablet:  56px;
  --section-py-compact-desktop: 72px;

  /* ─── 컨테이너 ─── */
  --container-wide:      1200px;
  --container-copy:      640px;
  --container-copy-wide: 680px;
  --container-card:      420px;
  --container-narrow:    340px;  /* 기존 880px 정의는 실사용처 없어 신규 값으로 갱신 */

  /* ─── 헤더 높이 ─── */
  --header-height-mobile:  60px;
  --header-height-desktop: 72px;
  --header-height: var(--header-height-mobile);

  /* ─── 네비게이션 ─── */
  --nav-height: 0px;

  /* ─── 둥근 모서리 ─── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ─── Hero 텍스트 보호 그라데이션 (전 페이지 공통 — redesign.css hero 규칙) ───
     방향만 구간별로 다름: 좌우 배치(768+)=90deg 좌측 세로 밴드, 상하 배치(~767)=180deg 상단 가로 밴드 */
  --hero-protect-stops:
    rgba(245, 239, 230, .96) 0%,
    rgba(233, 221, 204, .92) 55%,
    rgba(226, 211, 190, .74) 72%,
    rgba(218, 198, 168, .42) 86%,
    rgba(216, 194, 160, 0) 100%;
  --hero-band-width: clamp(400px, 55vw, 720px);          /* 768–1023 좌측 밴드 폭 */
  --hero-band-width-desktop: clamp(560px, 48vw, 760px);  /* 1024+ 좌측 밴드 폭 */
  --hero-top-band-height: 400px;                         /* ~767 상단 밴드 높이 — 히어로 CTA 버튼 하단 + 24px 여유 커버 기준(WHY 실측 필요치 392px) */

  /* ─── 서브페이지 hero 공통 프레임 (Home 제외 — Collection/WHY/Craft/B&A/Stores/Consult) ───
     같은 화면 폭에서는 높이·텍스트 위치/폭·이미지 표시 방식이 전부 동일해야 한다 (페이지별 예외 금지) */
  --subhero-min-h-pc: 560px;
  --subhero-min-h-tab: 420px;
  --subhero-min-h-mo: clamp(540px, 72svh, 640px);
  --subhero-copy-w-pc: 640px;
  --subhero-copy-w-tab: 520px;
  --subhero-copy-pad-pc: 64px 48px 64px clamp(48px, calc((100vw - 1080px) / 2), 120px);
  --subhero-copy-pad-tab: 48px 40px;
  --subhero-img-pos: 68% center;

  /* ─── 그림자 ─── */
  --shadow-sm:   0 2px 8px rgba(42, 29, 18, .07);
  --shadow-card: 0 4px 24px rgba(42, 29, 18, .09);
  --shadow:      0 8px 40px rgba(42, 29, 18, .11);
  --shadow-lg:   0 20px 60px rgba(42, 29, 18, .13);

  /* ─── 모션 ─── */
  --ease:          cubic-bezier(.22, .8, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --duration-fast: 150ms;
  --duration:      280ms;
  --duration-slow: 380ms;
}