/* ───────────────────────────────────────────────────────────────────────────
   Theme guard — keep every page looking as designed in browser dark modes.

   Samsung Internet's dark mode (and Chrome's "auto dark") repaint any site
   that does not declare dark-mode support: backgrounds go black and coloured
   headings become dark-on-dark. Declaring "light dark" tells the browser the
   page handles dark mode itself, so it stops repainting it.

   The cost of declaring it: anything a page does NOT colour itself would then
   take the browser's dark defaults — default text, form fields, links. The
   rules below pin those defaults to the light look the site was built with.
   They use :where(), which has zero specificity, so any page's own styling
   (.form-group input, buttons, link colours…) still wins everywhere.

   Loaded FIRST by every full document: base.html, index.html,
   auth/register_society_progressive.html and the forum's base.html.
   Verified by rendering pages normally and under forced dark + system dark.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;
}

/* Samsung Internet documents that it leaves a site alone when the site answers
   prefers-color-scheme itself; this is that answer: stay as designed. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light dark;
  }
}

/* Default text colour for anything that inherits rather than sets one. */
:where(html) {
  color: #1f2937;
}

/* Text fields, selects and text areas a page has not styled. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select,
  textarea) {
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid #767676;
  border-radius: 2px;
}

/* Buttons a page has not styled. */
:where(button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]) {
  background-color: #efefef;
  color: #1f2937;
  border: 1px solid #767676;
  border-radius: 3px;
}

/* Checkboxes and radios: the light theme's accent, not the dark one's. */
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: #0075ff;
}

/* Links a page has not coloured. */
:where(a) {
  color: #0000ee;
}

:where(a:visited) {
  color: #551a8b;
}

/* Placeholder text in unstyled fields. */
:where(input, textarea)::placeholder {
  color: #757575;
}

/* Parts the browser draws inside form fields. Only in dark mode — in light
   mode the native drawing already matches the site, and is left untouched. */
@media (prefers-color-scheme: dark) {
  /* The file-upload button ("Choose file") would turn dark grey. */
  input[type="file"]::file-selector-button {
    background-color: #efefef;
    color: #1f2937;
    border: 1px solid #767676;
    border-radius: 3px;
  }

  /* Date/time pickers: the calendar/clock icon is drawn light — invisible on
     the white field. Flip it back to dark. */
  input::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
}