/* Light and dark colour modes, shared by every page. Load it LAST in <head>, after the page's other stylesheets,
   together with /theme-modes.js (which sets data-theme="light" or "dark" on <html>).

   How to keep new pages in both modes:
   - Use the colour variables below (var(--bg), var(--ink), var(--accent) and so on), never a fixed colour.
   - For a translucent tint use rgb(var(--ink-rgb) / 0.08), rgb(var(--accent-rgb) / 0.1) and so on.
   - Dark is the default; the light palette overrides the same names under :root[data-theme="light"]. */

/* Dark: cream text and soft navy links on charcoal. Light: near-black text and green links on pale yellow.
   Both keep the accent for links and small highlights; risk colours (--risk-*, --danger) stay semantic. */

:root {
  color-scheme: dark;
  --ink-rgb: 220 216 208;
  --bg-rgb: 30 31 36;
  --surface-rgb: 39 41 48;
  --accent-rgb: 147 182 230;
  --brass-rgb: 147 182 230;
  --deep-rgb: 25 26 30;
  --on-deep: #ece9e3;
  --soft-ink: #c3bfb7;
  --link-soft: #b0caee;
  --field-bg: #191a1e;
  --error-text: #ef9f8c;
  --tile-bg: #191a1e;
  --tag-ink: #c3bfb7;
  --accent-hover: #b0caee;
  --on-accent: #1e1f24;
  --dose-bg: #191a1e;

  /* Shared pages: styles.css, theme.css */
  --bg: #1e1f24;
  --surface: #272930;
  --surface-soft: #2e3039;
  --surface-lift: #363944;
  --ink: #dcd8d0;
  --muted: #a29d94;
  --accent: #93b6e6;
  --accent-dark: #7fa3d6;
  --teal: #93b6e6;
  --silver: #c3bfb7;
  --red: #e8806f;

  /* Library and tools: site.css */
  --ed-bg: #1e1f24;
  --ed-raise: #272930;
  --ed-sunk: #191a1e;
  --ed-lift: #2e3039;
  --ed-hover: #363944;
  --ed-ink: #dcd8d0;
  --ed-soft: #c3bfb7;
  --ed-muted: #a29d94;
  --ed-faint: #94908a;
  --ed-rule: rgb(220 216 208 / 0.1);
  --ed-rule-strong: rgb(220 216 208 / 0.2);
  --ed-accent: #93b6e6;
  --ed-accent-ink: #1e1f24;
  --ed-accent-wash: rgb(147 182 230 / 0.09);
  --ed-link: #b0caee;

  /* Home page and information pages: landing.css */
  --night: #1e1f24;
  --night-deep: #191a1e;
  --parchment: #dcd8d0;
  --parchment-soft: #c3bfb7;
  --ash: #a29d94;
  --amber: #93b6e6;
  --amber-hi: #b0caee;
  --brass: #93b6e6;
  --slate: #8d9fb7;

  /* Adverse effects: adverse-effects.css */
  --bg-raise: #272930;
  --bg-sunk: #191a1e;
  --ink-soft: #c3bfb7;
  --faint: #94908a;
  --rule: rgb(220 216 208 / 0.1);
  --rule-strong: rgb(220 216 208 / 0.2);
  --accent-ink: #1e1f24;
  --accent-wash: rgb(147 182 230 / 0.09);
  --link: #b0caee;
}

:root .dashboard-page {
  --dashboard-bg: #1e1f24;
  --dashboard-surface: #272930;
  --dashboard-surface-2: #2e3039;
  --dashboard-surface-3: #363944;
  --dashboard-border: rgb(220 216 208 / 0.12);
  --dashboard-text: #dcd8d0;
  --dashboard-muted: #a29d94;
  --dashboard-accent: #93b6e6;
  --dashboard-accent-hover: #b0caee;
  --dashboard-accent-soft: rgb(147 182 230 / 0.12);
  --dashboard-teal: #93b6e6;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink-rgb: 39 38 32;
  --bg-rgb: 250 247 232;
  --surface-rgb: 253 251 243;
  --accent-rgb: 46 106 62;
  --brass-rgb: 46 106 62;
  --deep-rgb: 253 251 243;
  --on-deep: #272620;
  --soft-ink: #45443a;
  --link-soft: #2e6a3e;
  --field-bg: #fdfbf3;
  --error-text: #b8402e;
  --tile-bg: #f0ecd6;
  --tag-ink: #45443a;
  --accent-hover: #245432;
  --on-accent: #faf7e8;
  --dose-bg: #f0ecd6;

  /* Shared pages: styles.css, theme.css */
  --bg: #faf7e8;
  --surface: #fdfbf3;
  --surface-soft: #f0ecd6;
  --surface-lift: #e7e2ca;
  --ink: #272620;
  --muted: #5d5a4c;
  --accent: #2e6a3e;
  --accent-dark: #245432;
  --teal: #2e6a3e;
  --silver: #45443a;
  --red: #b8402e;
  --shadow: 0 18px 42px rgb(39 38 32 / 0.12);

  /* Library and tools: site.css */
  --ed-bg: #faf7e8;
  --ed-raise: #fdfbf3;
  --ed-sunk: #f0ecd6;
  --ed-lift: #f0ecd6;
  --ed-hover: #e7e2ca;
  --ed-ink: #272620;
  --ed-soft: #45443a;
  --ed-muted: #5d5a4c;
  --ed-faint: #6b6858;
  --ed-rule: rgb(39 38 32 / 0.12);
  --ed-rule-strong: rgb(39 38 32 / 0.24);
  --ed-accent: #2e6a3e;
  --ed-accent-ink: #faf7e8;
  --ed-accent-wash: rgb(46 106 62 / 0.1);
  --ed-link: #2e6a3e;

  /* Home page and information pages: landing.css */
  --night: #faf7e8;
  --night-deep: #f0ecd6;
  --parchment: #272620;
  --parchment-soft: #45443a;
  --ash: #5d5a4c;
  --amber: #2e6a3e;
  --amber-hi: #245432;
  --brass: #2e6a3e;
  --slate: #4f5f73;

  /* Adverse effects: adverse-effects.css */
  --bg-raise: #fdfbf3;
  --bg-sunk: #f0ecd6;
  --ink-soft: #45443a;
  --faint: #6b6858;
  --rule: rgb(39 38 32 / 0.12);
  --rule-strong: rgb(39 38 32 / 0.24);
  --accent-ink: #faf7e8;
  --accent-wash: rgb(46 106 62 / 0.1);
  --link: #2e6a3e;
  --risk-high: #c0452e;
  --risk-moderate: #b7701f;
  --risk-low: #8a7440;
  --risk-minimal: #4e7a67;
  --risk-loss: #3f7aa8;
  --danger: #b8402e;
}

:root[data-theme="light"] .dashboard-page {
  --dashboard-bg: #faf7e8;
  --dashboard-surface: #fdfbf3;
  --dashboard-surface-2: #f0ecd6;
  --dashboard-surface-3: #e7e2ca;
  --dashboard-border: rgb(39 38 32 / 0.12);
  --dashboard-text: #272620;
  --dashboard-muted: #5d5a4c;
  --dashboard-accent: #2e6a3e;
  --dashboard-accent-hover: #245432;
  --dashboard-accent-soft: rgb(46 106 62 / 0.12);
  --dashboard-teal: #2e6a3e;
}

/* The site search box on the home page was a white-on-glass pill made for a dark photo */
:root[data-theme="light"] .lp-search input {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: 0 8px 28px rgb(39 38 32 / 0.08);
  color: var(--parchment);
}

:root[data-theme="light"] .lp-search input::placeholder,
:root[data-theme="light"] .lp-search__submit {
  color: var(--parchment-soft);
}

:root[data-theme="light"] .lp-search__submit:hover {
  background: rgb(var(--ink-rgb) / 0.08);
}

:root[data-theme="light"] .lp-search input:focus-visible,
:root[data-theme="light"] .lp-search__submit:focus-visible {
  outline-color: var(--amber);
}

/* Hero screenshot: a dark and a light picture, one shown per mode */
.lp-hero__shot .lp-hero__img--light {
  display: none;
}

:root[data-theme="light"] .lp-hero__shot .lp-hero__img--dark {
  display: none;
}

:root[data-theme="light"] .lp-hero__shot .lp-hero__img--light {
  display: block;
}

/* Theme switch: sits in the page header when there is a slot, otherwise in the bottom-right corner */
.theme-switch,
.theme-switch:hover {
  min-height: 0;
}

.theme-switch {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong, rgb(var(--ink-rgb) / 0.24));
  border-radius: 50%;
  background: var(--surface, #272930);
  color: var(--ink, #dcd8d0);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.theme-switch:hover {
  border-color: var(--accent, #93b6e6);
}

.theme-switch:focus-visible {
  outline: 2px solid var(--accent, #93b6e6);
  outline-offset: 2px;
}

.theme-switch svg {
  width: 20px;
  height: 20px;
}

.theme-switch__sun,
:root[data-theme="light"] .theme-switch__moon {
  display: none;
}

:root[data-theme="light"] .theme-switch__sun {
  display: block;
}

.theme-switch.theme-switch--floating {
  position: fixed;
  top: auto;
  right: 16px;
  bottom: 16px;
  left: auto;
  z-index: 60;
  width: 40px;
  height: 40px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

@media print {
  .theme-switch--floating {
    display: none;
  }
}

/* The sidebar logo is a square picture with its own dark background; round it so it reads as an app icon */
:root[data-theme="light"] .dashboard-brand-mark,
:root[data-theme="light"] .masthead-brand img {
  border-radius: 9px;
}

/* Home page header on narrow screens: logo, theme switch, Log in and menu button must fit on one row */
.lp-header__actions .lp-link {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .lp-header__actions {
    gap: 8px;
  }

  .lp-header__actions .theme-switch,
  .lp-header .lp-menu {
    width: 38px;
    height: 38px;
  }

  .lp-header .lp-brand__name {
    font-size: 1rem;
  }

  .lp-header .lp-brand {
    gap: 8px;
  }
}