/* Night theme. The page follows the device setting until the person picks a theme with the moon/sun button
   (static/js/theme.js stores the choice). Tokens first; dark-auto.css (generated) remaps hard-coded colours;
   the hand-made rules below cover what a plain colour swap cannot. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #7C9DFF;
  --color-primary-dark: #A9BEFF;
  --color-primary-light: #9DB5FF;
  --color-primary-hover: #A9BEFF;
  --color-accent: #FF5A4F;
  --color-accent-hover: #FF776E;
  --color-background: #0D1322;
  --color-surface: #151D31;
  --color-border: #2A3552;
  --color-text: #E4E9F5;
  --color-text-muted: #A3AECA;
  --color-text-on-primary: #FFFFFF;
  --color-success: #5BD38B;
  --color-success-bg: #12301F;
  --color-error: #FF7B72;
  --color-error-bg: #3A1715;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  /* Blue used as a FILL (headers, hero cards, selected chips): deeper than the blue used for text. */
  --fill-primary: #2E54C6;
  --fill-primary-light: #3D6BE8;
  --fill-primary-dark: #1B3A94;
  --fill-primary-hover: #3D6BE8;
}
:root[data-theme="dark"] body { background: var(--color-background); color: var(--color-text); }
:root[data-theme="dark"] .app {
  --app-bg: #0D1322;
  --app-line: #26304A;
  --app-muted: #A3AECA;
  --app-hover: #1B2440;
  --chip-blue-bg: #1D2A50;
  --chip-green-bg: #13301F;
  --chip-grey-bg: #222B42;
  --chip-amber: #F2C26B;
  --chip-amber-bg: #3A2E12;
  color: var(--color-text);
}

/* Buttons: a filled blue button needs a deeper blue than the blue used for links and text at night. */
:root[data-theme="dark"] .btn--primary { --btn-bg: #3D6BE8; --btn-bg-hover: #5580F2; box-shadow: none; }
:root[data-theme="dark"] .btn--plain { --btn-fg: var(--color-primary); }
:root[data-theme="dark"] .btn--danger { --btn-bg: #C9362C; --btn-bg-hover: #E04A3F; }

/* Inputs */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background-color: #0F1628; color: var(--color-text); border-color: #34405F; }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #6F7C9C; }
:root[data-theme="dark"] .price-cell__box, :root[data-theme="dark"] .sset__input,
:root[data-theme="dark"] .tg select, :root[data-theme="dark"] .tg textarea { background: #0F1628; border-color: #34405F; }
:root[data-theme="dark"] .price-cell__box input, :root[data-theme="dark"] .sset__input input { background: transparent; }

/* Headings and strong ink that was a fixed navy */
:root[data-theme="dark"] .app h1, :root[data-theme="dark"] .app h2, :root[data-theme="dark"] .app h3,
:root[data-theme="dark"] .app strong, :root[data-theme="dark"] .app b { color: inherit; }
:root[data-theme="dark"] .app .an-card__title { color: var(--color-text); }

/* Switch and chips keep enough contrast */
:root[data-theme="dark"] .switch { background: #3A4566; }
:root[data-theme="dark"] .switch:checked { background: #3D6BE8; }
:root[data-theme="dark"] .an-funnel__bar { background: #3D6BE8; }
:root[data-theme="dark"] .an-funnel li:nth-child(2) .an-funnel__bar { background: #3459C4; }
:root[data-theme="dark"] .an-funnel li:nth-child(3) .an-funnel__bar { background: #2C4BA6; }
:root[data-theme="dark"] .an-funnel li:nth-child(4) .an-funnel__bar { background: #253F8C; }
:root[data-theme="dark"] .an-bar i, :root[data-theme="dark"] .perm-pill__bar i,
:root[data-theme="dark"] .tr__progress i { background: #5C83F5; }
:root[data-theme="dark"] .an-col.is-current .an-col__track i,
:root[data-theme="dark"] .an-col:hover .an-col__track i { background: #6E93FF; }
:root[data-theme="dark"] .an-tip { background: #E4E9F5; color: #0D1322; }

/* Landing: the blue hero and dark sections already work at night; the white parts become night surfaces. */
:root[data-theme="dark"] .site-footer { background: #0A0F1C; }
:root[data-theme="dark"] .pay-marks img { filter: none; }

/* Images and avatars should not glow */
:root[data-theme="dark"] img { opacity: .94; }

/* Theme button (moon / sun) */
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex: none; }
.theme-toggle:hover { background: rgb(127 140 170 / 16%); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.side .theme-toggle { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; margin-left: auto; }
.side .theme-toggle:hover { background: var(--app-hover); }

/* Slides keep their own light look in the night theme (exercise fields included). */
:root[data-theme="dark"] .dk-stage input.dk-ex__gap { background-color: #F2F6FF; color: #123BAA !important; border-color: #2457D6; }
:root[data-theme="dark"] .dk-stage textarea.dk-ex__open { background-color: #FFFFFF !important; color: #172554 !important; border-color: #DCE4F5 !important; }
:root[data-theme="dark"] .dk-stage textarea.dk-ex__open::placeholder { color: #8A95AB; }