:root {
  --lorcana-bg: #101820;
  --lorcana-page: #f6fbfb;
  --lorcana-panel: #ffffff;
  --lorcana-border: #d8e6e7;
  --lorcana-border-dark: #203941;
  --lorcana-muted: #5f7077;
  --lorcana-muted-dark: #b7c8cf;
  --lorcana-gold: #f5c84b;
  --lorcana-teal: #18a8c7;
  --lorcana-support: #ff5f5f;
  --lorcana-support-dark: #ef4b4b;
  background: var(--lorcana-page);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(245, 200, 75, 0.16), transparent 30rem),
    radial-gradient(circle at 90% 12%, rgba(24, 168, 199, 0.12), transparent 28rem),
    linear-gradient(180deg, var(--lorcana-page) 0%, #edf6f5 100%);
}

p,
span,
small,
.filterGroup > span,
.filters label span,
.filters small,
.costBadge b {
  color: var(--lorcana-muted);
}

.scoreButton,
.sourceSwitch,
.printOptions,
.searchBox,
.resultCount,
.filters,
.cardRow,
.selectedCard,
.selectionPane,
.iconButton,
.infoButton,
.setDropdown summary,
.setMenu,
.filterChips button,
.qty input {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--lorcana-border);
}

.scoreButton:hover,
.iconButton:hover,
.infoButton:hover {
  border-color: rgba(24, 168, 199, 0.45);
  background: #ffffff;
}

.sourceSwitch .active,
.filterChips button.active {
  background: var(--lorcana-bg);
  border-color: var(--lorcana-bg);
  color: #ffffff;
}

.searchBox button,
.download,
.filters > button {
  background: var(--lorcana-gold);
  color: var(--lorcana-bg);
}

.kofiButton {
  background: var(--lorcana-support);
  border-color: var(--lorcana-support);
  box-shadow: 0 8px 18px rgba(255, 95, 95, 0.18);
}

.kofiButton:hover {
  background: var(--lorcana-support-dark);
  border-color: var(--lorcana-support-dark);
}

.dataNotice {
  color: #6f4b12;
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.18), rgba(255, 255, 255, 0.78));
  border-color: rgba(245, 200, 75, 0.38);
}

:root.darkMode {
  --lorcana-bg: #071015;
  background: #071015;
}

:root.darkMode body {
  background:
    radial-gradient(circle at 18% 8%, rgba(245, 200, 75, 0.18), transparent 32rem),
    radial-gradient(circle at 84% 14%, rgba(24, 168, 199, 0.18), transparent 30rem),
    linear-gradient(135deg, #071015 0%, #0d1b22 58%, #12352f 100%);
}

:root.darkMode .scoreButton,
:root.darkMode .sourceSwitch,
:root.darkMode .printOptions,
:root.darkMode .searchBox,
:root.darkMode .resultCount,
:root.darkMode .filters,
:root.darkMode .cardRow,
:root.darkMode .selectedCard,
:root.darkMode .selectionPane,
:root.darkMode .iconButton,
:root.darkMode .infoButton,
:root.darkMode .setDropdown summary,
:root.darkMode .setMenu,
:root.darkMode .filterChips button,
:root.darkMode .qty input {
  background: rgba(15, 31, 39, 0.9);
  border-color: var(--lorcana-border-dark);
}

:root.darkMode p,
:root.darkMode span,
:root.darkMode small,
:root.darkMode .filters label span,
:root.darkMode .filterGroup > span,
:root.darkMode .filters small,
:root.darkMode .costBadge b,
:root.darkMode .proxyPreviewCard em {
  color: var(--lorcana-muted-dark);
}

:root.darkMode .scoreButton:hover,
:root.darkMode .iconButton:hover,
:root.darkMode .infoButton:hover {
  background: rgba(22, 43, 52, 0.95);
  border-color: rgba(24, 168, 199, 0.45);
}

:root.darkMode .sourceSwitch .active,
:root.darkMode .searchBox button,
:root.darkMode .download,
:root.darkMode .filters > button,
:root.darkMode .filterChips button.active {
  background: var(--lorcana-gold);
  border-color: var(--lorcana-gold);
  color: #101820;
}

:root.darkMode .dataNotice {
  color: #f5c84b;
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.18), rgba(24, 168, 199, 0.08));
  border-color: rgba(245, 200, 75, 0.34);
}

:root.darkMode .dataNotice p {
  color: #f8dfa1;
}