/* Generated from src/_data/tokens.json by Eleventy. Do not hand-edit values
   here -- change tokens.json (itself transcribed verbatim from DESIGN.md)
   and rebuild. AD-8: theme follows prefers-color-scheme only, no toggle. */

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* colors -- complete light palette on bare :root (default) */
  --bg: #FBFBFA;
  --bg-elevated: #F1F2F0;
  --fg: #17191B;
  --fg-muted: #5A6268;
  --accent: #8A5A00;
  --border: #868B8F;
  --border-subtle: #E2E4E3;

  /* typography */
  --font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-site-title-size: 15px;
  --font-site-title-weight: 600;
  --font-site-title-line-height: 1.4;
  --font-h1-size: 26px;
  --font-h1-weight: 600;
  --font-h1-line-height: 1.25;
  --font-h1-letter-spacing: -0.01em;
  --font-h1-mobile-size: 22px;
  --font-h1-mobile-weight: 600;
  --font-h1-mobile-line-height: 1.3;
  --font-h1-mobile-letter-spacing: -0.01em;
  --font-h2-size: 20px;
  --font-h2-weight: 600;
  --font-h2-line-height: 1.3;
  --font-h2-mobile-size: 18px;
  --font-h2-mobile-weight: 600;
  --font-h2-mobile-line-height: 1.35;
  --font-h3-size: 17px;
  --font-h3-weight: 600;
  --font-h3-line-height: 1.4;
  --font-body-size: 16px;
  --font-body-weight: 400;
  --font-body-line-height: 1.6;
  --font-meta-size: 13px;
  --font-meta-weight: 400;
  --font-meta-line-height: 1.5;
  --font-prompt-path-size: 13px;
  --font-prompt-path-weight: 400;
  --font-prompt-path-line-height: 1.5;
  --font-code-size: 13.5px;
  --font-code-weight: 400;
  --font-code-line-height: 1.55;
  --font-callout-label-size: 11px;
  --font-callout-label-weight: 600;
  --font-callout-label-line-height: 1.4;
  --font-callout-label-letter-spacing: 0.1em;

  /* spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-measure: 72ch;
  --spacing-gutter: 24px;
  --spacing-margin-mobile: 16px;
  --spacing-rule-offset: 12px;
  --spacing-sidebar: 260px;
  --spacing-layout-gap: 40px;
  --spacing-page-max: calc(72ch + 300px);

  /* radius -- effectively square; only 0/2px/3px are ever used.
     tokens.json also carries radius.full (9999px), DESIGN.md marks
     rounded.full "currently unused," so it is deliberately not emitted here. */
  --radius-default: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1113;
    --bg-elevated: #16191C;
    --fg: #E4E8EB;
    --fg-muted: #A0AAB3;
    --accent: #F0A93F;
    --border: #5E676E;
    --border-subtle: #2E353B;
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  background-color: var(--bg);
  color: var(--fg);
}