/* =========================================================
   Books & Cloud — Theme system (v11)
   Two modes:
     [data-theme="sunlit"]    — default; warm cream daylight
     [data-theme="candlelit"] — warm, low-lit, evening library

   The dark mode here is NOT a generic black UI — it's a warm
   brown / parchment-on-mahogany palette that preserves the
   museum-gallery aesthetic. All swaps go through CSS variables,
   so every component automatically follows.
   ========================================================= */

/* Smooth crossfade when the user flips modes */
html { transition: background-color .35s ease, color .35s ease; }
body, .site-header, .panel, .cart-drawer, .dropdown,
.book-card, .author-card, .admin-panel, .admin-sidebar {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* =====================
   CANDLELIT (dark)
   ===================== */
html[data-theme="candlelit"] {
  /* Surfaces — deep warm browns, not pure black */
  --cream:      #1a1612;     /* page background (was #f5efe1) */
  --cream-2:    #221d17;     /* slightly raised surface */
  --cream-3:    #2b2418;     /* deeper accents */
  --paper:      #221d17;     /* raised surface — cards, drawers */

  /* Ink — warm parchment whites */
  --ink:        #f0e6d2;     /* body text (was #1c1b18) */
  --ink-2:      #c9bb9d;     /* secondary text */

  /* Accents — shift toward gold-leaning warm tones */
  --green:      #c9a45a;     /* primary accent → warm gold */
  --green-2:    #d4b277;
  --brown:      #d4a87a;     /* warm tan */
  --brown-2:    #b88a5e;
  --gold:       #d4b277;     /* slightly brighter for contrast */
  --gold-2:     #e8c98f;
  --gold-deep:  #b68c3f;

  /* Hairlines — light, low-opacity on dark */
  --hairline:   rgba(240, 230, 210, 0.16);
  --hairline-2: rgba(240, 230, 210, 0.08);
}

/* Body texture: in candlelit mode we want the SVG grain to fade away */
html[data-theme="candlelit"] body {
  background-image: none;
  background-color: var(--cream);
}

/* Inputs — subtle inverted styling */
html[data-theme="candlelit"] input,
html[data-theme="candlelit"] textarea,
html[data-theme="candlelit"] select {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--hairline);
}
html[data-theme="candlelit"] input::placeholder,
html[data-theme="candlelit"] textarea::placeholder {
  color: rgba(240, 230, 210, 0.4);
}

/* Buttons & pills — dial down brightness on accents */
html[data-theme="candlelit"] .btn-ghost {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
html[data-theme="candlelit"] .btn-ghost:hover {
  background: var(--gold);
  color: var(--cream);
}
html[data-theme="candlelit"] .btn-gold {
  color: var(--cream);
}

/* Image dim — book covers / portraits look more muted at night */
html[data-theme="candlelit"] img:not([data-no-dim]) {
  filter: brightness(0.92) contrast(0.96);
}

/* Code-style elements */
html[data-theme="candlelit"] code,
html[data-theme="candlelit"] pre {
  background: rgba(255, 255, 255, 0.05);
  color: var(--gold-2);
}

/* Admin in candlelit mode — needs explicit handling because admin
   uses solid colors heavily */
html[data-theme="candlelit"] .admin-sidebar {
  background: #110e0a;
  border-color: var(--hairline);
}
html[data-theme="candlelit"] .admin-table thead th {
  background: var(--cream-3);
  color: var(--ink);
}
html[data-theme="candlelit"] .admin-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Theme toggle button — shared chip styling */
.theme-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid rgba(28,27,24,.18);
  color: var(--ink); padding: 6px 10px; border-radius: 999px;
  cursor: pointer; font: 500 0.72rem/1 var(--sans);
  letter-spacing: .04em; transition: border-color .2s, color .2s, background .2s;
}
.theme-btn:hover,
.theme-btn:focus-visible {
  border-color: var(--gold); color: var(--gold-deep);
}
.theme-btn svg { opacity: .8; }
html[data-theme="candlelit"] .theme-btn {
  border-color: rgba(240, 230, 210, 0.22);
}

/* Hide the icon that isn't applicable to the current mode */
html[data-theme="sunlit"]    .theme-btn .icon-moon { display: none; }
html[data-theme="candlelit"] .theme-btn .icon-sun  { display: none; }