/* Colour tokens shared by every page. Dark is the default for every visitor;
   light applies only when the visitor picks it (html[data-theme="light"], remembered in localStorage).
   Each page's own :root still sets --ground, --ink, --ink-2, --accent, --line and --ink-3 for dark. */
:root {
  color-scheme: dark;
  --raise: #252527;        /* floating panels, buttons */
  --raise-2: #2e2e31;      /* hover / active rows */
  --surface: #232325;      /* window mockups */
  --line: #3a3a3c;         /* hairlines */
  --line-mid: #4a4a4e;     /* pill outlines */
  --line-strong: #5a5a5e;  /* underlines, quiet borders */
  --ink-soft: #d1d1d6;     /* lists that sit between ink and ink-2 */
  --ink-3: #6e6e73;        /* placeholders, optional marks */
  --ink-hint: #8e8e93;
  --danger: #d9776b;
  --shadow: rgba(0, 0, 0, .35);
  --logo-filter: none;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f5f5f7;
  --ink: #1c1c1e;
  --ink-2: #6e6e73;
  --accent: #48484a;       /* the silver accent, darkened to read on a light ground */
  --raise: #ffffff;
  --raise-2: #ebebef;
  --surface: #ffffff;
  --line: #dcdce0;
  --line-mid: #c7c7cc;
  --line-strong: #aeaeb2;
  --ink-soft: #3a3a3c;
  --ink-3: #8e8e93;
  --ink-hint: #86868b;
  --danger: #c0473a;
  --shadow: rgba(0, 0, 0, .10);
  --logo-filter: invert(1);   /* the logo files are white */
}

img[src*="lowchs-logo-white"], img[src*="lowchs-slash"] { filter: var(--logo-filter); }

/* Smooth hand-over when the visitor switches theme (the class is only set during the switch) */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease !important;
}

/* The switch: a quiet round icon button, top right */
.theme-toggle {
  flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;   /* same size as the WhatsApp / mail buttons */
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  transition: color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.theme-toggle svg { width: 20px; height: 20px; }
@media (max-width: 700px) { .theme-toggle { width: 50px; height: 50px; } }   /* matches the phone size in fab.css */
.theme-toggle.pinned { position: fixed; z-index: 12; top: var(--pin-top, var(--margin)); right: var(--margin); }
/* In a header: nav and switch sit together at the right end */
header.has-theme-toggle > nav { margin-left: auto; }