/* Matte greens from the T-shirt in avatar.webp (about #12492f).
   Neutral surfaces keep the portrait and primary action in focus.
   Page styles live in home.css, which loads after this. */
:root {
  color-scheme: dark;
  --fg: #e8ece9; --dim: #b0b8b2; --muted: #929d95;
  --acc: #9ac7aa; --on-acc: #15231a; --rule: #303733;
  --desk: #161918; --card: #1e2320; --card-edge: #303733;
  --ctl-hover: #2a312d;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* 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: #202823; --dim: #4c5950; --muted: #606e64;
    --acc: #285d3f; --on-acc: #fff; --rule: #d6ded7;
    --desk: #f4f5f3; --card: #e9ede8; --card-edge: #d6ded7;
    --ctl-hover: #dce3dc;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --fg: #202823; --dim: #4c5950; --muted: #606e64;
  --acc: #285d3f; --on-acc: #fff; --rule: #d6ded7;
  --desk: #f4f5f3; --card: #e9ede8; --card-edge: #d6ded7;
  --ctl-hover: #dce3dc;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--desk); color: var(--fg); }

/* The header: language and theme controls. */
.top {
  display: flex; align-items: center; gap: 16px;
  max-width: 1152px; margin: 0 auto; padding: 32px;
  font: 16px/1.5 var(--sans);
}
/* EN / DE, just left of the theme switch. */
.lang { display: flex; gap: 4px; margin-left: auto; }
.lang a {
  display: grid; place-items: center; min-width: 40px; min-height: 40px;
  border-radius: 4px; color: var(--muted); font-size: 14px; text-decoration: none;
}
.lang a:hover { color: var(--fg); background: var(--ctl-hover); }
.lang a[aria-current] { color: var(--fg); background: var(--card); }
.lang + #theme-switch { margin-left: 0; }
/* Light / auto / dark. The radios stay real inputs for the keyboard; the
   thumb slides under them. */
#theme-switch {
  --seg: 40px;
  position: relative; display: flex; margin-left: auto; padding: 4px;
  border-radius: 8px; background: var(--card);
}
#theme-switch[hidden] { display: none; }
#theme-switch .thumb {
  position: absolute; top: 4px; left: 4px; width: var(--seg); height: calc(100% - 8px);
  border-radius: 4px; background: var(--ctl-hover); transition: transform 180ms var(--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: 40px;
  color: var(--muted); cursor: pointer; border-radius: 4px;
}
#theme-switch label:hover, #theme-switch label:has(input:checked) { color: var(--fg); }
#theme-switch label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
#theme-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
#theme-switch .icon { width: 16px; height: 16px; margin: 0; }
@media (prefers-reduced-motion: reduce) { #theme-switch .thumb { transition: none; } }
@media (max-width: 40rem) {
  .top { gap: 8px; padding: 20px; }
}