/* ---- the dark theme (#262) ----

   `ui/header_chrome.py` puts `aucra-dark` on the root element, before the
   first paint for a reader who chose it, and a press toggles it. The block
   sets the dark value of every colour token of brand.css and nothing else,
   so both themes draw through the same rules. It holds on screens only: a
   printed page stays light. `tests/test_dark_theme.py` holds every ratio:
   --text 13.9:1 on the panel, --muted 6.93:1, --placeholder 6.29:1, the gold
   10.3:1, --line-control 4.57:1. Paper stays white in both themes: the
   device picture, 7.4's figure and the QR code. */
@media screen {
  :root.aucra-dark {
    color-scheme: dark;
    --ink: #e3e8ed;
    --ink-soft: #c9d1d9;
    --mist: #222930;
    --page: #0e1216;
    --panel: #171c21;
    --line: #2e363f;
    --text: #e3e8ed;
    --muted: #9ba6b1;
    --gold-deep: #f9bf3d;
    --gold-wash: #3a2f12;
    --output-wash: #211e14;
    --output-line: #5a4a1c;
    --pass: #5cc286;
    --pass-wash: #14301f;
    --warn: #f0954a;
    --warn-wash: #3a2414;
    --gap: #ff8a7f;
    --gap-wash: #3d1916;
    --wash-head: #1d2329;
    --wash-band: #1a1f25;
    --line-strong: #46505b;
    --on-ink: #0e1216;
    --shade: 0 0 0;
    --gold-tint: #241f15;
    --idle: #4f5a65;
    --idle-soft: #2e363f;
    --series: #4a90e2;
    --series-hover: #6aa6ec;
    --risk-1-wash: #1f2c17;
    --risk-1-ink: #9fcf6a;
    --risk-4-wash: #3d1916;
    --risk-5-wash: #521b1b;
    --risk-5-ink: #ffc2bc;
    --placeholder: #939ea9;
    --line-control: #7a8591;
    --choice-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.3l2.3 2.3 4.6-4.9' fill='none' stroke='%230e1216' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239ba6b1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  }
}

/* Quasar's own dark (`ui.dark_mode`, set beside the class in `root.shell`)
   draws the body's words white and lights its raised parts with a white
   glow and white edges. These put them back on the tokens. */
body.body--dark {
  color: var(--text);
}
/* A primary button's words are Quasar's `text-white !important`, which on
   the dark's light ink would read 1.27:1; --on-ink is white in light. In
   `base`, as the toasts' rule in content_controls.css explains: an important
   declaration only beats Quasar's layer from an earlier one. */
@layer base {
  .bg-primary.text-white {
    color: var(--on-ink) !important;
  }
}
.q-card--dark,
.q-menu--dark,
.q-date--dark,
.q-time--dark,
.q-table__card--dark,
.q-stepper--dark,
.q-uploader--dark {
  border-color: var(--line);
  box-shadow: 0 1px 5px rgb(var(--shade) / 0.2), 0 2px 2px rgb(var(--shade) / 0.14),
    0 3px 1px -2px rgb(var(--shade) / 0.12);
}
body.body--dark .q-layout__shadow::after {
  box-shadow: none;
}
body.body--dark .q-header,
body.body--dark .q-footer,
body.body--dark .q-drawer,
.q-list--dark,
.q-item--dark,
.q-table--dark,
.q-table--dark th,
.q-table--dark td,
.q-table--dark tr,
.q-table--dark thead {
  border-color: var(--line);
}
.q-dark,
.q-list--dark,
.q-item--dark,
.q-field--dark .q-field__native,
.q-field--dark .q-field__input,
.q-field--dark .q-field__prefix,
.q-field--dark .q-field__suffix {
  color: var(--text);
}
.q-separator--dark {
  background: var(--line);
}