/* ============================================================
   tokens.css — 소마코 디자인 토큰 (Single Source of Truth)
   ------------------------------------------------------------
   이 파일이 사이트 전역에서 "가장 먼저" 로드되는 단일 토큰 레이어다.
   색·폰트·radius·shadow·spacing·타입스케일의 정규(canonical) 정의처.

   원칙
   - 정규 네임스페이스 = --smk-* (가장 널리 쓰이던 이름을 그대로 정규로 승격).
   - 기존 --sh-* / --shv2-* 는 이 토큰을 가리키는 "별칭"으로 점진 전환한다(Phase 1).
   - 하드코딩 hex/px 는 화면별로 var(--smk-*) 로 점진 치환한다(Phase 2).
   - 여기 값을 바꾸면 토큰을 쓰는 모든 화면이 따라온다.

   주의
   - 본문 에디터 SandBox(iframe)는 이 파일을 로드하지 않는다 →
     block-patterns.php 의 인라인 :root 는 그대로 둔다(별도 SSOT, 값만 동기화).
   - 부모테마/DB Site Editor 팔레트 remap 리스크 회피를 위해, 정규 토큰은
     --wp--preset--* 에 의존하지 않고 "리터럴 값"으로 둔다. theme.json 은
     블록 에디터용으로 같은 값을 미러링한다(두 표면 각각의 SSOT, 값 동기화).
   ============================================================ */

:root {
  /* ─── 브랜드 / 액센트 (유지 키컬러: 빨강) ─── */
  --smk-red:        #d32f2f;
  --smk-red-dark:   #b71c1c;
  --smk-red-light:  #ffebee;
  --smk-red-soft:   #fff5f5;
  --smk-red-10:     rgba(211, 47, 47, 0.10);
  --smk-red-20:     rgba(211, 47, 47, 0.18);

  /* 본문 형광펜(.hl) — 콘텐츠 시맨틱 색. 모노 UI 액센트와 별개로 "형광펜=노랑"
     관습을 유지(빨강 형광은 삭제선/오류로 오독됨). 값 변경은 여기 한 곳 + 에디터
     iframe 동기화: block-patterns.php 의 인라인 .hl <style>. */
  --smk-hl:         #fff176;

  /* ─── 중성 (잉크 + 그레이 램프) ─── */
  /* 중성 = Radix "sand" (웜 그레이) — 종이 질감의 따뜻한 에디토리얼 톤 */
  --smk-dark:       #1b1a17;
  --smk-gray-900:   #21201c;
  --smk-gray-800:   #34332e;
  --smk-gray-700:   #4b4a45;
  --smk-gray-600:   #63635e;
  --smk-gray-500:   #82827c;
  --smk-gray-400:   #8d8d86;
  --smk-gray-300:   #cfceca;
  --smk-gray-200:   #dad9d6;
  --smk-gray-100:   #f1f0ef;
  --smk-gray-50:    #f9f9f8;
  --smk-white:      #ffffff;
  --smk-color-page: #fdfdfc;   /* 페이지 배경 (sand-1, 웜 오프화이트) */

  /* ─── 보조 색 → 완전 모노(빨강+무채색)로 중립화 ───
     기존 본문 컴포넌트(stat·pipeline 등)가 쓰던 파랑/초록/주황/보라를 무채색으로 매핑.
     "Red is the only accent" 원칙 복원. 색이 필요하면 빨강 또는 그레이만 사용. */
  --smk-blue:         var(--smk-gray-500);
  --smk-blue-light:   var(--smk-gray-100);
  --smk-green:        var(--smk-gray-500);
  --smk-green-light:  var(--smk-gray-100);
  --smk-amber:        var(--smk-gray-500);
  --smk-amber-light:  var(--smk-gray-100);
  --smk-purple:       var(--smk-gray-500);
  --smk-purple-light: var(--smk-gray-100);

  /* ─── 시맨틱 별칭 (의미 기반 — 신규, 점진 채택용) ─── */
  --smk-color-accent: var(--smk-red);
  --smk-color-fg:     var(--smk-dark);
  --smk-color-bg:     var(--smk-white);
  --smk-color-surface: var(--smk-gray-50);
  --smk-color-border: var(--smk-gray-200);
  --smk-color-border-strong: var(--smk-gray-300);
  --smk-color-muted:  var(--smk-gray-600);

  /* ─── 타이포 ─── */
  --smk-font-kr: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --smk-font-en: 'Manrope', 'DM Sans', sans-serif;

  /* 타입 스케일 (Radix — 약간 여유로운 에디토리얼 스케일) */
  --smk-text-xs:    0.75rem;    /* 12px  캡션·태그 */
  --smk-text-sm:    0.8125rem;  /* 13px  메타·날짜 */
  --smk-text-base:  1rem;       /* 16px  본문 기준 */
  --smk-text-md:    1.0625rem;  /* 17px  카드 제목 */
  --smk-text-lg:    1.1875rem;  /* 19px  강조 제목 */
  --smk-text-xl:    1.375rem;   /* 22px  섹션 제목 */
  --smk-text-2xl:   1.625rem;   /* 26px  히어로 제목 */
  --smk-text-3xl:   2rem;       /* 32px  대형 */

  /* 헤딩 트래킹 / 줄간격 (Radix — 여유로운 느낌) */
  --smk-heading-tracking: -0.01em;
  --smk-leading-tight:    1.45;
  --smk-leading:          1.7;

  /* 가중치 */
  --smk-weight-normal:   400;
  --smk-weight-medium:   500;
  --smk-weight-semibold: 600;
  --smk-weight-bold:     800;  /* 섹션 타이틀 (CLAUDE.md) */

  /* ─── 레이아웃 ─── */
  --smk-max-w:      1200px;

  /* ─── Spacing (4px 베이스 — 신규·점진 채택) ─── */
  --smk-space-1:  0.25rem;
  --smk-space-2:  0.5rem;
  --smk-space-3:  0.75rem;
  --smk-space-4:  1rem;
  --smk-space-5:  1.25rem;
  --smk-space-6:  1.5rem;
  --smk-space-8:  2rem;
  --smk-space-10: 2.5rem;
  --smk-space-16: 4rem;
  --smk-space-20: 5rem;
  --smk-section-gap: 5rem;   /* 섹션 간격 (모바일 2.5rem) */

  /* ─── Radius (Radix — 둥근 마감) ─── */
  --smk-radius-sm:   0.5rem;
  --smk-radius-md:   0.75rem;
  --smk-radius-lg:   1rem;      /* 카드/이미지 기본 (둥근) */
  --smk-radius-pill: 9999px;

  /* ─── Shadow (기본 없음, hover 시에만 — Radix: 부드럽고 따뜻한 확산) ─── */
  --smk-shadow-none:  none;
  --smk-shadow-hover: 0 2px 8px rgba(40, 33, 20, 0.05), 0 10px 28px rgba(40, 33, 20, 0.07);

  /* ─── 컴포넌트 성격 토큰 (Radix: 둥근 태그·바) ─── */
  --smk-tag-radius:    9999px;   /* 카테고리 태그 = pill */
  --smk-tag-transform: none;
  --smk-tag-tracking:  0.02em;
  --smk-bar-radius:    9999px;   /* 섹션 헤더 빨간 바 = 둥근 */

  /* ─── 모션 (CLAUDE.md: 0.2–0.4s ease) ─── */
  --smk-transition: 0.25s ease;
}

/* 모바일: 섹션 간격 축소 (CLAUDE.md: 모바일은 재설계) */
@media (max-width: 768px) {
  :root {
    --smk-section-gap: 2.5rem;
  }
}