/* Shared foundation for every page: the typeface, the colour tokens, and the theme switch.
   Loaded before each page's own styles, which now only describe their own components.

   Open Props supplies the scales underneath (open-props.min.css, vendored). We map the few
   we actually use onto our own names rather than sprinkling --size-6 through the markup —
   the pages keep speaking our vocabulary, and the ramps stop being hand-picked one-offs.

   Everything here is served from this domain. No font CDN, no stylesheet CDN — the privacy
   page promises no third party loads on a normal visit, and a webfont link would quietly
   break that. IBM Plex is SIL OFL 1.1; the woff2 files in fonts/ are the latin subsets. */

/* ---------------------------------------------------------------- typeface */
/* swap: text paints immediately in the fallback and reflows when Plex lands, rather than
   leaving the page blank on a slow connection. */
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
/* 700 answers for 800 too — Plex has no extrabold, and the headings ask for one */
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  font-weight:700 800;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens */
/* Light is the base. Dark arrives two ways and both must work: the OS preference, and an
   explicit choice from the toggle. The :not([data-theme="light"]) guard is what lets someone
   on a dark-mode OS pick light and actually get it. */
:root{
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --bg:#f2f4f7; --card:#ffffff; --fg:#101720; --mut:#5a6675; --line:#dde3ea; --grid:#eef1f5;
  --accent:#1a63d8; --accent-ink:#ffffff; --soft:#e8f0fe;
  --green:#15883f; --amber:#c2700a; --red:#d0342c; --gray:#95a0ae;

  /* Open Props ramps, renamed. Corners are noticeably rounder than before and the shadows
     are its layered ones, which is most of why the surfaces read differently now. */
  --radius:var(--radius-3,16px); --radius-sm:var(--radius-2,10px);
  --shadow:var(--shadow-2,0 1px 2px rgb(16 24 40 / .06));
  --shadow-lg:var(--shadow-5,0 24px 60px -28px rgb(16 24 40 / .3));
  --ease:var(--ease-3,cubic-bezier(.25,0,.3,1));

  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0e14; --card:#121822; --fg:#e3e9f1; --mut:#8c98a8; --line:#1f2733; --grid:#161d27;
    --accent:#5b95ff; --accent-ink:#08101d; --soft:#152234;
    --green:#2ea44f; --amber:#e0912f; --red:#f0564d; --gray:#8b95a3;
    --shadow:0 1px 0 rgb(0 0 0 / .5);
    --shadow-lg:0 30px 70px -30px rgb(0 0 0 / .8),0 2px 10px rgb(0 0 0 / .45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0e14; --card:#121822; --fg:#e3e9f1; --mut:#8c98a8; --line:#1f2733; --grid:#161d27;
  --accent:#5b95ff; --accent-ink:#08101d; --soft:#152234;
  --green:#2ea44f; --amber:#e0912f; --red:#f0564d; --gray:#8b95a3;
  --shadow:0 1px 0 rgb(0 0 0 / .5);
  --shadow-lg:0 30px 70px -30px rgb(0 0 0 / .8),0 2px 10px rgb(0 0 0 / .45);
  color-scheme:dark;
}

body{font-family:var(--sans);font-feature-settings:"cv05" 1;letter-spacing:-.005em}

/* ------------------------------------------------------------ theme switch */
.themesw{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--card);flex:none}
.themesw button{border:0;background:transparent;color:var(--mut);cursor:pointer;padding:6px 9px;
  display:inline-flex;align-items:center;font:inherit;line-height:1}
.themesw button+button{border-left:1px solid var(--line)}
.themesw button svg{width:15px;height:15px;display:block}
.themesw button:hover{color:var(--accent)}
.themesw button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}