/* Add new themes by copying one of these blocks and changing the token values. */
html[data-theme="dark"] {
  --bg: #0b1118;
  --bg-soft: #121a25;
  --panel: rgba(17, 24, 36, 0.84);
  --card: rgba(24, 34, 50, 0.94);
  --text: #eef4fb;
  --muted: #9caac0;
  --line: rgba(255,255,255,0.09);
  --accent: #6ecf8a;
  --accent-2: #ffffff;
  --shadow: 0 24px 72px rgba(0,0,0,0.28);
  --panel-backdrop: blur(14px);
  --button-radius: 16px;
  --button-primary-text: #0b1118;
  --background-art: radial-gradient(circle at top right, rgba(110,207,138,0.10), transparent 24%), linear-gradient(180deg, #0b1118, #090e14 100%);
}

html[data-theme="light"] {
  --bg: #f6f4ef;
  --bg-soft: #ede8de;
  --panel: rgba(255,255,255,0.92);
  --card: rgba(250,248,243,0.98);
  --text: #1f252c;
  --muted: #66717d;
  --line: rgba(31,37,44,0.09);
  --accent: #42795d;
  --accent-2: #ffffff;
  --shadow: 0 18px 42px rgba(40, 48, 55, 0.08);
  --panel-backdrop: blur(10px);
  --button-radius: 16px;
  --button-primary-text: #ffffff;
  --background-art: radial-gradient(circle at top left, rgba(66,121,93,0.08), transparent 18%), linear-gradient(180deg, #f8f6f1, #f1ece3 100%);
}

html[data-theme="midnight-blue"] {
  --bg: #07101d;
  --bg-soft: #0d182b;
  --panel: rgba(10, 20, 38, 0.88);
  --card: rgba(16, 29, 52, 0.96);
  --text: #edf5ff;
  --muted: #95a8c5;
  --line: rgba(125,160,220,0.14);
  --accent: #7fb3ff;
  --accent-2: #ffffff;
  --shadow: 0 26px 84px rgba(0,0,0,0.34);
  --panel-backdrop: blur(18px);
  --button-radius: 16px;
  --button-primary-text: #07101d;
  --background-art: radial-gradient(circle at top right, rgba(127,179,255,0.14), transparent 24%), radial-gradient(circle at 10% 0%, rgba(78,111,182,0.14), transparent 18%), linear-gradient(180deg, #07101d, #050b14 100%);
}

html[data-theme="emerald"] {
  --bg: #0c1712;
  --bg-soft: #122019;
  --panel: rgba(16, 28, 21, 0.86);
  --card: rgba(23, 39, 30, 0.94);
  --text: #eff8f2;
  --muted: #9cb4a2;
  --line: rgba(153,202,165,0.14);
  --accent: #54c878;
  --accent-2: #ffffff;
  --shadow: 0 24px 80px rgba(0,0,0,0.30);
  --panel-backdrop: blur(16px);
  --button-radius: 16px;
  --button-primary-text: #08110c;
  --background-art: radial-gradient(circle at top right, rgba(84,200,120,0.16), transparent 24%), radial-gradient(circle at top left, rgba(135,220,158,0.10), transparent 18%), linear-gradient(180deg, #0c1712, #09110d 100%);
}

html[data-theme="signal-pop"] {
  --bg: #0e0f10;
  --bg-soft: #171a19;
  --panel: rgba(20, 22, 22, 0.9);
  --card: rgba(30, 32, 31, 0.95);
  --text: #fbfbf4;
  --muted: #b8c1ba;
  --line: rgba(255, 255, 255, 0.13);
  --accent: #ffe84d;
  --accent-2: #3ee6c5;
  --shadow: 0 26px 88px rgba(0, 0, 0, 0.38);
  --panel-backdrop: blur(18px) saturate(150%);
  --button-radius: 8px;
  --button-primary-text: #121312;
  --grid-line: rgba(255, 232, 77, 0.08);
  --button-primary-bg: linear-gradient(135deg, #ffe84d 0%, #3ee6c5 52%, #ff5a6d 100%);
  --button-secondary-bg: rgba(255, 255, 255, 0.07);
  --button-hover-border: rgba(62, 230, 197, 0.44);
  --settings-panel-bg: linear-gradient(160deg, rgba(255, 232, 77, 0.08), rgba(62, 230, 197, 0.06)), rgba(20, 22, 22, 0.94);
  --settings-option-bg: rgba(255, 232, 77, 0.16);
  --background-art: radial-gradient(circle at 9% 8%, rgba(255, 232, 77, 0.22), transparent 18%), radial-gradient(circle at 88% 16%, rgba(62, 230, 197, 0.18), transparent 22%), radial-gradient(circle at 72% 82%, rgba(255, 90, 109, 0.18), transparent 24%), linear-gradient(180deg, #101111 0%, #080909 100%);
}

html[data-theme="paper-press"] {
  --bg: #f7faf8;
  --bg-soft: #eaf4ef;
  --panel: rgba(255, 255, 255, 0.94);
  --card: rgba(247, 250, 248, 0.98);
  --text: #17201c;
  --muted: #5d6d66;
  --line: rgba(23, 32, 28, 0.12);
  --accent: #d83f31;
  --accent-2: #177a6b;
  --shadow: 0 18px 48px rgba(23, 32, 28, 0.1);
  --panel-backdrop: blur(12px);
  --button-radius: 8px;
  --button-primary-text: #ffffff;
  --grid-line: rgba(23, 122, 107, 0.08);
  --button-primary-bg: linear-gradient(135deg, #d83f31, #177a6b);
  --button-secondary-bg: rgba(23, 122, 107, 0.08);
  --button-hover-border: rgba(216, 63, 49, 0.32);
  --settings-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(234, 244, 239, 0.96));
  --settings-option-bg: rgba(216, 63, 49, 0.09);
  --background-art: radial-gradient(circle at 0% 0%, rgba(216, 63, 49, 0.08), transparent 18%), radial-gradient(circle at 100% 8%, rgba(23, 122, 107, 0.12), transparent 22%), linear-gradient(180deg, #fbfdfc, #eef7f2 100%);
}

html[data-theme="field-day"] {
  --bg: #07120d;
  --bg-soft: #102017;
  --panel: rgba(14, 31, 22, 0.88);
  --card: rgba(22, 42, 31, 0.94);
  --text: #f4fff7;
  --muted: #b1c6b9;
  --line: rgba(200, 241, 211, 0.14);
  --accent: #a6e35d;
  --accent-2: #7bcfff;
  --shadow: 0 26px 78px rgba(0, 0, 0, 0.33);
  --panel-backdrop: blur(16px) saturate(130%);
  --button-radius: 8px;
  --button-primary-text: #08120c;
  --grid-line: rgba(166, 227, 93, 0.08);
  --button-primary-bg: linear-gradient(135deg, #a6e35d, #7bcfff);
  --button-secondary-bg: rgba(123, 207, 255, 0.08);
  --button-hover-border: rgba(166, 227, 93, 0.38);
  --settings-panel-bg: linear-gradient(145deg, rgba(166, 227, 93, 0.08), rgba(123, 207, 255, 0.07)), rgba(14, 31, 22, 0.94);
  --settings-option-bg: rgba(166, 227, 93, 0.14);
  --background-art: radial-gradient(circle at 14% 18%, rgba(166, 227, 93, 0.17), transparent 22%), radial-gradient(circle at 88% 12%, rgba(123, 207, 255, 0.13), transparent 20%), radial-gradient(circle at 76% 84%, rgba(255, 217, 102, 0.1), transparent 24%), linear-gradient(180deg, #07120d, #050b08 100%);
}

html[data-theme="mono-lab"] {
  --bg: #080808;
  --bg-soft: #151515;
  --panel: rgba(22, 22, 22, 0.9);
  --card: rgba(246, 246, 238, 0.08);
  --text: #f4f4ef;
  --muted: #b6b7ae;
  --line: rgba(244, 244, 239, 0.16);
  --accent: #f4f4ef;
  --accent-2: #52ff8f;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  --panel-backdrop: blur(10px);
  --button-radius: 8px;
  --button-primary-text: #080808;
  --grid-line: rgba(244, 244, 239, 0.07);
  --button-primary-bg: linear-gradient(135deg, #f4f4ef, #52ff8f);
  --button-secondary-bg: rgba(244, 244, 239, 0.08);
  --button-hover-border: rgba(82, 255, 143, 0.46);
  --settings-panel-bg: linear-gradient(180deg, rgba(244, 244, 239, 0.08), rgba(82, 255, 143, 0.05)), rgba(12, 12, 12, 0.95);
  --settings-option-bg: rgba(82, 255, 143, 0.13);
  --background-art: radial-gradient(circle at 12% 10%, rgba(244, 244, 239, 0.08), transparent 18%), radial-gradient(circle at 88% 20%, rgba(82, 255, 143, 0.12), transparent 22%), repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 14px), linear-gradient(180deg, #080808, #101010 100%);
}