/* Light theme for the Cover Genie app UI (sidebar, toolbar, popups).
   Activated by <html data-theme="light">. Dark stays the default.

   The cover and index pages (#paper, [id^="paperIndex"]) are NOT touched:
   they hardcode their own white page and colours, none of the variables below
   reach them, and nothing in this file targets a .tpl-* template class. */

html[data-theme="light"] {
  color-scheme: light;
  --ink: #EEF1F6;
  --panel: #FFFFFF;
  --panel-2: #F6F7FA;
  --panel-3: #EDEFF4;
  --line: rgba(20, 28, 48, 0.10);
  --line-2: rgba(20, 28, 48, 0.18);
  --text: #141A28;
  --text-dim: #4A5266;
  --text-faint: #7A8296;
  --brass: #B97F14;
  --brass-2: #9A6A0E;
  --brass-ink: #FFF8EA;
  --teal: #1F8F82;
  --danger: #C8402F;
  --ok: #2E8B52;
  --shadow-soft: 0 1px 2px rgba(20, 28, 48, 0.08);
  --shadow-lift: 0 14px 32px -12px rgba(20, 28, 48, 0.22);
}

html[data-theme="light"] body {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(214, 162, 74, 0.10), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(95, 192, 180, 0.08), transparent 50%),
    var(--ink);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(20, 28, 48, 0.3); }

/* ---- layout shells ---- */
html[data-theme="light"] .stage {
  background: radial-gradient(circle at 1px 1px, rgba(20, 28, 48, 0.07) 1px, transparent 0) 0 0/22px 22px, var(--ink);
}
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, var(--panel) 0%, #F3F5F9 100%);
  box-shadow: 8px 0 28px -20px rgba(20, 28, 48, 0.25);
}
html[data-theme="light"] .stage-toolbar {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px -16px rgba(20, 28, 48, 0.3);
}
html[data-theme="light"] .brand-mark,
html[data-theme="light"] .toolbar-brand .mark {
  box-shadow: 0 4px 12px -4px rgba(185, 127, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---- accordion groups ---- */
html[data-theme="light"] .group {
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.015) 0%, rgba(20, 28, 48, 0) 100%), var(--panel-2);
}
html[data-theme="light"] .group.open {
  border-color: rgba(185, 127, 20, 0.4);
  background: linear-gradient(180deg, rgba(214, 164, 74, 0.10) 0%, rgba(214, 164, 74, 0) 60%), var(--panel);
}
html[data-theme="light"] .group-title:hover { background: rgba(20, 28, 48, 0.035); }
html[data-theme="light"] .group.open>.group-title .group-icon { background: rgba(185, 127, 20, 0.14); }

/* ---- inputs, custom select, suggestions, date picker ---- */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .csel-trigger,
html[data-theme="light"] .cdate-trigger {
  box-shadow: inset 0 1px 2px rgba(20, 28, 48, 0.06);
}
html[data-theme="light"] input:hover,
html[data-theme="light"] select:hover,
html[data-theme="light"] textarea:hover,
html[data-theme="light"] .csel-trigger:hover,
html[data-theme="light"] .cdate-trigger:hover,
html[data-theme="light"] .doc-check:hover,
html[data-theme="light"] .thanks-close:hover,
html[data-theme="light"] .info-close:hover {
  border-color: rgba(20, 28, 48, 0.32);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .csel.open .csel-trigger,
html[data-theme="light"] .csel-trigger:focus-visible,
html[data-theme="light"] .cdate.open .cdate-trigger,
html[data-theme="light"] .cdate-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(185, 127, 20, 0.2), inset 0 1px 2px rgba(20, 28, 48, 0.06);
}
html[data-theme="light"] .field-missing {
  box-shadow: 0 0 0 3px rgba(200, 64, 47, 0.18), inset 0 1px 2px rgba(20, 28, 48, 0.06) !important;
}
html[data-theme="light"] .csel-option:hover,
html[data-theme="light"] .cdate-day:hover { background: rgba(20, 28, 48, 0.06); }
html[data-theme="light"] .csel-option.active,
html[data-theme="light"] .sugg-option:hover,
html[data-theme="light"] .sugg-option.active { background: rgba(185, 127, 20, 0.12); }
html[data-theme="light"] .palette-swatch.pal-add .pal-add-icon { background: rgba(20, 28, 48, 0.04); }
html[data-theme="light"] .palette-swatch .pal-del:hover { color: var(--danger); }

/* ---- buttons, pills ---- */
html[data-theme="light"] .btn:hover { box-shadow: 0 6px 16px -8px rgba(20, 28, 48, 0.3); }
html[data-theme="light"] .btn-primary { box-shadow: 0 8px 20px -8px rgba(185, 127, 20, 0.5); }
html[data-theme="light"] .pill {
  background: rgba(31, 143, 130, 0.10);
  border-color: rgba(31, 143, 130, 0.35);
}
html[data-theme="light"] .pill-thanks:hover {
  background: rgba(31, 143, 130, 0.2);
  border-color: rgba(31, 143, 130, 0.6);
  color: #146B61;
}
html[data-theme="light"] .pill-contribute {
  background: rgba(185, 127, 20, 0.12);
  color: var(--brass-2);
  border-color: rgba(185, 127, 20, 0.4);
}
html[data-theme="light"] .pill-contribute:hover {
  background: rgba(185, 127, 20, 0.22);
  border-color: rgba(185, 127, 20, 0.7);
  color: #7C5408;
}

/* ---- template / palette cards (sidebar pickers only) ---- */
html[data-theme="light"] .tpl-card.active,
html[data-theme="light"] .palette-swatch.active { box-shadow: 0 0 0 3px rgba(185, 127, 20, 0.18); }
html[data-theme="light"] .tpl-check,
html[data-theme="light"] .pal-check { box-shadow: 0 1px 3px rgba(20, 28, 48, 0.25), 0 0 0 2px var(--panel-2); }
html[data-theme="light"] .gm-leader-badge { color: #7a5a12; }

/* ---- mobile Preview / Customize toggle ---- */
html[data-theme="light"] .fab {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(20, 28, 48, 0.14);
  box-shadow: 0 18px 38px -14px rgba(20, 28, 48, 0.35), 0 5px 14px -6px rgba(20, 28, 48, 0.2);
}
html[data-theme="light"] .fab.is-preview .fab-seg[data-mode="preview"] { color: #fff; }

/* ---- paper surround only (the page itself stays as designed) ---- */
html[data-theme="light"] .paper-shadow {
  box-shadow: 0 30px 55px -20px rgba(20, 28, 48, 0.35), 0 10px 20px rgba(20, 28, 48, 0.15);
}

/* ---- loader, thanks, info and warning popups ---- */
html[data-theme="light"] .app-loader { background: rgba(238, 241, 246, 0.8); }
html[data-theme="light"] .app-loader-card {
  border-color: var(--line-2);
  background: linear-gradient(180deg, #fff, #F3F5F9);
  box-shadow: 0 20px 50px -20px rgba(20, 28, 48, 0.35);
}
html[data-theme="light"] .thanks-backdrop {
  background: radial-gradient(900px 500px at 50% 0%, rgba(214, 162, 74, 0.12), transparent 60%), rgba(20, 28, 48, 0.45);
}
html[data-theme="light"] .info-backdrop {
  background: radial-gradient(900px 500px at 50% 0%, rgba(95, 192, 180, 0.10), transparent 60%), rgba(20, 28, 48, 0.45);
}
html[data-theme="light"] .thanks-card,
html[data-theme="light"] .info-modal .info-card {
  background: linear-gradient(165deg, #fff 0%, #F6F7FA 65%, #EDEFF4 100%);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(20, 28, 48, 0.05);
}
html[data-theme="light"] .info-hero { background: rgba(20, 28, 48, 0.03); }
html[data-theme="light"] .info-tab.active { background: rgba(185, 127, 20, 0.12); border-color: rgba(185, 127, 20, 0.4); }
html[data-theme="light"] .mf-chip { color: #A8301F; }
html[data-theme="light"] .footer-link:hover { color: var(--brass-2); }

/* ---- brass gradients: light highlight -> base (the dark --brass-2 is for text) ---- */
html[data-theme="light"] .brand-mark,
html[data-theme="light"] .toolbar-brand .mark,
html[data-theme="light"] .page-tag,
html[data-theme="light"] .thanks-icon,
html[data-theme="light"] .info-head-icon,
html[data-theme="light"] .group.open>.group-title .group-chevron-wrap {
  background: linear-gradient(140deg, #E3B158, #C48A1C 70%);
}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .fab-indicator { background: linear-gradient(135deg, #E3B158, #C48A1C); }
html[data-theme="light"] .btn-primary:hover { background: linear-gradient(135deg, #EBBE6C, #CE9427); }
html[data-theme="light"] .cdate-day.is-selected { background: linear-gradient(140deg, #E3B158, #C48A1C 70%); }
html[data-theme="light"] .group-title::before { background: linear-gradient(180deg, #E3B158, #C48A1C); }
html[data-theme="light"] .group.open>.group-title .group-chevron { color: #fff; }
html[data-theme="light"] .theme-toggle::before { background: linear-gradient(140deg, #E3B158, #C48A1C 70%); }

/* ---- zoom control (both themes): flat track, gold fill, round knob ---- */
:root {
  --zoom-track: rgba(255, 255, 255, 0.16);
  --zoom-fill: #D6A24A;
  --zoom-knob: #D6A24A;
  --zoom-ring: #1b2030;
  --zoom-knob-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] {
  --zoom-track: rgba(20, 28, 48, 0.16);
  --zoom-fill: #C98F1F;
  --zoom-knob: #C98F1F;
  --zoom-ring: #fff;
  --zoom-knob-shadow: 0 2px 6px rgba(20, 28, 48, 0.35);
}
.zoom-ctl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  accent-color: auto;
  cursor: pointer;
}
.zoom-ctl input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--zoom-fill) var(--zf, 50%), var(--zoom-track) var(--zf, 50%));
}
.zoom-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid var(--zoom-ring);
  background: var(--zoom-knob);
  box-shadow: var(--zoom-knob-shadow);
}
.zoom-ctl input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--zoom-track);
}
.zoom-ctl input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--zoom-fill);
}
.zoom-ctl input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--zoom-ring);
  background: var(--zoom-knob);
  box-shadow: var(--zoom-knob-shadow);
}
/* the global input hover/focus box (border, tint, glow) must never appear on the slider */
html input[type="range"],
html input[type="range"]:hover,
html input[type="range"]:focus,
html input[type="range"]:focus-visible,
html input[type="range"]:active {
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
}
.zoom-ctl input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.3), var(--zoom-knob-shadow);
}
#zoomVal { font-weight: 600; }
html[data-theme="light"] .zoom-ctl { color: var(--text-dim); }
html[data-theme="light"] #zoomVal { color: var(--text); }

/* ---- theme toggle button ---- */
.theme-toggle {
  --tw: 54px; --th: 28px; --tp: 3px; --tk: 22px;
  appearance: none;
  position: relative;
  flex: none;
  width: var(--tw);
  height: var(--th);
  margin-left: 8px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)), var(--panel-2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
/* sliding knob: right = dark, left = light */
.theme-toggle::before {
  content: "";
  position: absolute;
  top: calc(var(--tp) - 1px);
  left: calc(var(--tp) - 1px);
  width: var(--tk);
  height: var(--tk);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 65%);
  box-shadow: 0 3px 10px -2px rgba(214, 162, 74, .6), inset 0 1px 0 rgba(255, 255, 255, .4);
  transform: translateX(calc(var(--tw) - var(--tk) - 2 * var(--tp)));
  transition: transform .4s cubic-bezier(.34, 1.4, .5, 1), box-shadow .3s var(--ease);
}
.theme-toggle i {
  position: absolute;
  top: 50%;
  width: var(--tk);
  height: var(--tk);
  margin-top: calc(var(--tk) / -2);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  transition: color .3s var(--ease), transform .4s cubic-bezier(.34, 1.4, .5, 1);
}
.theme-toggle .i-sun { left: calc(var(--tp) - 1px); color: var(--text-faint, var(--faint)); }
.theme-toggle .i-moon { right: calc(var(--tp) - 1px); color: var(--brass-ink); transform: rotate(0); }
.theme-toggle:hover { border-color: var(--brass); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 3px rgba(214, 162, 74, .14); }
.theme-toggle:active::before { width: calc(var(--tk) + 4px); }
.theme-toggle:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; }

html[data-theme="light"] .theme-toggle {
  background: linear-gradient(180deg, #fff, #EDEFF4);
  box-shadow: inset 0 1px 2px rgba(20, 28, 48, .1);
}
html[data-theme="light"] .theme-toggle::before {
  transform: translateX(0);
  box-shadow: 0 3px 10px -2px rgba(185, 127, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
}
html[data-theme="light"] .theme-toggle .i-sun { color: var(--brass-ink); transform: rotate(90deg); }
html[data-theme="light"] .theme-toggle .i-moon { color: var(--text-faint, var(--faint)); }
html[data-theme="light"] .theme-toggle:hover { box-shadow: inset 0 1px 2px rgba(20, 28, 48, .1), 0 0 0 3px rgba(185, 127, 20, .16); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle::before, .theme-toggle i { transition: none; }
}