/* Tokens shared by every page, in both languages.
   The theme is data-theme on <html>, set by /js/site.js before the first paint:
   the viewer's saved choice, otherwise the system's. The media query only covers
   a browser without JavaScript, which keeps following the system as before. */
:root {
  --paper: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F4F3EE;
  --line: #E7E5DD;
  --ink-900: #0E1817;
  --ink-700: #2C3A38;
  --ink-500: #5B6764;
  --teal-600: #009688;
  --teal-700: #007A6C;
  --teal-900: #003D36;
  --amber-bg: #FEF3C7;
  --amber-ink: #92400E;
  --ok-bg: #DCFCE7;
  --ok-ink: #166534;
  --shadow: 0 10px 40px rgba(14, 24, 23, .10);
  --radius: 20px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0E1411;
  --surface: #161D1B;
  --surface-2: #1F2725;
  --line: #2A332F;
  --ink-900: #F0F2EF;
  --ink-700: #CFD5D2;
  --ink-500: #96A19D;
  --teal-600: #14B8A6;
  --teal-700: #5EEAD4;
  --teal-900: #CCFBF1;
  --amber-bg: #3B2F12;
  --amber-ink: #FCD34D;
  --ok-bg: #10281A;
  --ok-ink: #86EFAC;
  --shadow: 0 10px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #0E1411;
    --surface: #161D1B;
    --surface-2: #1F2725;
    --line: #2A332F;
    --ink-900: #F0F2EF;
    --ink-700: #CFD5D2;
    --ink-500: #96A19D;
    --teal-600: #14B8A6;
    --teal-700: #5EEAD4;
    --teal-900: #CCFBF1;
    --amber-bg: #3B2F12;
    --amber-ink: #FCD34D;
    --ok-bg: #10281A;
    --ok-ink: #86EFAC;
    --shadow: 0 10px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

/* Header controls: language and theme, on every page. */
.controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.theme-toggle {
  width: 36px; height: 36px; flex: none; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--ink-700);
  border: 1px solid var(--line); border-radius: 999px;
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* The icon shows the theme a tap switches to. Without JavaScript the page follows
   the system and the button could not work, so it is not shown. */
:root[data-theme="dark"] .theme-toggle .to-dark,
:root[data-theme="light"] .theme-toggle .to-light,
:root:not([data-theme]) .theme-toggle { display: none; }
.lang {
  display: inline-flex; flex: none; padding: 2px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.lang a {
  padding: 9px 9px; border-radius: 999px;
  color: var(--ink-500); text-decoration: none;
}
.lang a[aria-current="true"] { background: var(--surface-2); color: var(--ink-900); }