/* The dark palette and the toggle. Loaded after each page's own stylesheet,
   so the variables here override the light ones when the theme is dark. */
:root {
  --on-ink: #FFFFFF;
  --qr-bg: #FFFFFF;
  --btn-hover: #2A3038;
}
/* The dark palette follows elliptic-systems.com: page #12151a, ink white,
   body #9aa3b0, muted #6a7484, rules #1e2530. */
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #12151A;
  --card: #1A1F28;
  --card-2: #222834;
  --accent: #7FB0C0;
  --accent-ink: #9CC4D1;
  --accent-soft: #1C2A31;
  --ink: #FFFFFF;
  --body: #9AA3B0;
  --muted: #6A7484;
  --rule: #1E2530;
  --late: #E07A6E;
  --warn: #D9A860;
  --warn-soft: #2E2616;
  --late-soft: #33201D;
  --good: #7FB38A;
  --good-soft: #1A2A1E;
  --on-ink: #0F1216;
  --qr-bg: #FFFFFF;
  --btn-hover: #D9DEE3;
}
/* The logo is the website's: one light grey PNG, darkened for the light
   theme and brightened for the dark one, exactly as the site does it. */
.brand img { height: 32px; width: auto; filter: brightness(0.14); }
html[data-theme="dark"] .brand img { filter: brightness(2); }
html[data-theme="dark"] .ok { color: var(--good); background: var(--good-soft); }
html[data-theme="dark"] .pill.active, html[data-theme="dark"] .pill.customer, html[data-theme="dark"] .pill.registered,
html[data-theme="dark"] .pill.st-registered, html[data-theme="dark"] .pill.granted { color: var(--on-ink); }

/* The toggle sits in the header, as on the website: a 36px ring with a
   moon or a sun. A page without one in its header gets a floating one. */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer; padding: 0;
  display: inline-grid; place-items: center; flex: none;
  background: transparent; color: var(--body); border: 1px solid var(--rule);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--ink); }
.theme-toggle.floating { position: fixed; right: 18px; bottom: 18px; z-index: 50; background: var(--card); }
.theme-toggle svg { display: block; }
@media print { .theme-toggle { display: none; } }