/* ===== 사주헌(四柱軒) 디자인 토큰 ===== */
/* visual-identity.md 기반 */

:root {
  /* ── 먹색 (墨色) ── */
  --ink-deep: #1A1A1A;
  --ink-medium: #3D3D3D;
  --ink-light: #6B6B6B;

  /* ── 한지색 (韓紙色) ── */
  --hanji-warm: #F5F0E8;
  --hanji-natural: #EDE7DB;
  --hanji-aged: #D8D0C2;

  /* ── 금박 (金箔) ── */
  --gold-accent: #B8860B;
  --gold-subtle: #C9A84C;
  --gold-muted: #E8D5A3;

  /* ── 주홍 (朱紅) ── */
  --vermillion: #C4453C;
  --vermillion-soft: #D4694A;

  /* ── 시맨틱 ── */
  --success: #4A7C59;
  --warning: #B8860B;
  --error: #C4453C;
  --info: #3D3D3D;

  /* ── 오행 (五行) ── */
  --wood: #4A7C59;
  --fire: #C4453C;
  --earth: #B8860B;
  --metal: #6B6B6B;
  --water: #3D6B8A;

  /* ── 시맨틱 매핑 ── */
  --bg-primary: var(--hanji-warm);
  --bg-secondary: var(--hanji-natural);
  --bg-tertiary: var(--hanji-aged);
  --fg-primary: var(--ink-deep);
  --fg-secondary: var(--ink-medium);
  --fg-tertiary: var(--ink-light);
  --border-color: var(--hanji-aged);

  /* ── 서체 ── */
  --font-serif: 'Noto Serif KR', 'Cormorant Garamond', serif;
  --font-sans: 'Noto Sans KR', 'Inter', sans-serif;

  /* ── 타입 스케일 ── */
  --text-display: 1.75rem;
  --text-heading: 1.375rem;
  --text-subheading: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-tiny: 0.75rem;

  /* ── 여백 (8px 기반) ── */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  /* alias (스펙 호환) */
  --space-2xl: var(--space-xxl);
  --space-3xl: var(--space-xxxl);

  /* ── 행간 ── */
  --leading-body: 1.8;
  --leading-heading: 1.3;

  /* ── 그림자 ── */
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 2px 8px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 4px 16px rgba(26, 26, 26, 0.12);

  /* ── 모서리 ── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ── 레이아웃 ── */
  --max-container: 768px;
  --max-content: 640px;
  --max-card: 480px;

  /* ── 전환 ── */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
}

/* ── 다크 모드 (야간 서재) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1A1A1A;
    --bg-secondary: #252525;
    --bg-tertiary: #333333;
    --fg-primary: #F5F0E8;
    --fg-secondary: #D8D0C2;
    --fg-tertiary: #8A8078;
    --gold-accent: #C9A84C;
    --border-color: #3D3D3D;
  }
}

/* ── 데스크톱 타입 스케일 ── */
@media (min-width: 768px) {
  :root {
    --text-display: 2.25rem;
    --text-heading: 1.75rem;
    --text-subheading: 1.375rem;
    --text-body: 1.0625rem;
  }
}

/* ── 모션 감소 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}