/* Colours, the glowing desktop, and the header with the theme switch. The
   greens come from the T-shirt in avatar.webp (about #12492f), kept matte.
   Page styles live in home.css, which loads after this. */

:root {
  color-scheme: dark;
  --fg: #e7ece9; --dim: #8f9a93; --acc: #8cbfa3; --on-acc: #0c120f; --rule: #2f3833;
  --desk: #070a08; --glow1: #134b31; --glow2: #34442a; --glow3: #0d5a48;
  --card: rgba(14, 19, 16, .72); --card-edge: rgba(255, 255, 255, .09); --shadow: rgba(0, 0, 0, .45);
  --ctl-hover: color-mix(in srgb, var(--fg) 10%, transparent);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
/* Light twice: once for the system setting, once for an explicit choice.
   theme.js sets data-theme only when the visitor picks one. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --fg: #1e2622; --dim: #5b665f; --acc: #24603f; --on-acc: #fff; --rule: #d3dbd5;
    --desk: #eff2ef; --glow1: #b5d6c2; --glow2: #d6e2c2; --glow3: #a8d9c6;
    --card: rgba(255, 255, 255, .72); --card-edge: rgba(0, 0, 0, .07); --shadow: rgba(25, 38, 30, .12);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --fg: #1e2622; --dim: #5b665f; --acc: #24603f; --on-acc: #fff; --rule: #d3dbd5;
  --desk: #eff2ef; --glow1: #b5d6c2; --glow2: #d6e2c2; --glow3: #a8d9c6;
  --card: rgba(255, 255, 255, .72); --card-edge: rgba(0, 0, 0, .07); --shadow: rgba(25, 38, 30, .12);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--desk); color: var(--fg); }

/* The desktop: three soft glows drifting slowly behind everything. */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, var(--glow1), transparent 70%),
    radial-gradient(34% 38% at 78% 32%, var(--glow2), transparent 70%),
    radial-gradient(40% 40% at 55% 82%, var(--glow3), transparent 70%);
  filter: blur(40px); opacity: .6;
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* The header: the theme switch, top right. */
.top {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; max-width: 60rem; margin: 0 auto; padding: 1.25rem 1.5rem 0;
  font: 15px/1.5 var(--sans);
}

/* Light / auto / dark. The radios stay real inputs for the keyboard; the
   thumb slides under them. */
#theme-switch {
  --seg: 1.9rem;
  position: relative; display: flex; margin-left: auto; padding: 2px;
  border: 1px solid var(--card-edge); border-radius: 999px; background: var(--card);
}
#theme-switch[hidden] { display: none; }
#theme-switch .thumb {
  position: absolute; top: 2px; left: 2px; width: var(--seg); height: calc(100% - 4px);
  border-radius: 999px; background: var(--rule); transition: transform .2s ease;
}
#theme-switch[data-mode="auto"] .thumb { transform: translateX(var(--seg)); }
#theme-switch[data-mode="dark"] .thumb { transform: translateX(calc(2 * var(--seg))); }
#theme-switch label {
  position: relative; display: grid; place-items: center; width: var(--seg); height: 1.5rem;
  color: var(--dim); cursor: pointer; border-radius: 999px;
}
#theme-switch label:hover { color: var(--fg); background: var(--ctl-hover); }
#theme-switch label:has(input:checked) { color: var(--fg); }
#theme-switch label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 1px; }
#theme-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
#theme-switch .icon {
  width: .9rem; height: .9rem; margin: 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) { #theme-switch .thumb { transition: none; } }