/* 디자인 토큰 SSOT — docs/02-brand-design.md §3·§5·§6이 의미를 정의하고, 값은 이 파일이 정본이다. */

:root {
  /* 색 — 「오래 쓴 나무 상자와 그 안의 종이」 (§3) */
  --ch-bg: #fbf8f3;
  --ch-surface: #ffffff;
  --ch-surface-sunken: #f2ede4;
  --ch-border: #e3dacb;
  --ch-text: #241f1a;
  --ch-text-muted: #6b6155;
  --ch-primary: #7a5c3e;
  --ch-primary-ink: #ffffff;
  --ch-accent: #2f6b5e;
  --ch-success: #2f6b5e;
  --ch-warning: #8a6412;
  --ch-danger: #9b3b2e;

  /* 타이포 (§5) — 1종 + 웨이트 4단 + tabular-nums */
  --ch-font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo",
    "Noto Sans KR", sans-serif;
  --ch-display: 700 2.125rem/1.2 var(--ch-font);
  --ch-title: 600 1.375rem/1.35 var(--ch-font);
  --ch-body: 400 1.0625rem/1.6 var(--ch-font);
  --ch-body-lg: 400 1.25rem/1.6 var(--ch-font); /* 관객 뷰 하한 20px */
  --ch-caption: 400 0.875rem/1.5 var(--ch-font);
  --ch-label: 500 0.8125rem/1.4 var(--ch-font);

  /* 공간 */
  --ch-sp-1: 4px;
  --ch-sp-2: 8px;
  --ch-sp-3: 12px;
  --ch-sp-4: 16px;
  --ch-sp-6: 24px;
  --ch-sp-8: 32px;
  --ch-sp-12: 48px;
  --ch-radius: 12px;
  --ch-radius-sm: 8px;

  /* 모션 (§6) */
  --ch-motion-enter: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ch-motion-switch: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --ch-motion-success: 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ch-bg: #14120f;
    --ch-surface: #1e1b17;
    --ch-surface-sunken: #0e0c0a;
    --ch-border: #332e27;
    --ch-text: #f3eee6;
    --ch-text-muted: #a79c8d;
    --ch-primary: #c9a176;
    --ch-primary-ink: #1a140e;
    --ch-accent: #6fbfa8;
    --ch-success: #6fbfa8;
    --ch-warning: #d6a93b;
    --ch-danger: #e08171;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ch-motion-enter: 0ms;
    --ch-motion-switch: 0ms;
    --ch-motion-success: 0ms;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 120ms !important;
  }
}

/* ── 리셋 + 기본 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ch-bg);
  color: var(--ch-text);
  font: var(--ch-body);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
:focus-visible {
  outline: 2px solid var(--ch-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.num {
  font-variant-numeric: tabular-nums;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}