/* =========================================================
   Trend Desk — Design Tokens
   모던 미니멀 + 에디토리얼 교차점
   라이트: 따뜻한 페이퍼 / 다크: 차분한 잉크
   ========================================================= */

:root {
  /* --- Color — Light (default) --- */
  --bg:           oklch(98% 0.012 85);          /* 따뜻한 페이퍼 */
  --bg-elev:      oklch(100% 0.006 85);         /* 카드 표면 */
  --surface:      oklch(100% 0.004 85);
  --fg:           oklch(22% 0.02 50);           /* 잉크 블랙 */
  --fg-soft:      oklch(35% 0.018 50);
  --muted:        oklch(52% 0.014 60);
  --border:       oklch(90% 0.008 80);
  --border-soft:  oklch(93% 0.006 80);
  --accent:       oklch(62% 0.13 55);           /* 토피 / 앰버 */
  --accent-soft:  oklch(94% 0.04 60);
  --highlight:    oklch(96% 0.06 95);           /* 옅은 하이라이트 */

  /* --- Semantic --- */
  --tag-bg:       oklch(95% 0.01 80);
  --tag-fg:       oklch(35% 0.02 50);
  --meta-fg:      oklch(50% 0.012 60);
  --rule:         oklch(88% 0.008 80);

  /* --- Typography --- */
  --font-serif:   'Iowan Old Style', 'Charter', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;

  --fs-display:   clamp(40px, 4.4vw, 64px);
  --fs-h1:        clamp(30px, 3.2vw, 44px);
  --fs-h2:        clamp(22px, 2.2vw, 28px);
  --fs-h3:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-meta:      12px;

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-body:      1.6;

  /* --- Spacing (8pt grid) --- */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      24px;
  --space-6:      32px;
  --space-7:      48px;
  --space-8:      64px;
  --space-9:      96px;

  /* --- Layout --- */
  --max-w:        1280px;
  --gap:          24px;
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    12px;

  /* --- Shadow — 차분하게 --- */
  --shadow-1:     0 1px 0 oklch(0% 0 0 / 0.04);
  --shadow-2:     0 8px 24px -16px oklch(20% 0.02 50 / 0.18);

  /* --- Misc --- */
  --duration:     180ms;
  --ease:         cubic-bezier(0.23, 1, 0.32, 1);
}

/* =========================================================
   Dark theme — 차분한 잉크. 네온 금지, 그라데이션 금지.
   ========================================================= */
[data-theme="dark"] {
  --bg:           oklch(15% 0.012 250);
  --bg-elev:      oklch(19% 0.014 250);
  --surface:      oklch(21% 0.014 250);
  --fg:           oklch(94% 0.008 80);
  --fg-soft:      oklch(82% 0.012 80);
  --muted:        oklch(62% 0.012 80);
  --border:       oklch(28% 0.014 250);
  --border-soft:  oklch(24% 0.012 250);
  --accent:       oklch(72% 0.12 70);
  --accent-soft:  oklch(28% 0.05 60);
  --highlight:    oklch(26% 0.04 70);

  --tag-bg:       oklch(24% 0.012 250);
  --tag-fg:       oklch(82% 0.014 80);
  --meta-fg:      oklch(60% 0.012 80);
  --rule:         oklch(26% 0.012 250);

  --shadow-1:     0 1px 0 oklch(0% 0 0 / 0.4);
  --shadow-2:     0 12px 32px -20px oklch(0% 0 0 / 0.6);
}

/* 폰트 토글: 모노 스택 (테크/유틸리티 무드) */
[data-font="mono"] {
  --font-serif:   var(--font-mono);
  --font-sans:    var(--font-mono);
}