/* Color themes: each block overrides the tokens defined on :root in app.css.
   The registry (withning/platform/themes.py) names the themes and marks dark ones;
   base.html sets data-color-theme and, for dark themes, Pico's data-theme="dark".
   Every family has a night version; they share the dark tokens of the night block. */

:root[data-color-theme="sea"] {
  --surface: #f2f6f7;
  --paper: #fcfeff;
  --ink: #26343a;
  --muted: #66767d;
  --accent: #2f6f8a;
  --line: #d8e3e7;
  --soft: #e4eef1;
  --focus: #1f5870;
  --accent-strong: #245a71;
  --accent-soft: #dcebf1;
  --sunken: #e8eff1;
  --sunken-line: #d3e0e5;
  --nav-surface: #fcfefff5;
}

:root[data-color-theme="blossom"] {
  --surface: #f9f3f2;
  --paper: #fffcfb;
  --ink: #3d2f33;
  --muted: #7f6d72;
  --accent: #b05a72;
  --line: #ecdcdf;
  --soft: #f3e6e8;
  --focus: #8f3f57;
  --accent-strong: #94475e;
  --accent-soft: #f6e1e6;
  --sunken: #f2e8e8;
  --sunken-line: #e7d4d7;
  --nav-surface: #fffcfbf5;
}

:root[data-color-theme="night"],
:root[data-color-theme="sea-night"],
:root[data-color-theme="blossom-night"] {
  color-scheme: dark;
  --surface: #1b1f1a;
  --paper: #242a23;
  --ink: #e6e9df;
  --muted: #a3a996;
  --accent: #a9c38b;
  --line: #363e34;
  --soft: #2d342b;
  --focus: #c7dcae;
  --on-accent: #1b1f1a;
  --accent-strong: #c2d8a8;
  --accent-soft: #33402b;
  --sunken: #20251f;
  --sunken-line: #3a4337;
  --danger: #e8907c;
  --danger-strong: #e07a63;
  --danger-line: #6b3a30;
  --warning-surface: #3a3222;
  --warning-line: #5c4b2f;
  --warning-ink: #f1dfb6;
  --nav-surface: #242a23f2;
  --plan-sage: #8fae74;
  --plan-sage-tint: #2f3a28;
  --plan-sage-ink: #cfe0bd;
  --plan-clay: #d98a6a;
  --plan-clay-tint: #43302a;
  --plan-clay-ink: #f2cbb9;
  --plan-sky: #79a9d1;
  --plan-sky-tint: #263746;
  --plan-sky-ink: #c4dcf0;
  --plan-plum: #b08bc2;
  --plan-plum-tint: #382d40;
  --plan-plum-ink: #e2d0ea;
  --plan-rose: #d98aa0;
  --plan-rose-tint: #43292f;
  --plan-rose-ink: #f3cbd6;
  --plan-sun: #d8b25a;
  --plan-sun-tint: #3f3522;
  --plan-sun-ink: #f1dfb0;
  --plan-slate: #9aa4ad;
  --plan-slate-tint: #2d3237;
  --plan-slate-ink: #d7dde2;
  --pico-form-element-background-color: var(--sunken);
}

/* The sea and blossom night versions keep the shared dark tokens above and change the
   surfaces and accent to their own family. */
:root[data-color-theme="sea-night"] {
  --surface: #171d20;
  --paper: #1f272b;
  --ink: #e1e9ec;
  --muted: #9dadb3;
  --accent: #7fb3c9;
  --line: #313c42;
  --soft: #263136;
  --focus: #a8cfe0;
  --on-accent: #171d20;
  --accent-strong: #9ecbdd;
  --accent-soft: #24394a;
  --sunken: #1b2226;
  --sunken-line: #34424a;
  --nav-surface: #1f272bf2;
}

:root[data-color-theme="blossom-night"] {
  --surface: #1f1a1b;
  --paper: #2a2325;
  --ink: #ede3e5;
  --muted: #b09da2;
  --accent: #e099ad;
  --line: #40353a;
  --soft: #33292c;
  --focus: #f0bccb;
  --on-accent: #1f1a1b;
  --accent-strong: #ecb3c3;
  --accent-soft: #46303a;
  --sunken: #241e20;
  --sunken-line: #46393d;
  --nav-surface: #2a2325f2;
}

/* Cycle colors are scoped to their components; the dark themes need their own. */
:root[data-theme="dark"] .cycle-page,
:root[data-theme="dark"] .plan-calendar-card,
:root[data-theme="dark"] .plan-day-panel {
  --cycle-period: #d98a9a;
  --cycle-period-tint: #43292f;
  --cycle-predicted-tint: #33252a;
  --cycle-fertile: #7fb8ae;
  --cycle-fertile-tint: #23383a;
  --cycle-ink: #f3cbd6;
}

/* Theme swatches in Settings show each theme's own colors, whatever theme is active. */
.theme-swatch[data-swatch="warm"] {
  --swatch-surface: #f7f4ed;
  --swatch-paper: #fffefa;
  --swatch-accent: #596c45;
}
.theme-swatch[data-swatch="sea"] {
  --swatch-surface: #f2f6f7;
  --swatch-paper: #fcfeff;
  --swatch-accent: #2f6f8a;
}
.theme-swatch[data-swatch="blossom"] {
  --swatch-surface: #f9f3f2;
  --swatch-paper: #fffcfb;
  --swatch-accent: #b05a72;
}
.theme-swatch[data-swatch="night"] {
  --swatch-surface: #1b1f1a;
  --swatch-paper: #242a23;
  --swatch-accent: #a9c38b;
}
.theme-swatch[data-swatch="sea-night"] {
  --swatch-surface: #171d20;
  --swatch-paper: #1f272b;
  --swatch-accent: #7fb3c9;
}
.theme-swatch[data-swatch="blossom-night"] {
  --swatch-surface: #1f1a1b;
  --swatch-paper: #2a2325;
  --swatch-accent: #e099ad;
}
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 0;
}
.theme-picker .theme-option {
  position: relative;
  display: grid;
  gap: 6px;
  /* Pico sizes labels that hold a radio to their content. */
  width: auto;
  margin: 0;
  cursor: pointer;
}
.theme-option input {
  position: absolute;
  opacity: 0;
}
.theme-swatch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  height: 64px;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--swatch-surface);
}
.theme-swatch::before,
.theme-swatch::after {
  content: "";
  border-radius: 8px;
}
.theme-swatch::before {
  background: var(--swatch-paper);
}
.theme-swatch::after {
  background: var(--swatch-accent);
}
.theme-option input:checked + .theme-swatch {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.theme-option input:focus-visible + .theme-swatch {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.theme-option span:last-child {
  font-size: 0.88rem;
  text-align: center;
}