/* GENERATED by scripts/gen-blog-chrome.mjs — do not edit.
 *
 * Ported from src/styles/tokens.css with rem converted to px (Material's root
 * font-size is ~22px, the site assumes 16px, so rem would render 1.375x too
 * large here). Loaded before theme.css — see extra_css in mkdocs.yml.
 *
 * Both schemes are emitted, so /blog follows the OS exactly like the site.
 * Edit src/styles/tokens.css and rebuild; never edit this file.
 */
:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --step--2: clamp(12px, 11.84px + 0.04vw, 12.8px);
  --step--1: clamp(14px, 13.76px + 0.08vw, 14.8px);
  --step-0: clamp(16px, 15.36px + 0.2vw, 18px);
  --step-1: clamp(19.2px, 18.24px + 0.3vw, 22.4px);
  --step-2: clamp(23.04px, 21.44px + 0.5vw, 28px);
  --step-3: clamp(27.648px, 24.96px + 0.84vw, 35.2px);
  --step-4: clamp(33.184px, 28.8px + 1.37vw, 44px);
  --step-5: clamp(39.808px, 32.8px + 2.2vw, 56px);
  --step-6: clamp(47.776px, 36.8px + 3.4vw, 72px);
  --step-7: clamp(57.328px, 40px + 5.4vw, 96px);
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.12em;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-3xs: clamp(4px, 3.84px + 0.05vw, 4.8px);
  --space-2xs: clamp(8px, 7.68px + 0.1vw, 9.6px);
  --space-xs: clamp(12px, 11.52px + 0.15vw, 14.4px);
  --space-s: clamp(16px, 15.36px + 0.2vw, 19.2px);
  --space-m: clamp(24px, 23.04px + 0.3vw, 28.8px);
  --space-l: clamp(32px, 30.4px + 0.5vw, 40px);
  --space-xl: clamp(48px, 44.8px + 1vw, 64px);
  --space-2xl: clamp(64px, 57.6px + 2vw, 96px);
  --space-3xl: clamp(96px, 83.2px + 4vw, 144px);
  --section-pad: clamp(52px, 41.6px + 2.6vw, 80px);
  --section-pad-tight: clamp(36px, 30.4px + 1.5vw, 52px);
  --width-prose: 68ch;
  --width-wide: 1440px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 68px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --border-w: 1px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 600ms;
  --dur-reveal: 800ms;
  --z-bg: 0;
  --z-content: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-toast: 300;

  --bg: #121821;
  --bg-deep: #080d15;
  --surface: #161e2a;
  --surface-hi: #1f2835;
  --border: #2a3341;
  --border-hi: #4a5667;
  --text: #e5e8ec;
  --text-dim: #ccd1d9;
  --text-faint: #b4bbc6;
  --accent: #4ade80;
  --accent-hi: #68f798;
  --accent-dim: #007e3e;
  --accent-solid: #5ae48c;
  --accent-ink: #03130c;
  --glow: rgb(74 222 128 / 0.3);
  --grid: rgb(74 222 128 / 0.07);
}

@media (prefers-color-scheme: light) {
  :root:not([data-scheme='dark']) {
    --bg: #f6f9fc;
    --bg-deep: #eaeff5;
    --surface: #ffffff;
    --surface-hi: #f1f5fa;
    --border: #c9d0da;
    --border-hi: #a9b2bf;
    --text: #1d232d;
    --text-dim: #454e5a;
    --text-faint: #636d7b;
    --accent: #008541;
    --accent-hi: #006c33;
    --accent-dim: #7fd496;
    --accent-solid: #008541;
    --accent-ink: #ffffff;
    --glow: rgb(0 133 65 / 0.14);
    --grid: rgb(0 133 65 / 0.06);
  }
}

/*
 * Verification hooks. Nothing in the blog ever sets [data-scheme] — the
 * blog has no dev build, so it must not ship a theme control. These exist so
 * either scheme can be inspected by setting the attribute by hand:
 *
 *   document.documentElement.dataset.forceScheme = 'light'
 *
 * without having to change the operating system setting to check the build.
 */
:root[data-scheme='light'] {
  --bg: #f6f9fc;
  --bg-deep: #eaeff5;
  --surface: #ffffff;
  --surface-hi: #f1f5fa;
  --border: #c9d0da;
  --border-hi: #a9b2bf;
  --text: #1d232d;
  --text-dim: #454e5a;
  --text-faint: #636d7b;
  --accent: #008541;
  --accent-hi: #006c33;
  --accent-dim: #7fd496;
  --accent-solid: #008541;
  --accent-ink: #ffffff;
  --glow: rgb(0 133 65 / 0.14);
  --grid: rgb(0 133 65 / 0.06);
}

:root[data-scheme='dark'] {
  --bg: #121821;
  --bg-deep: #080d15;
  --surface: #161e2a;
  --surface-hi: #1f2835;
  --border: #2a3341;
  --border-hi: #4a5667;
  --text: #e5e8ec;
  --text-dim: #ccd1d9;
  --text-faint: #b4bbc6;
  --accent: #4ade80;
  --accent-hi: #68f798;
  --accent-dim: #007e3e;
  --accent-solid: #5ae48c;
  --accent-ink: #03130c;
  --glow: rgb(74 222 128 / 0.3);
  --grid: rgb(74 222 128 / 0.07);
}

/* ── fonts — src/styles/fonts.css, appended verbatim ──────────────────── */
/* ============================================================================
   fonts.css — the two families, served from helius.dk itself.

   These used to come from Google Fonts, which hands every visitor's IP
   address to Google before the first byte of text renders. That contradicted
   "no third parties" on a site whose /security page checks for exactly that,
   and EU courts have treated it as a GDPR transfer. Self-hosting costs 88 kB
   and one fewer TLS handshake.

   Both files are the variable-weight latin subsets from Fontsource (OFL 1.1;
   licences sit next to them in public/fonts/). Latin covers U+0000–00FF, so
   æ ø å are included. One variable file per family serves every weight the
   tokens use, which is why there is no per-weight @font-face here.

   The family names match --font-sans / --font-mono in tokens.css exactly, so
   nothing else had to change.

   Shared with the blog: scripts/gen-blog-chrome.mjs appends this file to
   blog/assets/generated-tokens.css, so /blog loads the same files from the
   same URLs. Paths are root-absolute for that reason.
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
}