/* ==========================================================================
   무월(霧月) — 3단계 디자인 토큰
   프리셋: quiet-commerce (커스텀, 02-direction.md 참조)
   ========================================================================== */

:root {
  /* ---- 타입 — 비율 1.333 (Perfect Fourth), 본문 16px 기준 ---------------
     tokens.md §6은 --step--1 ~ --step-5 (7단계)를 산출물로 요구한다.
     antipatterns.md §2는 "3~5단계로 제한"을 권한다.
     → 7개를 정의하되 화면에서 실제로 쓰는 것은 4개다:
        --step--1(라벨) / --step-0(본문) / --step-2(소제목) / --step-5(디스플레이)
        나머지 3개는 예약. 쓰려면 이 주석을 지우고 역할을 적어라.  (FINDINGS F6)  */
  --step--1: 0.75rem;                                          /* 12 — 라벨·캡션 [사용] */
  --step-0:  1rem;                                             /* 16 — 본문        [사용] */
  --step-1:  1.333rem;                                         /* 21 — 예약 */
  --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 1.777rem);         /* 28 — 소제목      [사용] */
  --step-3:  2.369rem;                                         /* 38 — 예약 */
  --step-4:  3.157rem;                                         /* 51 — 예약 */
  --step-5:  clamp(2.25rem, 1.3rem + 4.75vw, 4.209rem);        /* 67 — 디스플레이  [사용] */
  /* 최대(67) ÷ 본문(16) = 4.2배  — antipatterns.md §2 "최대/본문 4배 이상" 통과 */

  --leading-tight:  1.25;   /* 디스플레이 — 한글이라 라틴 1.1보다 높게 */
  --leading-normal: 1.7;    /* 본문 — 한글 1.6~1.8 규칙 */
  --measure: 32ch;          /* 한글 32자. R2 관측 522px과 수렴 */

  --font-display: 'Fraunces', 'Pretendard Variable', Pretendard, serif;
  --font-body:    'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  /* 폰트 파일 2개 (tokens.md §5 예산 준수).
     Switzer(라틴 본문)와 마루 부리(한글 디스플레이)를 의도적으로 버렸다 — 사유는 아래 성능 예산 주석. */

  /* ---- 색 — 역할별. hue 2개(중립 + 강조) --------------------------------
     surface: 안개 낀 종이. 순백 아님, 크림/베이지도 아님(antipatterns §1).
     accent : 로스팅된 원두 갈색. 보라·인디고 계열 아님(최우선 지문 1위 회피). */
  --surface:        #F3F4F2;
  --surface-raised: #EAEBE7;
  --ink:            #1A1C1A;   /* 순흑 아님 */
  --ink-muted:      #5C605B;
  --line:           #D6D8D3;   /* 장식용 구분선 (텍스트·UI 아님) */
  --line-strong:    #868C83;   /* 인터랙티브 요소 경계 — 3:1 필요 */
  --accent:         #7A3E1D;
  --accent-ink:     #F3F4F2;

  /* 측정된 대비비 (계산식 WCAG 2.x relative luminance)
     --ink        on --surface        15.54:1  ✓ 본문 4.5:1
     --ink        on --surface-raised 14.32:1  ✓
     --ink-muted  on --surface         5.80:1  ✓
     --ink-muted  on --surface-raised  5.35:1  ✓
     --accent     on --surface         7.51:1  ✓ 링크 텍스트
     --accent-ink on --accent          7.51:1  ✓ CTA 내부 텍스트
     --line-strong on --surface        3.12:1  ✓ UI 3:1
     --line       on --surface         1.30:1  — 장식 전용. 텍스트·인터랙티브 경계에 쓰지 마라 */

  /* 다크 모드: 브리프에 근거 없음 → 지원하지 않는다. (가정 명시) */

  /* ---- 간격 — 8px 리듬 ------------------------------------------------- */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 1rem;     /*  16 */
  --space-4: 1.5rem;   /*  24 */
  --space-5: 2.5rem;   /*  40 — 요소 간 */
  --space-6: 4rem;     /*  64 */
  --space-7: 6rem;     /*  96 */
  --space-8: 10rem;    /* 160 — 섹션 간. 요소 간(40) 대비 1:4 */

  /* ---- 형태 ------------------------------------------------------------
     tokens.md §6 산출물 형식에 radius 항목이 없다. 그런데 SKILL.md 하드 게이트 3이
     "코너 반경이 규칙 없이 섞여 있는가"를 묻고 antipatterns.md §4는 어휘 2개를 요구한다.
     → 토큰을 직접 추가한다. (FINDINGS F8) */
  --radius-container:   2px;   /* 표·패널 — 인쇄물 감각이라 거의 각지게 */
  --radius-interactive: 2px;   /* 버튼·입력 — 컨테이너와 같게 통일 */

  --container: 1120px;      /* R1의 풀블리드 0.99를 축소한 값 */
  --pad-inline: clamp(1.25rem, 1rem + 2vw, 5rem);  /* 모바일 20px → 데스크톱 80px */

  /* ---- 모션 ------------------------------------------------------------ */
  --dur-instant: 100ms;
  --dur-quick:   200ms;
  --dur-normal:  350ms;
  --dur-slow:    600ms;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- 재질 (svg-filters.md) ------------------------------------------- */
  --grain: 0.03;   /* 최약. 오프화이트 배경의 밴딩 제거용 */
}

/* ==========================================================================
   성능 예산 = JS 0KB / 첫 인터랙션 3초 (모바일 4G)
   - 프레임워크 없음. R3 모션은 CSS scroll-driven이라 JS 0바이트
   - 폰트 파일 2개: Fraunces(latin 서브셋) + Pretendard Variable(korean+latin 서브셋)
     · tokens.md §5 "폰트 2개 이하"를 지키기 위해 4개 후보 중 2개를 버렸다.
       버린 것: Switzer(라틴 본문) → Pretendard의 라틴으로 대체
                마루 부리(한글 디스플레이) → Pretendard 700으로 대체
     · antipatterns.md §8 "라틴 폰트를 폴백 앞에" 규칙은 --font-display에서만 지킨다.
       --font-body는 Pretendard가 앞이지만, Pretendard는 자체 라틴 글리프를 포함하므로
       한글 폰트로 라틴이 조악하게 그려지는 문제가 없다. (예외 근거 명시)  (FINDINGS F7)
   - 이미지 없음(브리프 제약) → 이미지 예산 0
   - 애니메이션 속성: transform / opacity 만
   ========================================================================== */