/* ── THEME: dark-room by default, light on request ──
   Pages keep their own :root tokens (the dark values). This file adds:
   - channel tokens so translucent colours follow the theme: rgb(var(--ink-rgb) / .1)
   - the light values, on :root[data-theme="light"]
   - the dark values again on any element marked data-theme="dark", for photo stages
     that stay dark inside a light page (and a transparent nav sitting over one)      */

:root,
[data-theme="dark"],
[data-theme-top="dark"]:not(.solid) {
  --bg: #090C10; --surface: #0E1318; --raise: #141A21; --raise-2: #1B232C;
  --ink: #DDD9D0; --muted: rgba(221,217,208,.55); --muted-t: rgba(221,217,208,.65); --faint: rgba(221,217,208,.08);
  --accent: #2196F3; --accent-track: rgba(33,150,243,.16); --on-accent: #090C10;
  --prev: #6B7178; --neg: #EF5350; --warn: #E9B949;
  --bg-rgb: 9 12 16; --ink-rgb: 221 217 208; --accent-rgb: 33 150 243;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F2EFEA; --surface: #E7E3DC; --raise: #F8F6F2; --raise-2: #ECE8E1;
  --ink: #15191E; --muted: rgba(21,25,30,.62); --muted-t: rgba(21,25,30,.7); --faint: rgba(21,25,30,.1);
  --accent: #1565C0; --accent-track: rgba(21,101,192,.16); --on-accent: #FFFFFF;
  --prev: #8B9198; --neg: #C62828; --warn: #8A6100;
  --bg-rgb: 242 239 234; --ink-rgb: 21 25 30; --accent-rgb: 21 101 192;
  color-scheme: light;
}
/* inherited text colour was resolved on <body>; a dark stage resolves it again */
[data-theme="dark"], [data-theme-top="dark"]:not(.solid) { color: var(--ink); }

/* ── TOGGLE ── */
.theme-tog {
  width: 36px; height: 36px; display: inline-grid; place-items: center; flex-shrink: 0;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  color: var(--muted); pointer-events: all;
  transition: color .2s, background-color .2s, transform .2s;
}
.theme-tog:hover { color: var(--ink); background: rgb(var(--ink-rgb) / .08); }
.theme-tog:active { transform: scale(.92); }
.theme-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-tog svg { grid-area: 1 / 1; transition: opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1); }
.theme-tog .i-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="light"] .theme-tog .i-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="light"] .theme-tog .i-moon { opacity: 1; transform: none; }

html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-tog svg { transition: none; }
}

.ltog .theme-tog { margin-right: 6px; }
.nav-tools { display: flex; align-items: center; gap: 12px; }
@media (max-width: 480px) {
  .theme-tog { width: 32px; height: 32px; }
  .ltog .theme-tog { margin-right: 2px; }
}