/* Day/night theme for the whole site. Day is the default; night is
   :root[data-theme="dark"], set by partials/theme-head.html. The app's
   stylesheets only read the tokens below; the public pages' night styles are
   further down, grouped by page. */

:root {
  --page: #f8fafc;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --panel-glass: rgba(255, 255, 255, 0.96);
  --ink: #192231;
  --ink-soft: rgba(25, 34, 49, 0.7);
  --muted: #8e9aaf;
  --border: #f0f0f0;
  --edge: #e5e5e5;
  --track: #e2e8f0;
  --wash: rgba(25, 34, 49, 0.05);
  --wash-strong: rgba(25, 34, 49, 0.15);
  --solid: #192231;
  --chart-grid: rgba(0, 0, 0, 0.1);
}

:root[data-theme="dark"] {
  --night-bg: #10151f;
  --night-card: #192231;
  --night-raised: #222d42;
  --night-line: #2b3852;
  --night-base: #0b0f17;
  --night-ink: #f4f6f8;
  --night-ink-soft: rgba(244, 246, 248, 0.75);
  --night-ink-faint: rgba(244, 246, 248, 0.55);

  /* Shared tokens the page stylesheets already read */
  --ink: var(--night-ink);
  --ink-soft: var(--night-ink-soft);
  --page: var(--night-bg);
  --panel: var(--night-card);
  --panel-soft: var(--night-raised);
  --panel-glass: rgba(25, 34, 49, 0.96);
  --border: var(--night-raised);
  --edge: var(--night-base);
  --track: var(--night-line);
  --wash: rgba(244, 246, 248, 0.06);
  --wash-strong: rgba(244, 246, 248, 0.14);
  --solid: #3a4a6b;
  --chart-grid: rgba(244, 246, 248, 0.1);
  --accent: #cfaa6e;
  --glass-bg: rgba(25, 34, 49, 0.75);
  --glass-border: var(--night-line);
  --shadow-luxe: 0 20px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid #f0f0f0;
  border-bottom: 3px solid #e5e5e5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, border-bottom-width 0.1s ease;
}

.theme-toggle:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Shows the theme you'd switch to: moon by day, sun by night */
.theme-toggle .theme-sun { display: none; color: #f5b800; }
.theme-toggle .theme-moon { color: #7a4bff; }

/* Shared back button style for the public pages */
.back-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: #1a1d21;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.back-link:hover { background: #f4f6f8; }

:root[data-theme="dark"] .back-link {
  background: var(--night-card);
  border-color: var(--night-raised);
  color: var(--night-ink);
}

:root[data-theme="dark"] .back-link:hover { background: var(--night-raised); }

:root[data-theme="dark"] .theme-toggle {
  background: var(--night-card);
  border-color: var(--night-line);
  border-bottom-color: var(--night-base);
}

:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }

/* App accents too dark to read on a night panel */

:root[data-theme="dark"] .book-notes-btn {
  color: #b79cf0;
  border-color: var(--night-line);
  border-bottom-color: #6039a8;
}

/* air-datepicker reads its own variables, set on .air-datepicker itself */

:root[data-theme="dark"] .air-datepicker {
  --adp-background-color: var(--night-card);
  --adp-background-color-hover: var(--night-raised);
  --adp-background-color-active: var(--night-line);
  --adp-background-color-in-range: var(--wash);
  --adp-background-color-in-range-focused: var(--wash-strong);
  --adp-border-color: var(--night-line);
  --adp-border-color-inner: var(--night-line);
  --adp-color: var(--night-ink);
  --adp-color-secondary: var(--night-ink-faint);
  --adp-color-other-month: var(--night-ink-faint);
  --adp-color-disabled: var(--night-ink-faint);
  --adp-nav-color-secondary: var(--night-ink-faint);
  --adp-cell-background-color-hover: var(--night-raised);
}

/* intro.js ships its own light colours */

:root[data-theme="dark"] .introjs-progress { background-color: var(--track); }
:root[data-theme="dark"] .introjs-tooltipbuttons { border-top-color: var(--night-line); }
:root[data-theme="dark"] .introjs-arrow.top { border-bottom-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.top-middle { border-bottom-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.top-right { border-bottom-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.right { border-left-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.right-bottom { border-left-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.bottom { border-top-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.bottom-middle { border-top-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.bottom-right { border-top-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.left { border-right-color: var(--panel); }
:root[data-theme="dark"] .introjs-arrow.left-bottom { border-right-color: var(--panel); }

/* flatpickr ships its own light colours */

:root[data-theme="dark"] .flatpickr-weekday,
:root[data-theme="dark"] .flatpickr-day,
:root[data-theme="dark"] .flatpickr-current-month,
:root[data-theme="dark"] .flatpickr-monthDropdown-months { color: var(--ink); }

:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay,
:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--night-ink-faint); }

:root[data-theme="dark"] .flatpickr-day:hover { background: var(--wash-strong); }

:root[data-theme="dark"] .flatpickr-prev-month svg,
:root[data-theme="dark"] .flatpickr-next-month svg { fill: var(--ink); }

/* Landing page */

:root[data-theme="dark"] body.login-body {
  background-color: var(--night-bg);
  background-image:
    radial-gradient(at 0% 0%, rgba(36, 48, 73, 0.6) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgba(25, 34, 49, 0.8) 0, transparent 50%);
}

:root[data-theme="dark"] #instant-splash { background: var(--night-bg); }

/* The logo PNGs have a white background; round them into app-icon tiles */
:root[data-theme="dark"] #instant-splash img,
:root[data-theme="dark"] .libriax-logo { border-radius: 22%; }

:root[data-theme="dark"] .login-container,
:root[data-theme="dark"] .about-section,
:root[data-theme="dark"] .pricing-card,
:root[data-theme="dark"] .custom-modal-content {
  background: var(--night-card);
  border-color: var(--night-raised);
  border-bottom-color: var(--night-base);
}

:root[data-theme="dark"] #login-container,
:root[data-theme="dark"] #registration-container,
:root[data-theme="dark"] #forgot-password-container,
:root[data-theme="dark"] #resend-email-container,
:root[data-theme="dark"] #reset-password-container {
  background: var(--night-raised);
  border-color: var(--night-raised);
  border-bottom-color: var(--night-base);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

:root[data-theme="dark"] input {
  background-color: var(--night-bg);
  border-color: var(--night-line);
}

:root[data-theme="dark"] input:focus {
  background-color: var(--night-base);
  border-color: #3a4a6b !important;
}

:root[data-theme="dark"] .remember-row input[type="checkbox"] {
  background: var(--night-bg);
  border-color: var(--night-line);
}

:root[data-theme="dark"] .remember-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

:root[data-theme="dark"] .eye-icon,
:root[data-theme="dark"] .eye-icon path { stroke: var(--night-ink); }

:root[data-theme="dark"] .pricing-card--premium { border-color: #2f3f8f; border-bottom-color: #3451d1; }
:root[data-theme="dark"] .pricing-card--yearly { border-color: #5a4313; border-bottom-color: #c07800; }

:root[data-theme="dark"] .section-icon {
  background: var(--night-raised) !important;
  border-color: var(--night-line) !important;
}

:root[data-theme="dark"] .carousel-slide p,
:root[data-theme="dark"] .pricing-heading,
:root[data-theme="dark"] .pricing-card-name,
:root[data-theme="dark"] .pricing-price,
:root[data-theme="dark"] .pricing-feature-list li,
:root[data-theme="dark"] .testimonial-heading,
:root[data-theme="dark"] .testimonial-text { color: var(--night-ink); }

:root[data-theme="dark"] .carousel-slide img {
  border-color: var(--night-raised);
  border-bottom-color: var(--night-base);
}

:root[data-theme="dark"] .carousel-dot { background: rgba(244, 246, 248, 0.25); }
:root[data-theme="dark"] .carousel-dot.active { background: #cfaa6e; }

:root[data-theme="dark"] .carousel-text-icon,
:root[data-theme="dark"] .pfi,
:root[data-theme="dark"] .testimonial-icon,
:root[data-theme="dark"] .modal-icon {
  background: var(--night-raised);
}

:root[data-theme="dark"] .pfi,
:root[data-theme="dark"] .modal-icon { border-color: var(--night-line); }

:root[data-theme="dark"] .pricing-cta {
  background: var(--night-raised);
  border-color: var(--night-line);
  border-bottom-color: var(--night-base);
  color: var(--night-ink);
}

:root[data-theme="dark"] .pricing-cta--premium {
  background: #3a4a6b;
  border-color: #2f3e5a;
  border-bottom-color: #1f2d45;
}

:root[data-theme="dark"] .pricing-cta--yearly {
  background: linear-gradient(135deg, #e29b00, #ff9f00);
  border-color: #e29b00;
  border-bottom-color: #c07800;
  color: #ffffff;
}

:root[data-theme="dark"] .testimonial-box {
  background: var(--night-card);
  border-color: var(--night-raised);
  border-top-color: #cfaa6e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] #install-banner,
:root[data-theme="dark"] #ios-install-banner { border-top-color: var(--night-line); }
:root[data-theme="dark"] .clickable-header i { color: #8fa8d8; }

:root[data-theme="dark"] .custom-flash {
  background: var(--night-card);
  border-color: var(--night-raised);
  border-bottom-color: var(--night-base);
  color: var(--night-ink);
}

:root[data-theme="dark"] .custom-flash.error { border-left-color: #ff5c5c; color: #ff5c5c; }
:root[data-theme="dark"] .custom-flash.success { border-left-color: #2fa764; color: #2fa764; }

:root[data-theme="dark"] .custom-modal-button {
  background: var(--night-raised);
  border-color: var(--night-line);
  color: var(--night-ink);
}

:root[data-theme="dark"] .footer {
  background: rgba(16, 21, 31, 0.7);
  border-top-color: rgba(244, 246, 248, 0.06);
  color: var(--night-ink);
}

:root[data-theme="dark"] .footer-link,
:root[data-theme="dark"] .footer-social-link { color: #c7cfdb; }
:root[data-theme="dark"] a.footer-social-link[aria-label="GitHub"]:hover { color: #ffffff; }

:root[data-theme="dark"] .footer-link:hover { color: var(--night-ink); }

:root[data-theme="dark"] .footer-cta {
  background: var(--night-card);
  border-color: var(--night-line);
  color: var(--night-ink);
}

:root[data-theme="dark"] .footer-cta:hover { background: var(--night-raised); }

/* Legal pages */

:root[data-theme="dark"] .legal-page { background-color: var(--night-bg); color: var(--night-ink); }

:root[data-theme="dark"] .legal-container {
  background: rgba(25, 34, 49, 0.75);
  border-color: var(--night-raised);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .legal-container h1 {
  color: var(--night-ink);
  border-bottom-color: rgba(244, 246, 248, 0.2);
}

:root[data-theme="dark"] .legal-container h2,
:root[data-theme="dark"] .legal-container a { color: var(--night-ink); }

:root[data-theme="dark"] .legal-container p,
:root[data-theme="dark"] .legal-container li { color: rgba(244, 246, 248, 0.85); }

:root[data-theme="dark"] .legal-container em { color: rgba(244, 246, 248, 0.65); }
:root[data-theme="dark"] .legal-container a { border-bottom-color: rgba(244, 246, 248, 0.25); }

/* Blog and posts */

/* Blog pages are the only public pages whose <body> has no class */
:root[data-theme="dark"] body:not([class]) { background: var(--night-bg); }

:root[data-theme="dark"] .blog-header { background: var(--night-base); }

:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .book-card,
:root[data-theme="dark"] .post-nav-item a {
  background: var(--night-card);
  border-color: var(--night-raised);
  color: var(--night-ink);
}

:root[data-theme="dark"] .post-nav-item a {
  border-color: var(--night-line);
  border-bottom-color: var(--night-base);
}

:root[data-theme="dark"] .post-nav-item a:hover { background: var(--night-raised); }

:root[data-theme="dark"] .post-title,
:root[data-theme="dark"] .post-headline,
:root[data-theme="dark"] .book-title-text,
:root[data-theme="dark"] .post-body h2,
:root[data-theme="dark"] .post-body h3,
:root[data-theme="dark"] .post-nav-title { color: var(--night-ink); }

:root[data-theme="dark"] .post-body { color: rgba(244, 246, 248, 0.85); }

:root[data-theme="dark"] .post-body hr,
:root[data-theme="dark"] .post-nav { border-top-color: var(--night-line); }

:root[data-theme="dark"] .blog-star--empty { color: #3a4a6b; }

:root[data-theme="dark"] .share-btn {
  background: var(--night-card);
  border-color: var(--night-line);
  border-bottom-color: var(--night-base);
  color: var(--night-ink);
}

/* Radio page (radio.css reads these tokens) */

:root[data-theme="dark"] .radio-page {
  --page-bg: var(--night-bg);
  --page-glow-a: rgba(36, 48, 73, 0.6);
  --page-glow-b: rgba(25, 34, 49, 0.8);
  --ink-faint: var(--night-ink-faint);
  --card: var(--night-card);
  --card-edge: var(--night-raised);
  --card-base: var(--night-base);
  --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  --tile: var(--night-raised);
  --line: var(--night-line);
  --marker: #8e9aaf;
}