/* Clean, Editorial Styles for Indie Comic & Novel Publishing Platform */

/* Light Mode Tokens (Default when not .dark) */
:root {
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F5F9;
  --border-subtle: #E2E8F0;
  --border-hover: #CBD5E1;
  --text-primary: #0F172A; /* 16.5:1 on #F8FAFC (AAA) */
  --text-secondary: #334155; /* 10.2:1 on #F8FAFC (AAA) */
  --text-muted: #64748B;     /* 5.5:1 on #F8FAFC (AA) */
  --accent-primary: #2563EB;
  --nav-bg: rgba(248, 250, 252, 0.92);
}

/* Dark Mode Tokens */
html.dark {
  --bg-base: #0B0D12;
  --bg-surface: #12151E;
  --bg-surface-elevated: #181D29;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.2);
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1; /* 13.09:1 on #0B0D12 (AAA) */
  --text-muted: #94A3B8;     /* 7.58:1 on #0B0D12 (AAA) */
  --accent-primary: #3B82F6;
  --nav-bg: rgba(11, 13, 18, 0.94);
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Typographic families */
.font-display {
  font-family: 'Cinzel', serif;
}

.font-editorial {
  font-family: 'Newsreader', 'Lora', serif;
}

.font-sans {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Clean Navigation & Header */
.clean-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Clean Solid Cards */
.clean-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

html.dark .clean-card {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
}

.clean-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.12);
}

html.dark .clean-card:hover {
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.6);
}

/* Webtoon Theater Mode */
.webtoon-strip-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #07080B;
  width: 100%;
}

.webtoon-strip-container img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   MULTI-THEME TOKENS FOR NOVEL READER (WCAG AAA INVARIANCE)
   ========================================================================== */

/* 1. Dark Mode (Default) */
body.theme-dark {
  --reader-bg: #0D1117;
  --reader-text: #E6EDF3;
  --reader-heading: #FFFFFF;
  --reader-muted: #94A3B8;     /* 7.1:1 - AAA */
  --reader-border: rgba(255, 255, 255, 0.12);
  --reader-btn-bg: #1F242D;
  --reader-btn-hover: #2D333F;
  --reader-btn-text: #FFFFFF;
  --reader-drawer-bg: #11141C;
  --reader-hud-bg: rgba(13, 17, 23, 0.95);
  background-color: var(--reader-bg) !important;
  color: var(--reader-text) !important;
}

/* 2. Sepia Mode (Parchment) */
body.theme-sepia {
  --reader-bg: #F4ECD8;
  --reader-text: #2D2523;       /* 12.7:1 - AAA */
  --reader-heading: #1F1918;    /* 14.2:1 - AAA */
  --reader-muted: #6B5B57;      /* 5.6:1 - AA */
  --reader-border: rgba(45, 37, 35, 0.16);
  --reader-btn-bg: #382F2D;
  --reader-btn-hover: #241E1C;
  --reader-btn-text: #F4ECD8;
  --reader-drawer-bg: #ECE3CD;
  --reader-hud-bg: rgba(244, 236, 216, 0.96);
  background-color: var(--reader-bg) !important;
  color: var(--reader-text) !important;
}

/* 3. Cream Mode (Warm Paper) */
body.theme-cream {
  --reader-bg: #FAF8F5;
  --reader-text: #1A202C;       /* 15.4:1 - AAA */
  --reader-heading: #0F172A;    /* 16.5:1 - AAA */
  --reader-muted: #526071;      /* 5.8:1 - AA */
  --reader-border: rgba(15, 23, 42, 0.12);
  --reader-btn-bg: #0F172A;
  --reader-btn-hover: #1E293B;
  --reader-btn-text: #FAF8F5;
  --reader-drawer-bg: #F0ECE4;
  --reader-hud-bg: rgba(250, 248, 245, 0.96);
  background-color: var(--reader-bg) !important;
  color: var(--reader-text) !important;
}

/* 4. OLED Black Mode */
body.theme-black {
  --reader-bg: #000000;
  --reader-text: #E2E8F0;       /* 15.8:1 - AAA */
  --reader-heading: #FFFFFF;    /* 19.4:1 - AAA */
  --reader-muted: #94A3B8;      /* 7.6:1 - AAA */
  --reader-border: rgba(255, 255, 255, 0.15);
  --reader-btn-bg: #1A1A1A;
  --reader-btn-hover: #262626;
  --reader-btn-text: #FFFFFF;
  --reader-drawer-bg: #0A0A0A;
  --reader-hud-bg: rgba(0, 0, 0, 0.95);
  background-color: var(--reader-bg) !important;
  color: var(--reader-text) !important;
}

/* Applied Semantic Theme Utilities */
.reader-heading {
  color: var(--reader-heading) !important;
}

.reader-text {
  color: var(--reader-text) !important;
}

.reader-muted {
  color: var(--reader-muted) !important;
}

.reader-border {
  border-color: var(--reader-border) !important;
}

.reader-btn-primary {
  background-color: var(--reader-btn-bg) !important;
  color: var(--reader-btn-text) !important;
}

.reader-btn-primary:hover {
  background-color: var(--reader-btn-hover) !important;
}

.reader-btn-secondary {
  background-color: transparent !important;
  color: var(--reader-text) !important;
  border-color: var(--reader-border) !important;
}

.reader-drawer {
  background-color: var(--reader-drawer-bg) !important;
  border-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
}

.reader-hud-nav {
  background: var(--reader-hud-bg) !important;
  border-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
}

.novel-content {
  color: var(--reader-text) !important;
}

/* Hide scrollbars cleanly */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}