/* Theme tokens change paint only; the page's layout remains in styles.css. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --page: #170e29;
  --ink: #f5efff;
  --muted: #c9bcde;
  --quiet: #bcaad4;
  --accent: #d0b0ff;
  --accent-end: #f0addb;
  --surface: #ffffff0a;
  --surface-solid: #332245;
  --edge: #ecd5ff20;
  --highlight: #f7e7ff1f;
  --tint-purple: #a875ff25;
  --tint-yellow: #ecbbd812;
  --tint-pink: #d66eaf20;
  --wash-a: #743dc45c;
  --wash-b: #a2449242;
  --glass-a: #ac7cf780;
  --glass-b: #ad60c54a;
  --glass-c: #7184e678;
  --shadow: 0 16px 48px #0d051d38, 0 2px 8px #0d051d20;
  --hero-shadow: 0 24px 65px #0e04263b;
  --cta-start: #9c6dd2;
  --cta-end: #7955b5;
  --button-ink: #fff;
  --closing: #26133d;
}
:root[data-theme='light'] {
  color-scheme: light;
  --page: #f7f6f4;
  --ink: #343447;
  --muted: #666578;
  --quiet: #716d83;
  --accent: #7972ad;
  --accent-end: #a86486;
  --surface: #ffffff80;
  --surface-solid: #f6f0f5;
  --edge: #ffffffd9;
  --highlight: #ffffffb3;
  --tint-purple: #d6d2f766;
  --tint-yellow: #f8d9b966;
  --tint-pink: #bce5de66;
  --wash-a: #bce6dd80;
  --wash-b: #f7d7d394;
  --glass-a: #cec4f38f;
  --glass-b: #f2c9d399;
  --glass-c: #bce3d5c4;
  --shadow: 0 16px 48px #8e738c12, 0 2px 8px #8e738c08;
  --hero-shadow: 0 24px 65px #9a83a324;
  --cta-start: #8982bc;
  --cta-end: #a87f9f;
  --button-ink: #fff;
  --closing: #f0eeef;
}
/* A richer pastel palette bridges the light and dark themes. */
:root[data-theme='pastel'] {
  color-scheme: light;
  --page: #c4b6e1;
  --ink: #332d46;
  --muted: #584e6a;
  --quiet: #625470;
  --accent: #65519a;
  --accent-end: #9b466c;
  --surface: #ffffff30;
  --surface-solid: #ddd0ee;
  --edge: #ffffff80;
  --highlight: #ffffff70;
  --tint-purple: #b895eeb0;
  --tint-yellow: #f4bca5a8;
  --tint-pink: #87d5c69e;
  --wash-a: #81cfd0c2;
  --wash-b: #ee9bbfc7;
  --glass-a: #ad8ae5c4;
  --glass-b: #ec9cbed1;
  --glass-c: #88cdc4d9;
  --shadow: 0 16px 48px #62457e1a, 0 2px 8px #62457e0c;
  --hero-shadow: 0 24px 65px #5e3b822b;
  --cta-start: #8260ad;
  --cta-end: #9b557f;
  --button-ink: #fff;
  --closing: #bfb0d7;
}
:root[data-theme] { color: var(--ink); background: var(--page); }
:root[data-theme] .shell {
  background: radial-gradient(ellipse 55% 25% at 86% 13%, var(--wash-a), transparent 80%), radial-gradient(ellipse 42% 22% at 60% 8%, var(--wash-b), transparent 85%), radial-gradient(ellipse 48% 20% at 5% 47%, var(--wash-a), transparent 90%), var(--page);
}
:root[data-theme] .feature-glyph { border-color: transparent; box-shadow: 0 6px 16px #1e204338; }
:root[data-theme] :is(.language select, .nav-link) { color: var(--ink); border-color: var(--edge); background: var(--surface); }
:root[data-theme] select option { background: var(--surface-solid); color: var(--ink); }
:root[data-theme] :is(.eyebrow, .aside-note, .hero-index, .marquee-inner, .feature-number, .footer p, .footer nav) { color: var(--quiet); }
:root[data-theme] h1 em { color: var(--accent); background-image: linear-gradient(105deg, var(--accent), var(--accent-end) 90%); }
:root[data-theme] .button-primary { background: linear-gradient(125deg, var(--cta-start), var(--cta-end)); color: var(--button-ink); border-color: var(--edge); box-shadow: 0 7px 22px #0000001a, inset 0 1px 0 var(--highlight); }
:root[data-theme] .button:hover { box-shadow: 0 12px 30px #00000026; }
:root[data-theme] .hero-art { border-color: var(--edge); background: radial-gradient(circle at 88% 3%, var(--glass-a), transparent 45%), linear-gradient(140deg, var(--surface), var(--glass-b) 55%, var(--glass-c)); box-shadow: inset 0 2px 4px var(--highlight), var(--hero-shadow); }
:root[data-theme] .sound { background: var(--surface); border-color: var(--edge); }
:root[data-theme] .sound-kicker { color: var(--accent); }
:root[data-theme] .marquee { background: var(--surface); border-color: var(--edge); }
:root[data-theme] .marquee span { color: var(--accent); }
:root[data-theme] .feature { border-color: var(--edge); }
:root[data-theme] .feature-purple { background: linear-gradient(145deg, var(--surface), var(--tint-purple)); }
:root[data-theme] .feature-yellow { background: linear-gradient(145deg, var(--surface), var(--tint-yellow)); }
:root[data-theme] .feature-pink { background: linear-gradient(145deg, var(--surface), var(--tint-pink)); }
:root[data-theme] .feature:hover { box-shadow: var(--hero-shadow); }
:root[data-theme] .feature-purple .feature-glyph { background: #6b4bbd; }
:root[data-theme] .feature-yellow .feature-glyph { background: #bd5523; }
:root[data-theme] .feature-pink .feature-glyph { background: #087a86; }
:root[data-theme] .preview-image { background: linear-gradient(135deg, var(--surface), var(--glass-c)); border-color: var(--edge); box-shadow: var(--shadow), inset 0 1px 3px var(--highlight); }
:root[data-theme] .text-link { color: var(--accent); }
:root[data-theme] .closing { background: radial-gradient(ellipse at 86% 90%, var(--wash-a), transparent 65%), radial-gradient(ellipse at 15% 0, var(--wash-b), transparent 65%), var(--closing); border-color: var(--edge); }
:root[data-theme] .button-dark { background: linear-gradient(135deg, var(--cta-start), var(--cta-end)); color: var(--button-ink); border-color: var(--edge); box-shadow: var(--shadow), inset 0 1px 0 var(--highlight); }
/* The switcher occupies the same footer row in every theme. */
.footer { flex-wrap: wrap; }
.theme-switcher { flex: 0 0 100%; min-width: 0; margin: 4px 0 0; padding: 0; border: 0; color: inherit; }
.theme-switcher legend { padding: 0; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.theme-options { display: flex; flex-wrap: wrap; gap: 9px; }
.theme-option { position: relative; display: inline-flex; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-option span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 13px; border: 1px solid var(--edge, #e2e4ef); background: var(--surface, #ffffff80); border-radius: 100px; font-size: 13px; line-height: 1.4; }
.theme-option span::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--swatch); border: 1px solid #8b8b9b40; }
.theme-option input:checked + span { border-color: var(--accent, #7770c8); box-shadow: 0 0 0 1px var(--accent, #7770c8); }
.theme-option input:focus-visible + span { outline: 3px solid var(--accent, #8076db); outline-offset: 4px; }
.theme-option:hover span { background: var(--highlight, #ffffffd9); }
.theme-light { --swatch: linear-gradient(135deg, #cfc4ef, #f4ced8, #bce3d5); }
.theme-dark { --swatch: linear-gradient(135deg, #502377, #bc78c6); }
.theme-pastel { --swatch: linear-gradient(135deg, #ad8ae5, #ec9cbe, #88cdc4); }
@media (max-width: 700px) { .theme-switcher { margin: 4px 0 0; } }