/* Fiber design system — https://claude.ai/artifact/ (tokens generated from tokens.json).
   Self-hosted IBM Plex under the SIL OFL (assets/fonts/IBM-Plex-OFL.txt); no third-party requests. */
:root, [data-theme="light"] {
  --bg: oklch(96.8% 0.014 245);
  --panel: oklch(99.3% 0.003 245);
  --fg: oklch(22.0% 0.060 268);
  --muted: oklch(47.0% 0.045 262);
  --faint: oklch(62.0% 0.035 258);
  --line: oklch(88.5% 0.020 255);
  --grid: oklch(93.0% 0.014 255);
  --accent: oklch(50.0% 0.250 266);
  --accent-soft: oklch(93.0% 0.033 266);
  --on-accent: oklch(99.5% 0.002 245);
  --moire: #2148ee1a;
  --ell: oklch(60.0% 0.130 160);
  --hyp: oklch(60.0% 0.210 33);
  --inv: oklch(52.0% 0.217 345);
  --shadow-tip: 0 4px 14px rgba(15, 24, 54, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(19.0% 0.050 268);
    --panel: oklch(23.5% 0.055 268);
    --fg: oklch(94.5% 0.014 255);
    --muted: oklch(75.0% 0.035 258);
    --faint: oklch(55.5% 0.045 262);
    --line: oklch(33.0% 0.050 266);
    --grid: oklch(26.0% 0.050 267);
    --accent: oklch(66.0% 0.160 262);
    --accent-soft: oklch(27.5% 0.080 266);
    --on-accent: oklch(19.0% 0.050 268);
    --moire: #5a8ff31a;
    --ell: oklch(66.0% 0.140 162);
    --hyp: oklch(66.0% 0.190 36);
    --inv: oklch(58.0% 0.210 350);
    --shadow-tip: 0 6px 18px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --bg: oklch(19.0% 0.050 268);
  --panel: oklch(23.5% 0.055 268);
  --fg: oklch(94.5% 0.014 255);
  --muted: oklch(75.0% 0.035 258);
  --faint: oklch(55.5% 0.045 262);
  --line: oklch(33.0% 0.050 266);
  --grid: oklch(26.0% 0.050 267);
  --accent: oklch(66.0% 0.160 262);
  --accent-soft: oklch(27.5% 0.080 266);
  --on-accent: oklch(19.0% 0.050 268);
  --moire: #5a8ff31a;
  --ell: oklch(66.0% 0.140 162);
  --hyp: oklch(66.0% 0.190 36);
  --inv: oklch(58.0% 0.210 350);
  --shadow-tip: 0 6px 18px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
:root {
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-math: "IBM Plex Serif", Georgia, "Times New Roman", serif;
}
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("/assets/fonts/IBMPlexSansCondensed-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("/assets/fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("/assets/fonts/IBMPlexSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ── Bridge: the site's existing component CSS was written against Incision
   token names. They now resolve to Fiber values, so no component rule changes. */
:root{
  --base:var(--bg); --surface-0:var(--panel); --surface-1:var(--grid);
  --border:var(--line); --border-strong:color-mix(in oklab,var(--line),var(--faint) 55%);
  --fg-1:var(--fg); --fg-2:var(--muted); --accent-subtle:var(--accent-soft);
  /* ell / hyp / inv are Fiber's three non-accent hues; the site uses them as teal / amber / red */
  --teal:var(--ell); --amber:var(--hyp); --red:var(--inv); --green:var(--ell);
  --mark-1:var(--accent); --mark-2:var(--hyp); --mark-mute:var(--faint);
  --radius-xs:var(--radius-2); --radius-sm:var(--radius-4);
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:var(--font-body); --mono:var(--font-mono);
  --gutter:clamp(20px,5vw,64px);
}
body{background:var(--bg);color:var(--fg)}
h1,h2,h3{font-family:var(--font-display);font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Moire: the texture sits only behind surfaces that state a checked result
   (.metric = a sourced evidence card, .ledger = the evidence table). */
.metric,.ledger,.moire{position:relative;isolation:isolate}
.metric::before,.ledger::before,.moire::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:var(--moire);
  --mo-ring:#000 0,transparent 1.1px,transparent 3.4px,#000 4.5px;
  -webkit-mask-image:repeating-radial-gradient(circle at var(--mo-x,24%) var(--mo-y,135%),var(--mo-ring)),
    repeating-radial-gradient(circle at calc(var(--mo-x,24%) + 27px) var(--mo-y,135%),var(--mo-ring));
  mask-image:repeating-radial-gradient(circle at var(--mo-x,24%) var(--mo-y,135%),var(--mo-ring)),
    repeating-radial-gradient(circle at calc(var(--mo-x,24%) + 27px) var(--mo-y,135%),var(--mo-ring));
}
@media (prefers-contrast:more),(forced-colors:active){.metric::before,.ledger::before,.moire::before{display:none}}