/* Theme roles. Legacy declarations use these with classic-color fallbacks.
   Semantic cycle/status colors and editorial artwork remain independent. */
:root[data-theme="midnight"] {
  --theme-canvas:#f8f4ef;
  --theme-surface:#fffdfa;
  --theme-subtle:#f2edf4;
  --theme-tint:#e6ddec;
  --theme-title:#19243e;
  --theme-text:#454358;
  --theme-muted:#645a6d;
  --theme-decoration:#a999b6;
  --theme-primary:#24314f;
  --theme-accent:#e89788;
  --theme-line:#e4dce5;
  --theme-focus:#78618f;
  --theme-primary-soft:#e9e1f0;
  --theme-primary-ink:#59466f;
  --theme-accent-soft:#f9e5df;
  --theme-accent-ink:#9a4b42;
  --theme-hero:linear-gradient(125deg,#f0e8f1,#e4daed);
  --theme-prediction:linear-gradient(145deg,#e9e2f1,#f3edf5);
  --theme-care:#f4eae0;
  --theme-care-ink:#725741;
}
:root[data-theme="sage"] {
  --theme-canvas:#f8f4ec;
  --theme-surface:#fffdf8;
  --theme-subtle:#f0f1e9;
  --theme-tint:#dde5d9;
  --theme-title:#2e493d;
  --theme-text:#485a4d;
  --theme-muted:#5b6355;
  --theme-decoration:#98aa96;
  --theme-primary:#496451;
  --theme-accent:#dca587;
  --theme-line:#dfe2d5;
  --theme-focus:#637d68;
  --theme-primary-soft:#e3eadf;
  --theme-primary-ink:#3e5a46;
  --theme-accent-soft:#fae7d9;
  --theme-accent-ink:#905532;
  --theme-hero:linear-gradient(125deg,#edf0e5,#dce5d8);
  --theme-prediction:linear-gradient(145deg,#fae9da,#f6eee3);
  --theme-care:#e4ede7;
  --theme-care-ink:#3c6154;
}
:root:is([data-theme="midnight"],[data-theme="sage"]) {
  --bg:var(--theme-canvas);
  --surface:var(--theme-surface);
  --ink:var(--theme-text);
  --title:var(--theme-title);
  --muted:var(--theme-muted);
  --ink-muted:var(--theme-muted);
  --surface-muted:var(--theme-subtle);
  --plum:var(--theme-primary);
  --plum-dark:var(--theme-title);
  --rose:var(--theme-accent);
  --rose-dark:var(--theme-accent-ink);
  --rose-pale:var(--theme-accent-soft);
  --lilac:var(--theme-primary-soft);
  --sage:var(--theme-care);
  --border:var(--theme-line);
  --line:var(--theme-line);
  --shadow:0 8px 28px color-mix(in srgb,var(--theme-title) 6%,transparent);
  color-scheme:light;
}
/* Component recipes establish hierarchy, rather than coloring every surface alike. */
html:is([data-theme="midnight"],[data-theme="sage"]) .cycle-hero {
  background:var(--theme-hero);
  border-color:var(--theme-line);
}
html:is([data-theme="midnight"],[data-theme="sage"]) .next-period-card {
  background:var(--theme-prediction);
  border-color:var(--theme-line);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.main-ring:before,.small-pill,.conf-pill) {
  background:var(--surface);
  color:var(--theme-primary-ink);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.btn-primary,.bottom-nav-link.is-action .ic,.pill-switch.switch-on) {
  background:var(--theme-primary);
  color:#fff;
  box-shadow:0 5px 15px color-mix(in srgb,var(--theme-primary) 18%,transparent);
}
html:is([data-theme="midnight"],[data-theme="sage"]) .btn-primary:hover {
  background:var(--theme-title);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.shop-hero,.landing-shop-heading) :is(.section-kicker,h2 em) {color:#fff4e9}
html:is([data-theme="midnight"],[data-theme="sage"]) .status-cancelled {background:#fff0f0;color:#973e3e}
html:is([data-theme="midnight"],[data-theme="sage"]) .product-stock.low {color:#95502f}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.btn-soft,.avatar-btn,.setting-header-icon,.tag,.stat-pink) {
  background:var(--theme-accent-soft);
  color:var(--theme-accent-ink);
  border-color:var(--theme-line);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.side-nav-link.is-active,.flow-option.picked,.modal-mood.picked,.symptom-choice.picked,.sleep-choice.picked,.energy-dot.active) {
  background:var(--theme-primary-soft);
  color:var(--theme-primary-ink);
  border-color:var(--theme-focus);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.bottom-nav-link.is-active,.home-mood.chosen small) {
  color:var(--theme-primary-ink);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.home-mood.chosen>span,.home-mood:hover>span) {
  background:var(--theme-accent-soft);
  color:var(--theme-accent-ink);
  border-color:var(--theme-accent);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.sidebar-care,.settings-reassurance) {
  background:var(--theme-prediction);
  border:1px solid var(--theme-line);
}
html:is([data-theme="midnight"],[data-theme="sage"]) .insight-note {
  background:var(--theme-care);
  border-color:var(--theme-line);
}
html:is([data-theme="midnight"],[data-theme="sage"]) .insight-note:after {
  background:linear-gradient(115deg,transparent,var(--theme-care) 76%);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.insight-note h3,.insight-note p,.small-heart-row) {
  color:var(--theme-care-ink);
}
html:is([data-theme="midnight"],[data-theme="sage"]) .bottom-nav {
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border-color:var(--theme-line);
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.note-field,.text-input):focus-visible {
  outline:2px solid var(--theme-focus);
  outline-offset:2px;
}
/* Health colors retain their meaning across palettes and match their legends. */
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.day-cell.is-period,.legend-period) {
  background:#f4ccd3;
  color:#873c51;
}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.day-cell.is-prediction,.legend-pred) {
  background:#eee6f4;
  color:#6c517f;
  border-color:#987fa9;
}
html:is([data-theme="midnight"],[data-theme="sage"]) .day-cell.is-selected {
  outline-color:var(--theme-primary);
}
/* Every option carries its own small preview, independent of the active theme. */
.theme-preview-classic {--preview-bg:#faf8f6;--preview-hero:#f6dde6;--preview-ink:#704a60;--preview-accent:#ce7891}
.theme-preview-midnight {--preview-bg:#f8f4ef;--preview-hero:#e6ddec;--preview-ink:#24314f;--preview-accent:#e89788}
.theme-preview-sage {--preview-bg:#f8f4ec;--preview-hero:#dde5d9;--preview-ink:#496451;--preview-accent:#dca587}
.theme-miniature {display:grid;gap:7px;padding:12px;background:var(--preview-bg);border-radius:10px;margin-bottom:12px}
.theme-miniature>i {display:block;width:42%;height:5px;border-radius:5px;background:var(--preview-ink)}
.theme-miniature>span {display:flex;align-items:center;justify-content:space-between;padding:12px 9px;border-radius:8px;background:var(--preview-hero)}
.theme-miniature em {width:45%;height:6px;border-radius:5px;background:var(--preview-ink);opacity:.7}
.theme-miniature b {width:29px;height:29px;border:5px solid var(--preview-ink);border-left-color:var(--preview-accent);border-radius:50%}
.theme-miniature>small {height:13px;width:48%;border-radius:5px;background:var(--preview-ink)}
.theme-option {padding:13px;text-align:start}
.theme-option strong {font-size:12px}
.theme-option small {font-size:10px}
.theme-option.is-selected {border-color:var(--plum);outline:1px solid var(--plum)}
.theme-option>b {top:18px;left:18px}
.theme-setting .setting-heading p {color:var(--muted)}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.text-input,.note-field)::placeholder {color:var(--theme-muted)}
html:is([data-theme="midnight"],[data-theme="sage"]) :is(.theme-option small,.setting-heading p,.setting-row small) {color:var(--theme-muted)}
@media(max-width:600px) {
  .theme-option {grid-template-columns:100px 1fr;column-gap:16px}
  .theme-miniature {grid-row:1/4;margin-bottom:0}
  .theme-option .theme-swatches {grid-column:2;grid-row:3;height:7px;width:64px;margin-top:6px}
  .theme-option strong {align-self:end}
  .theme-option>b {top:8px;left:8px}
}