/* ============================================================
   Commonplace — Theme System
   CSS custom properties drive both themes.
   Class .theme-reader toggles the warm alternative.
   Default (no class) = Modern / zinc palette.
   ============================================================ */

/* ---------- Theme Tokens ---------- */
:root,
.theme-modern {
  --bg-page: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-page-alt: #f1f5f9;
  --bg-sidebar-hover: #f1f5f9;
  --bg-sidebar-active: #e2e8f0;

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-muted-lighter: #94a3b8;

  --text-sidebar: #475569;
  --text-sidebar-muted: #94a3b8;
  --text-sidebar-active: #0f172a;

  --border-subtle: #e2e8f0;
  --border-card: #e2e8f0;
  --border-sidebar: #e2e8f0;

  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-accent-light: #eef2ff;
  --color-accent-lighter: #e0e7ff;
  --color-accent-text: #4338ca;

  --color-link: #4f46e5;
  --color-link-hover: #4338ca;

  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --selection-bg: #6366f1;

  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  --btn-primary-bg: #4f46e5;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #4338ca;
}

/* ---------- Reader Theme ---------- */
.theme-reader {
  --bg-page: #faf8f5;
  --bg-sidebar: #f5f0ea;
  --bg-card: #ffffff;
  --bg-page-alt: #f5f0ea;
  --bg-sidebar-hover: #e8dfd3;
  --bg-sidebar-active: #d4c8b6;

  --text-primary: #3f3732;
  --text-secondary: #655743;
  --text-muted: #9c8a72;
  --text-muted-lighter: #b8a992;

  --text-sidebar: #655743;
  --text-sidebar-muted: #b8a992;
  --text-sidebar-active: #3f3732;

  --border-subtle: #e8dfd3;
  --border-card: #e8dfd3;
  --border-sidebar: #d4c8b6;

  --color-accent: #655743;
  --color-accent-hover: #524635;
  --color-accent-light: #f5f0ea;
  --color-accent-lighter: #ebe8e4;
  --color-accent-text: #524635;

  --color-link: #655743;
  --color-link-hover: #3f3732;

  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --selection-bg: #655743;

  --scrollbar-track: #f5f0ea;
  --scrollbar-thumb: #d4cec7;
  --scrollbar-thumb-hover: #b8a992;

  --btn-primary-bg: #655743;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #524635;
}

/* ---------- Global overrides ---------- */
body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

::selection {
  background: var(--selection-bg) !important;
  color: #ffffff;
}

/* ---------- Semantic utility classes ---------- */
.bg-page { background-color: var(--bg-page); }
.bg-page-alt { background-color: var(--bg-page-alt); }
.bg-sidebar { background-color: var(--bg-sidebar); }
.bg-card { background-color: var(--bg-card); }

/* Form inputs inherit theme background/color */
input, textarea, select {
  background-color: var(--bg-card) !important;
  color: var(--text-primary);
}
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-muted-lighter { color: var(--text-muted-lighter); }
.text-sidebar { color: var(--text-sidebar); }
.text-sidebar-muted { color: var(--text-sidebar-muted); }
.text-sidebar-active { color: var(--text-sidebar-active); }
.placeholder-muted::placeholder { color: var(--text-muted); }
.border-subtle { border-color: var(--border-subtle); }
.border-card { border-color: var(--border-card); }
.border-sidebar { border-color: var(--border-sidebar); }
.divide-card { border-color: var(--border-card); }

/* Accent */
.bg-accent { background-color: var(--color-accent); }
.bg-accent-light { background-color: var(--color-accent-light); }
.bg-accent-lighter { background-color: var(--color-accent-lighter); }
.text-accent { color: var(--color-accent-text); }
.text-accent-solid { color: var(--color-accent); }
.hover-bg-accent-hover:hover { background-color: var(--color-accent-hover); }
.border-accent { border-color: var(--color-accent); }

/* Links */
a.link-accent { color: var(--color-link); }
a.link-accent:hover { color: var(--color-link-hover); }

/* Buttons */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn-primary:hover {
  background-color: var(--btn-primary-hover);
}

/* Sidebar nav */
.sidebar-nav a {
  color: var(--text-sidebar);
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 0.5rem;
}
.sidebar-nav a:hover {
  background-color: var(--bg-sidebar-hover);
  color: var(--text-sidebar-active);
}
.sidebar-nav a.active {
  background-color: var(--bg-sidebar-active);
  color: var(--text-sidebar-active);
  font-weight: 600;
}

/* Logo in sidebar — dark icon on light sidebar bg, no filter needed */
.sidebar-logo {
  filter: none;
}

/* Theme toggle button */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  background-color: transparent;
  color: var(--text-sidebar-muted);
}
.theme-toggle-btn:hover {
  background-color: var(--bg-sidebar-hover);
  color: var(--text-sidebar-active);
}

/* Scrollbar per theme */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Selection highlight */
input[type="range"]::-webkit-slider-thumb {
  background: var(--color-accent) !important;
}
input[type="range"]::-moz-range-thumb {
  background: var(--color-accent) !important;
}

/* Reader theme serif for review quotes */
.theme-reader .review-quote p {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ============================================================
   Dark Theme — Amber accent on deep charcoal
   ============================================================ */
.theme-dark {
  --bg-page: #07070e;
  --bg-sidebar: #0a0a14;
  --bg-card: #11111e;
  --bg-page-alt: #141625;
  --bg-sidebar-hover: #1a1c2e;
  --bg-sidebar-active: #232538;

  --text-primary: #e4e4ed;
  --text-secondary: #9d9db0;
  --text-muted: #8b8ba0;
  --text-muted-lighter: #6b6b80;

  --text-sidebar: #7a7a94;
  --text-sidebar-muted: #55556b;
  --text-sidebar-active: #e4e4ed;

  --border-subtle: #1e2030;
  --border-card: #1e2030;
  --border-sidebar: #232538;

  --color-accent: #f59e0b;
  --color-accent-hover: #d97706;
  --color-accent-light: #1c1700;
  --color-accent-lighter: #2a2400;
  --color-accent-text: #fbbf24;

  --color-link: #f59e0b;
  --color-link-hover: #fbbf24;

  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --selection-bg: #f59e0b;

  --scrollbar-track: #11111e;
  --scrollbar-thumb: #2e2e40;
  --scrollbar-thumb-hover: #4f4f66;

  --btn-primary-bg: #f59e0b;
  --btn-primary-text: #07070e;
  --btn-primary-hover: #d97706;
}

/* In dark theme, invert the logo so it shows white */
.theme-dark .sidebar-logo {
  filter: brightness(0) invert(1);
}
/* ── Contemporary Theme (Magenta/pink, Jost font, bento-modern) ─── */
.theme-contemporary {
  --bg-page: #f8f7fc;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-page-alt: #f1eff7;
  --bg-sidebar-hover: #f1eff7;
  --bg-sidebar-active: #e8e5f2;

  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-muted-lighter: #9ca3af;

  --text-sidebar: #6b7280;
  --text-sidebar-muted: #9ca3af;
  --text-sidebar-active: #111827;

  --border-subtle: #e5e7eb;
  --border-card: #e5e7eb;
  --border-sidebar: #e5e7eb;

  --color-accent: #c800df;
  --color-accent-hover: #a000c0;
  --color-accent-light: #faf0ff;
  --color-accent-lighter: #f5e0ff;
  --color-accent-text: #a000c0;

  --color-link: #c800df;
  --color-link-hover: #a000c0;

  --font-body: "Jost", system-ui, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, monospace;
  --selection-bg: #c800df;

  --scrollbar-track: #f1eff7;
  --scrollbar-thumb: #d1cce6;
  --scrollbar-thumb-hover: #b7b0d6;

  --btn-primary-bg: #c800df;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #a000c0;
}

.theme-contemporary .sidebar-logo {
  filter: none;
}

@supports (font-variation-settings: normal) {
  .theme-contemporary {
    --font-body: "Jost", "Jost Variable", system-ui, sans-serif;
  }
}

/* ── Contemporary Dark ─────────────────────────────────────── */
.theme-contemporary-dark {
  --bg-page: #0d0b15;
  --bg-sidebar: #14111f;
  --bg-card: #1c1928;
  --bg-page-alt: #1c1928;
  --bg-sidebar-hover: #232031;
  --bg-sidebar-active: #2c293d;

  --text-primary: #e8e4f0;
  --text-secondary: #a8a3bf;
  --text-muted: #8f8aa5;
  --text-muted-lighter: #706b85;

  --text-sidebar: #a8a3bf;
  --text-sidebar-muted: #5c5774;
  --text-sidebar-active: #e8e4f0;

  --border-subtle: #232031;
  --border-card: #232031;
  --border-sidebar: #2c293d;

  --color-accent: #d946ef;
  --color-accent-hover: #e879f9;
  --color-accent-light: rgba(217, 70, 239, 0.12);
  --color-accent-lighter: rgba(217, 70, 239, 0.06);
  --color-accent-text: #e879f9;

  --color-link: #d946ef;
  --color-link-hover: #e879f9;

  --font-body: "Jost", system-ui, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, monospace;
  --selection-bg: #d946ef;

  --scrollbar-track: #1c1928;
  --scrollbar-thumb: #2c293d;
  --scrollbar-thumb-hover: #403d53;

  --btn-primary-bg: #d946ef;
  --btn-primary-text: #0d0b15;
  --btn-primary-hover: #e879f9;
}

.theme-contemporary-dark .sidebar-logo {
  filter: brightness(0) invert(1);
}

/* ── Glass Theme (Deep navy, indigo glow, frost) ──────────────────── */
.theme-glass {
  --bg-page: #0f172a;
  --bg-sidebar: #1e1b32;
  --bg-card: rgba(30, 27, 50, 0.55);
  --bg-page-alt: rgba(51, 48, 73, 0.35);
  --bg-sidebar-hover: rgba(99, 102, 241, 0.12);
  --bg-sidebar-active: rgba(99, 102, 241, 0.22);

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #7e8ea5;
  --text-muted-lighter: #5c6a7e;

  --text-sidebar: #94a3b8;
  --text-sidebar-muted: #475569;
  --text-sidebar-active: #e2e8f0;

  --border-subtle: rgba(148, 163, 184, 0.1);
  --border-card: rgba(148, 163, 184, 0.15);
  --border-sidebar: rgba(148, 163, 184, 0.08);

  --color-accent: #6366f1;
  --color-accent-hover: #818cf8;
  --color-accent-light: rgba(99, 102, 241, 0.15);
  --color-accent-lighter: rgba(99, 102, 241, 0.08);
  --color-accent-text: #818cf8;

  --color-link: #818cf8;
  --color-link-hover: #a5b4fc;

  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --selection-bg: #6366f1;

  --scrollbar-track: #141625;
  --scrollbar-thumb: #2e2e40;
  --scrollbar-thumb-hover: #4f4f66;

  --btn-primary-bg: #6366f1;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #818cf8;
}

/* Glass card effect */
.theme-glass .bg-card,
.theme-glass .stat-card,
.theme-glass .action-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-glass .stat-card:hover,
.theme-glass .action-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Invert logo for dark bg */
.theme-glass .sidebar-logo {
  filter: brightness(0) invert(1);
}

/* Accent glow */
.theme-glass .bg-accent {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}
.theme-glass .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* Subtle border glow on accent hover states */
.theme-glass a:hover,
.theme-glass button:hover {
  transition: all 0.2s ease;
}