/* ==========================================================================
 * EBOOK-WEB DESIGN TOKENS & MODERN WEB CSS STANDARDS (Angular 22.2 + Tailwind 4)
 * - Warm Modern Editorial Library (Daylight Sanctuary & Candlelight Study)
 * - Modern CSS: color-scheme, light-dark(), scrollbar-color, accent-color, text-wrap
 * ========================================================================== */
:root,
:root[data-ui-theme="sanctuary"] {
  color-scheme: light dark;
  --bg-canvas: #faf8f5;
  --bg-canvas-gradient: linear-gradient(180deg, #fcfbf9 0%, #faf8f5 100%);
  --bg-surface: #ffffff;
  --bg-elevated: #f3f0ea;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --surface-adaptive: light-dark(#ffffff, #1e1d1b);
  --text-adaptive: light-dark(#1c1917, #edeae4);
  --fg-primary: #1c1917;
  --fg-secondary: #44403c;
  --fg-muted: #78716c;
  --border: #e7e2da;
  --border-strong: #d6cfc4;
  --nav-bg: rgba(245, 242, 236, 0.92);
  --nav-bg-elevated: #eae5dc;
  --nav-fg: #1c1917;
  --nav-muted: #78716c;
  --nav-border: #e5dfd5;
  --primary: #2d4a3e;
  --primary-hover: #21382e;
  --primary-fg: #ffffff;
  --accent-gold: #b08968;
  --accent-gold-soft: #f5ebe1;
  --accent-sage: #2d4a3e;
  --accent-sage-soft: #eaf0ec;
  --shelf-plank: linear-gradient(180deg, #ebe5dc 0%, #dfd7cb 100%);
  --shelf-lip: #d5ccc0;
  --shelf-shadow: 0 10px 22px -6px rgba(28, 25, 23, 0.08);
  --card-shadow: 0 4px 20px -2px rgba(28, 25, 23, 0.05);
  --danger-bg: #fef2f2;
  --danger-fg: #b91c1c;
  --danger-border: #fecaca;
  --success-bg: #ecfdf5;
  --success-fg: #065f46;
  --success-border: #a7f3d0;
  --warning-fg: #8c5e3c;
  accent-color: var(--primary);
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

:root[data-ui-theme="candlelight"] {
  color-scheme: dark;
  --bg-canvas: #141413;
  --bg-canvas-gradient: linear-gradient(180deg, #181716 0%, #141413 100%);
  --bg-surface: #1e1d1b;
  --bg-elevated: #272522;
  --bg-glass: rgba(30, 29, 27, 0.92);
  --surface-adaptive: light-dark(#ffffff, #1e1d1b);
  --text-adaptive: light-dark(#1c1917, #edeae4);
  --fg-primary: #edeae4;
  --fg-secondary: #c7c2b8;
  --fg-muted: #8f8a80;
  --border: #2c2a27;
  --border-strong: #3d3a35;
  --nav-bg: rgba(24, 23, 21, 0.94);
  --nav-bg-elevated: #262421;
  --nav-fg: #edeae4;
  --nav-muted: #9a948a;
  --nav-border: #2a2825;
  --primary: #c8a97e;
  --primary-hover: #d7b98e;
  --primary-fg: #181614;
  --accent-gold: #c8a97e;
  --accent-gold-soft: #2e2820;
  --accent-sage: #6b9e88;
  --accent-sage-soft: #1d2b25;
  --shelf-plank: linear-gradient(180deg, #2b2925 0%, #22201d 100%);
  --shelf-lip: #383530;
  --shelf-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.55);
  --card-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
  --danger-bg: rgba(239, 68, 68, 0.14);
  --danger-fg: #fca5a5;
  --danger-border: rgba(239, 68, 68, 0.32);
  --success-bg: rgba(16, 185, 129, 0.14);
  --success-fg: #6ee7b7;
  --success-border: rgba(16, 185, 129, 0.32);
  --warning-fg: #e0b882;
  accent-color: var(--primary);
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Noto Sans KR",
    "Noto Sans SC",
    "Noto Sans TC",
    system-ui,
    sans-serif;
  background: var(--bg-canvas);
  background-image: var(--bg-canvas-gradient);
  color: var(--fg-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Noto Sans KR",
    sans-serif;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.serif-heading {
  font-family:
    "Merriweather", "Noto Serif KR", "Noto Serif SC", "Noto Serif TC", Georgia,
    serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p,
blockquote,
li {
  text-wrap: pretty;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}