/* Light remains the original palette. Component fallbacks below preserve its
   individual shades; only these tokens change when dark mode is active. */
:root {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #15111c;
  --ink: #f4eee6;
  --muted: #c4b8cd;
  --purple: #c7a6df;
  --line: #46364f;
  --theme-line: #46364f;
  --theme-subtle: #b9aac5;
  --theme-accent: #c7a6df;
  --theme-accent-bright: #e0c6f0;
  --theme-surface: #211a29;
  --theme-surface-raised: #292033;
  --theme-surface-hover: #34283e;
  --theme-control-border: #887293;
  --theme-button: #c4a4dc;
  --theme-button-hover: #ddc0f1;
  --theme-button-ink: #25172f;
  --theme-focus: #dfbef7;
  --theme-selection: #67437e;
  --theme-selection-ink: #ffffff;
  --theme-glass: #211a29ed;
  --theme-glass-line: #675373;
  --theme-footer: #110e17;
  --theme-reading-start: #292033;
  --theme-reading-end: #241b2e;
  --theme-art-orbit: #74528566;
  --theme-hero-aura: radial-gradient(ellipse at 50% 56%, #b38acf 0%, #9a70b5 25%, #67457d 43%, #38263f 59%, #211727 68%, transparent 73%);
  --theme-about-pink: #885876;
  --theme-about-gold: #8d7543;
  --theme-about-purple: #76588e;
  --theme-about-opacity: .55;
  --theme-art-center: #493358;
  --theme-diagram-board: #211a29;
  --theme-swatch-edge: #cfb5df66;
}

/* With no stored override, the same palette follows the operating system.
   This also works when JavaScript is disabled. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #15111c;
    --ink: #f4eee6;
    --muted: #c4b8cd;
    --purple: #c7a6df;
    --line: #46364f;
    --theme-line: #46364f;
    --theme-subtle: #b9aac5;
    --theme-accent: #c7a6df;
    --theme-accent-bright: #e0c6f0;
    --theme-surface: #211a29;
    --theme-surface-raised: #292033;
    --theme-surface-hover: #34283e;
    --theme-control-border: #887293;
    --theme-button: #c4a4dc;
    --theme-button-hover: #ddc0f1;
    --theme-button-ink: #25172f;
    --theme-focus: #dfbef7;
    --theme-selection: #67437e;
    --theme-selection-ink: #ffffff;
    --theme-glass: #211a29ed;
    --theme-glass-line: #675373;
    --theme-footer: #110e17;
    --theme-reading-start: #292033;
    --theme-reading-end: #241b2e;
    --theme-art-orbit: #74528566;
    --theme-hero-aura: radial-gradient(ellipse at 50% 56%, #b38acf 0%, #9a70b5 25%, #67457d 43%, #38263f 59%, #211727 68%, transparent 73%);
    --theme-about-pink: #885876;
    --theme-about-gold: #8d7543;
    --theme-about-purple: #76588e;
    --theme-about-opacity: .55;
    --theme-art-center: #493358;
    --theme-diagram-board: #211a29;
    --theme-swatch-edge: #cfb5df66;
  }
}

body { background: var(--paper); color: var(--ink); }
::selection { background: var(--theme-selection, #e2d2ec); color: var(--theme-selection-ink, var(--ink)); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: var(--theme-focus, #79539b);
}
.skip-link { background: var(--theme-accent-bright, var(--ink)); color: var(--theme-button-ink, white); }

/* A compact switch; the full button remains a comfortable touch target. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--theme-accent, #79608d);
  cursor: pointer;
  touch-action: manipulation;
}
.theme-toggle-track {
  position: relative;
  display: block;
  width: 56px;
  height: 30px;
  border: 1px solid var(--theme-control-border, #c8bfcd);
  border-radius: 18px;
  background: var(--theme-surface, #f0eaf3);
}
.theme-toggle:hover .theme-toggle-track { background: var(--theme-surface-hover, #e9e0ee); }
.theme-toggle-sun, .theme-toggle-moon { position: absolute; top: 7px; }
.theme-toggle-sun { left: 7px; }
.theme-toggle-moon { right: 7px; }
.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--theme-button, #655075);
  transition: transform .18s ease;
}
.theme-toggle[aria-checked='true'] .theme-toggle-thumb { transform: translateX(26px); }
.theme-toggle:focus-visible { outline: 3px solid var(--theme-focus, #79539b); outline-offset: 3px; }
.brand-mark { color: var(--theme-accent, #967aa7); }
.brand-period { color: var(--theme-accent, #a782af); }
.main-nav a:hover { color: var(--theme-accent-bright, #9068a9); }
.main-nav [aria-current='page'] { color: var(--theme-accent-bright, #79538f); }
.header-cta { border-color: var(--theme-control-border, #c8bfcd); }
.header-cta:hover { background: var(--theme-surface-hover, #f0eaf3); }
.button-primary { background: var(--theme-button, #655075); color: var(--theme-button-ink, #fff); }
.button-primary:hover { background: var(--theme-button-hover, #513e60); }
.button-secondary { border-color: var(--theme-control-border, #cbc1d1); }
.color-search { background: var(--theme-surface, #faf8f4); border-color: var(--theme-control-border, #ded6df); color: var(--theme-subtle, #8d8390); }
.color-search input::placeholder { color: var(--theme-subtle, #8e8492); }
.color-search:focus-within { outline-color: var(--theme-focus, #9374a6); }
.color-search input:focus-visible { outline: none; }
.share-button { color: var(--theme-subtle, #76677e); }
.share-button:hover { color: var(--theme-accent-bright, #44304e); }

/* Hero illustration: keep its original figure and aura hues, with a glow that
   fades into the current page and readable labels above it. */
.eyebrow, .guide-content .eyebrow { color: var(--theme-accent, #82708d); }
.hero h1 em, .tutorial-hero h1 em { color: var(--theme-accent, #9674a9); }
.hero-footnote { color: var(--theme-subtle, #807984); }
.hero-aura { background: var(--theme-hero-aura, radial-gradient(ellipse at 50% 56%, #b194ce 0%, #c9a6db 25%, #ddc5e5 43%, #ebe0e9 59%, #f3edea 68%, transparent 73%)); }
.art-orbit { border-color: var(--theme-art-orbit, #d9cfe080); }
.art-star { color: var(--theme-accent, #997dab); }
.floating-word { background: var(--theme-glass, #fffc); border-color: var(--theme-glass-line, #fff8); color: var(--theme-accent-bright, #77657f); }
.art-caption { background: var(--theme-glass, #fff9); border-color: var(--theme-glass-line, #fff); }
.art-caption > span:last-child { color: var(--theme-accent, #a083b1); }
.art-caption small { color: var(--theme-subtle, #84748e); }
.art-bottom-note { color: var(--theme-subtle, #9987a1); }
.intro-strip { background: var(--theme-surface, #f3eff1); }
.intro-strip .container { color: var(--theme-subtle, #776d7b); }
.intro-strip [aria-hidden] { color: var(--theme-accent, #a291ad); }
.little-note { color: var(--theme-accent, #8d7599); }

/* Actual aura swatches, selection colors, and orb fills are never inverted. */
.color-choice { color: var(--theme-subtle, #746c79); }
.color-choice.is-selected { color: var(--ink); }
.color-swatch { box-shadow: 0 2px 5px #00000008, inset 0 0 0 1px var(--theme-swatch-edge, #5243550d); }
.color-choice.is-selected .color-swatch:after { border-color: var(--theme-accent-bright, #927ba2); }
.color-choice.is-selected .color-swatch:before { background: var(--theme-button, #655075); color: var(--theme-button-ink, white); }
.reading-panel { background: var(--theme-surface-raised, #f5f0f8); border-color: var(--theme-line, #e3d9e8); }
.reading-visual { background: radial-gradient(ellipse at 50% 37%, color-mix(in srgb, var(--selected-color) 8%, var(--theme-reading-start, #f4eff7)), var(--theme-reading-end, #f1ebf5) 75%); }
.reading-kicker { color: var(--theme-subtle, #88718f); }
.reading-visual > p { color: var(--theme-subtle, #7d6c86); }
.reading-meaning { color: var(--theme-subtle, #6c6073); }
.trait-list li { border-color: var(--theme-glass-line, #ded2e5); color: var(--theme-accent-bright, #6f5c7d); }
.reading-invitation > span { color: var(--theme-accent, #9777a7); }
.reading-invitation p { color: var(--theme-subtle, #85738d); }
.explorer-note { color: var(--theme-subtle, #8c8391); }
.guide-library { background: var(--theme-surface, #f2efea); border-color: var(--theme-line, #e7e2de); }
.guide-card { border-color: var(--theme-line, #e4dde3); }
.guide-card:hover { background: var(--theme-surface-hover, white); border-color: var(--theme-control-border, #c5b5cf); }
.guide-card p { color: var(--theme-subtle, #827785); }
.color-alias { color: var(--theme-subtle, #8d8094); }
.card-arrow { color: var(--theme-accent, #a59aa9); }
.card-orb { box-shadow: 0 0 14px color-mix(in srgb, var(--swatch) 12%, transparent), inset 0 0 0 1px var(--theme-swatch-edge, #52435509); }
.color-dot { box-shadow: inset 0 0 0 1px var(--theme-swatch-edge, #5e4c6522); }

/* Story, closing invitation, and footer. */
.about-art { background: var(--theme-surface, #f3ede7); border-color: var(--theme-line, #eee6e2); }
.about-art > span { color: var(--theme-accent-bright, #62516a); }
.about-art > span em { color: var(--theme-accent-bright, #91709b); }
.about-art > i { color: var(--theme-accent, #a1849d); }
.about-orb { opacity: var(--theme-about-opacity, .7); }
.orb-pink { background: radial-gradient(circle, var(--theme-about-pink, #ddb8c2), transparent 72%); }
.orb-gold { background: radial-gradient(circle, var(--theme-about-gold, #e7ce99), transparent 70%); }
.orb-purple { background: radial-gradient(circle, var(--theme-about-purple, #c0add8), transparent 70%); }
.about-copy .about-signoff { color: var(--theme-accent, #897291) !important; }
.faq-flower { color: var(--theme-accent, #c7b4ce); }
.faq-list summary > span { color: var(--theme-accent, #9479a3); }
.closing-note { background: radial-gradient(ellipse at 50% 130%, var(--theme-art-center, #e7dced), transparent 75%), var(--theme-surface-raised, #f2edf3); border-color: var(--theme-line, #e8dfee); }
.closing-note > span { color: var(--theme-accent, #a589b4); }
.closing-note h2 em { color: var(--theme-accent-bright, #9675a6); }
.site-footer { background: var(--theme-footer, var(--paper)); }
.footer-inner > a:last-child:not(.brand) { color: var(--theme-subtle, #76667e); }
.footer-bottom { color: var(--theme-subtle, #918692); }

/* Individual color pages and source comparisons. */
.guide-color-label { color: var(--theme-accent, #7d6a88); }
.guide-headline { color: var(--theme-accent, #9779a5); }
.shade-card, .related-card { background: var(--theme-surface, #fff7); }
.shade-number { color: var(--theme-subtle, #9981a6); }
.reflection-card { background: var(--theme-surface-raised, #f0e9f3); border-color: var(--theme-line, #e0d4e7); }
.reflection-mark { color: var(--theme-accent, #9b7fac); }
.reflection-card > p { color: var(--theme-subtle, #7c6888); }
.reflection-question { color: var(--theme-accent-bright, #655073) !important; border-color: var(--theme-glass-line, #ded0e5); }
.related-card:hover { border-color: var(--theme-control-border, #b7a1c5); }
.related-card > span:last-child { color: var(--theme-accent, #9c8aa7); }
.breadcrumbs li + li:before { color: var(--theme-subtle, #b1a4b8); }
.reading-research { color: var(--theme-subtle, #7d6a87); }
.research-method { border-color: var(--theme-line, #dcd3dc); }
.research-method summary > span { color: var(--theme-accent, #90709f); }
.guide-content .research-byline { color: var(--theme-subtle, #85728d); }
.interpretation-differences { background: var(--theme-surface-raised, #f3eef5); border-color: var(--theme-accent, #cfbad9); }
.theme-citations { color: var(--theme-accent-bright, #82628f); }
.research-source-list { color: var(--theme-accent, #82708d); }

/* Tutorial panels and the hand diagram. Skin and hand shading remain natural. */
.tutorial-teaser { background: var(--theme-surface-raised, #f2edf3); border-color: var(--theme-line, #e3d9e8); }
.tutorial-teaser-art { color: var(--theme-accent, #92739e); background: radial-gradient(circle, var(--theme-art-center, #dfd1e9), var(--theme-surface-raised, #eee5f2) 60%, transparent 72%); }
.tutorial-hero-note { color: var(--theme-subtle, #86748f); }
.tutorial-diagram { background: radial-gradient(ellipse at 50% 65%, var(--theme-art-center, #dfd0e9), var(--theme-surface-raised, #f2edf3) 70%); border-color: var(--theme-line, #e6dce9); }
.tutorial-diagram figcaption { color: var(--theme-subtle, #83728b); }
.tutorial-diagram rect { fill: var(--theme-diagram-board, #f9f6f0); stroke: var(--theme-glass-line, #dfd5df); }
.tutorial-diagram text { fill: var(--theme-accent-bright, #796684); }
.tutorial-diagram [stroke='#a189b0'] { stroke: var(--theme-accent-bright, #a189b0); }
.tutorial-diagram circle[fill='#9776a8'] { fill: var(--theme-accent-bright, #9776a8); }
.tutorial-toc { border-color: var(--theme-line, #dcd0e3); }
.tutorial-toc a:hover { color: var(--theme-accent-bright, #79538f); }
.tutorial-sidebar-note { color: var(--theme-accent, #9a80a5); }
.preparation-card { background: var(--theme-surface, #f3efeb); }
.step-number { background: var(--theme-surface-raised, #ece3f0); color: var(--theme-accent-bright, #8b6b9e); }
.tutorial-steps .step-tip { background: var(--theme-surface-raised, #f2edf3); color: var(--theme-subtle, #7e668b); }
.observation-card { border-color: var(--theme-accent, #d9c7e1); }
.afterimage-note { background: var(--theme-surface, #f3f0f1); border-color: var(--theme-line, #e3dce5); }
.tutorial-next { background: radial-gradient(ellipse at 50% 110%, var(--theme-art-center, #e8dbee), transparent 85%), var(--theme-surface-raised, #f2edf3); border-color: var(--theme-line, #e1d5e6); }
.tutorial-next > span { color: var(--theme-accent, #a383b3); }
.tutorial-next h2 em { color: var(--theme-accent-bright, #9270a2); }