/* ============================================================
   한돈투데이 · 디자인 토큰 v1.0
   ============================================================
   모든 CSS의 가장 앞에서 로드되는 단일 진실 소스(SSOT).
   페이지·컴포넌트 어디서나 var(--token-name)으로 사용.

   변경 정책:
   - 추가는 자유 (기존 토큰 깨지 않게)
   - 변경·삭제는 SYNC_DOC.md 4번 디자인 토큰도 함께 수정
============================================================ */

:root {
  /* ─── Surfaces ───────────────────────────────────────────── */
  --bg: #fbfaf7;                /* 페이지 기본 배경 */
  --paper: #ffffff;             /* 카드·박스 배경 */
  --line-soft: #f0ede4;         /* 호버 배경·강조 박스 */
  --line: #e9e6dc;              /* 구분선·테두리 */

  /* ─── Text ───────────────────────────────────────────────── */
  --ink: #0e0e10;               /* 제목·헤더·통계 스트립 */
  --ink-2: #1c1c20;             /* 티커 배경·본문 강조 */
  --ink-soft: #5c5c64;          /* 본문·부제목 */
  --muted: #9a9aa3;             /* 보조 텍스트·메타 */

  /* ─── Accent ─────────────────────────────────────────────── */
  --accent: #c0392b;            /* 와인레드 · 핵심 강조 */
  --accent-soft: #fdf2ef;       /* 국내 칩 배경 */
  --warm: #f4a261;              /* 다크 영역 강조 */
  --highlight: #fef3c7;         /* HOT 배지·본문 형광펜 */
  --success: #2d6a4f;
  --error: #c0392b;

  /* ─── Categories (5색) ───────────────────────────────────── */
  --cat-domestic: #c0392b;      /* 국내 */
  --cat-global: #1e6091;        /* 글로벌 */
  --cat-market: #b85c00;        /* 시장·돈가 */
  --cat-policy: #5a3a8a;        /* 정책 */
  --cat-tech: #2d6a4f;          /* 기술·연구 */

  /* ─── Typography ─────────────────────────────────────────── */
  --font-serif: 'Instrument Serif', 'Noto Serif KR', Georgia, serif;
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;

  /* ─── Spacing — 4의 배수 ────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-base: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ─── Radius ─────────────────────────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 100px;

  /* ─── Layout ─────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-max-wide: 1480px;
  --container-pad-x: 32px;
  --container-pad-x-mobile: 20px;

  /* ─── Z-index ────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 10;
  --z-header: 50;
  --z-modal: 100;

  /* ─── Transitions ────────────────────────────────────────── */
  --t-fast: 120ms ease;
  --t-base: 150ms ease;
  --t-slow: 250ms ease;
}