/* Light and dark themes, shared by the site and the demo.
   Loaded after site.css / app.css. The page follows the device setting
   until someone uses the toggle; the choice is then remembered.
   Dark rules are screen-only, so printing always uses the light theme. */

:root {
  color-scheme: light;
  --link: var(--spruce);
  --deep: #17221e;
  --field: #ffffff;
  --header-bg: rgba(238, 241, 239, 0.92);
  --alert-ink: #7d2617;
  --ok-ink: #1d5a39;
  --flag-bg: #fbf6e9;
  --danger-line: #e3b8b0;
  --on-ink: #ffffff;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111815;
    --paper-sunk: #18211d;
    --card: #19231f;
    --ink: #e4ebe7;
    --ink-2: #a9b5af;
    --ink-3: #87948e;
    --line: #2a3631;
    --line-strong: #43514b;
    --spruce: #2e7559;
    --spruce-hover: #3a8a6a;
    --spruce-tint: #1c382d;
    --link: #82d0ab;
    --ok: #62c58e;
    --ok-tint: #163020;
    --due: #e2b14d;
    --due-tint: #382b10;
    --down: #f0836f;
    --down-tint: #3c1e19;
    --deep: #0a0f0d;
    --field: #141c19;
    --header-bg: rgba(17, 24, 21, 0.9);
    --alert-ink: #ffb6a8;
    --ok-ink: #a9e5c4;
    --flag-bg: #2a2412;
    --danger-line: #6a3027;
    --on-ink: #111815;
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #111815;
    --paper-sunk: #18211d;
    --card: #19231f;
    --ink: #e4ebe7;
    --ink-2: #a9b5af;
    --ink-3: #87948e;
    --line: #2a3631;
    --line-strong: #43514b;
    --spruce: #2e7559;
    --spruce-hover: #3a8a6a;
    --spruce-tint: #1c382d;
    --link: #82d0ab;
    --ok: #62c58e;
    --ok-tint: #163020;
    --due: #e2b14d;
    --due-tint: #382b10;
    --down: #f0836f;
    --down-tint: #3c1e19;
    --deep: #0a0f0d;
    --field: #141c19;
    --header-bg: rgba(17, 24, 21, 0.9);
    --alert-ink: #ffb6a8;
    --ok-ink: #a9e5c4;
    --flag-bg: #2a2412;
    --danger-line: #6a3027;
    --on-ink: #111815;
  }
}

/* ---------- Toggle button ---------- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink-3); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media print {
  .theme-toggle { display: none !important; }
}