/* Shared design tokens for the landing page, dashboard and API notes.
   Every color is light-dark(light value, dark value). In the dark theme only backgrounds change:
   soft gray surfaces with cream text, while the brand and status colors keep their light values
   (buttons, sections, bars). Colored text uses the *-text tokens, a lighter shade of the same hue,
   so it stays readable on dark. The browser follows the visitor's system theme; theme.js pins one
   by setting data-theme="light" or "dark" on <html>. */
:root {
  color-scheme: light dark;
  --paper: light-dark(#f8f7f2, #1d201e);
  --white: light-dark(#fff, #262a27);
  --ink: light-dark(#17231d, #f0eee6);
  --muted: light-dark(#5b6660, #a3a8a2);
  --line: light-dark(#e4e7df, #383c39);
  --green: light-dark(#0f6b4f, #0f6b4f);
  --green-deep: light-dark(#0a4a37, #0a4a37);
  --green-soft: light-dark(#e7f1ea, #1c3329);
  --orange: light-dark(#a06b13, #a06b13);
  --orange-soft: light-dark(#fff2d9, #352c1b);
  --red: light-dark(#b1493e, #b1493e);
  --red-soft: light-dark(#faeae5, #3a2622);
  /* Brand colors are identical in both themes; only text uses a lighter shade so it stays readable on dark. */
  --green-text: light-dark(#0f6b4f, #79bba0);
  --orange-text: light-dark(#a06b13, #deae6f);
  --red-text: light-dark(#b1493e, #ec8d80);
  /* Covenant status (kept separate from the brand accent) and chart series. */
  --status-above: light-dark(#0f6b4f, #0f6b4f);
  --status-above-soft: light-dark(#e7f1ea, #1c3329);
  --status-equal: light-dark(#b78429, #b78429);
  --status-below: light-dark(#b95b48, #b95b48);
  --status-unknown: light-dark(#9da498, #9da498);
  --status-above-text: light-dark(#0f6b4f, #79bba0);
  --status-equal-text: light-dark(#b78429, #dcaf69);
  --status-below-text: light-dark(#b95b48, #e6917f);
  --series-1: light-dark(#0f6b4f, #7fc1a6);
  --series-2: light-dark(#86a46a, #a1bb89);
  --series-3: light-dark(#bfaa70, #cebd8b);
  --forecast: light-dark(#b79a59, #d4bb84);
  --band: light-dark(#eee6cf, #3a3628);
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono: 'Spline Sans Mono', monospace;
}
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}
/* Added by theme.js only while switching themes, so every color fades over two seconds. */
:root.theme-fading,
:root.theme-fading *,
:root.theme-fading *::before,
:root.theme-fading *::after {
  transition:
    background-color 2s ease,
    color 2s ease,
    border-color 2s ease,
    outline-color 2s ease,
    box-shadow 2s ease,
    fill 2s ease,
    stroke 2s ease !important;
}

/* Light/dark switch shown in the landing nav and the dashboard top bar. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 15px/1 var(--sans);
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--muted);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}