/* ─────────────────────────────────────────────────────────────
 * tokens.css — Pattern Atlas
 * Neutral Modern 디자인 시스템 토큰 계약.
 * 이 파일 밖에서는 raw hex 사용 금지. 모든 색은 var(--*) 참조.
 *
 * 3개의 축을 지원한다:
 *   1) data-theme="light" | "dark"   — 테마
 *   2) data-font="sans" | "serif"    — 본문/디스플레이 서체
 *   3) 반응형 컨테이너/섹션 리듬 토큰
 * ───────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface (3 levels) ───────────────────────────────────── */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-warm: var(--surface);

  /* ─── Foreground ramp (4 levels) ───────────────────────────── */
  --fg: #111111;
  --fg-2: var(--fg);
  --muted: #6b6b6b;
  --meta: var(--muted);

  /* ─── Border (2 levels) ────────────────────────────────────── */
  --border: #e5e5e5;
  --border-soft: var(--border);

  /* ─── Accent ───────────────────────────────────────────────── */
  --accent: #2f6feb;
  --accent-on: #ffffff;
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  /* ─── Semantic ─────────────────────────────────────────────── */
  --success: #17a34a;
  --warn: #eab308;
  --danger: #dc2626;

  /* ─── Typography ───────────────────────────────────────────── */
  --font-display: "Inter", -apple-system, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --text-4xl: 64px;

  --leading-body: 1.5;
  --leading-tight: 1.2;
  --tracking-display: -0.01em;

  /* ─── Spacing ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;

  --section-y-desktop: 80px;
  --section-y-tablet: 48px;
  --section-y-phone: 32px;

  /* ─── Radius ───────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* ─── Elevation ────────────────────────────────────────────── */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);

  /* ─── Focus ────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);

  /* ─── Motion ───────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ───────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-gutter-desktop: 24px;
  --container-gutter-tablet: 16px;
  --container-gutter-phone: 12px;
}

/* ─────────────────────────────────────────────────────────────
 * 테마 축 — light
 * 브리프 요구: "따뜻한 밝은 톤". Neutral Modern의 #FAFAFA 를
 * 벗어나지 않으면서 warm tier 만 살짝 분리해 카드 대비를 만든다.
 * 새 hex 를 발명하지 않고 토큰끼리 color-mix 로 파생시킨다.
 * ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-warm: color-mix(in oklab, var(--surface), var(--warn) 4%);
  --fg: #111111;
  --fg-2: color-mix(in oklab, var(--fg), var(--bg) 18%);
  --muted: #6b6b6b;
  --meta: color-mix(in oklab, var(--muted), var(--bg) 22%);
  --border: #e5e5e5;
  --border-soft: color-mix(in oklab, var(--border), var(--bg) 45%);
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);
}

/* ─────────────────────────────────────────────────────────────
 * 테마 축 — dark
 * "차분한 다크". 네온 금지 → 채도를 올리지 않고, 코발트 액센트를
 * 어두운 배경에서 읽히도록 배경과 섞어 밝기만 조정한다.
 * ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  /* 차분한 뉴트럴 다크. 채도를 얹지 않아 네온으로 기울지 않는다. */
  --bg: #1a1a1a;
  --surface: #222222;
  --surface-warm: color-mix(in oklab, var(--surface), var(--warn) 3%);
  --fg: #f2f2f2;
  --fg-2: color-mix(in oklab, var(--fg), var(--bg) 18%);
  --muted: #9a9a9a;
  --meta: color-mix(in oklab, var(--muted), var(--bg) 22%);
  --border: #2e2e2e;
  --border-soft: color-mix(in oklab, var(--border), var(--bg) 45%);
  --accent: color-mix(in oklab, #2f6feb, white 14%);
  --accent-on: #0f0f0f;
  --accent-hover: color-mix(in oklab, var(--accent), white 8%);
  --accent-active: color-mix(in oklab, var(--accent), white 14%);
  --elev-raised: 0 2px 8px color-mix(in oklab, black, transparent 60%);
}

/* ─────────────────────────────────────────────────────────────
 * 서체 축
 * sans  = Neutral Modern 기본 (Inter / system)
 * serif = 디스플레이만 세리프로 교체. 본문은 sans 유지해서
 *         디스플레이/본문 패밀리가 겹치지 않게 한다.
 * ───────────────────────────────────────────────────────────── */
:root[data-font="sans"] {
  --font-display: "Inter", -apple-system, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
}

:root[data-font="serif"] {
  --font-display: "Iowan Old Style", "Charter", "Source Serif 4", Georgia, serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
}

/* 한국어 본문은 시스템 한글 스택을 앞에 세워 자간이 무너지지 않게 한다.
 * 영문(lang="en")일 때는 이 오버라이드가 적용되지 않으므로
 * 위쪽 data-font 규칙의 라틴 스택이 그대로 유지된다. */
:root[lang="ko"] {
  --font-body: "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic",
    -apple-system, system-ui, sans-serif;
}

:root[lang="ko"][data-font="sans"] {
  --font-display: "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic",
    -apple-system, system-ui, sans-serif;
}

/* 한글 명조는 라틴 세리프보다 먼저 오되, 라틴 글자는 뒤 스택이 받는다. */
:root[lang="ko"][data-font="serif"] {
  --font-display: "Apple SD Gothic Neo", "Nanum Myeongjo", "Iowan Old Style",
    Georgia, serif;
}