/* =====================================================================
   Ferrith Docs — brand tokens (the :root block of the design bundle's
   docs-system.css, split per design-system.md). Light-only at v1; a dark
   theme arrives as a `@media (prefers-color-scheme: dark)` token block —
   classes never hard-code colours. Liquid Blue (Infra's accent) on the
   shared Ferrith keys: Space Grotesk / Inter / JetBrains Mono, the chamfer,
   the matrix texture, anthracite.
   ===================================================================== */
:root {
  --surface: #ffffff;
  --surface-muted: #f7f8f9;
  --surface-subtle: #fbfbfc;
  --surface-sunken: #f1f3f5;
  --surface-hover: #f6f8fa;
  --border: #e5e6e8;
  --border-strong: #d6d8db;
  --ink: #1a1d22;
  --ink-2: #5a606a;
  --ink-3: #8a8f97;
  /* Liquid Blue ramp (Infra's deepened brand #B8D7F5) */
  --accent: #2E6DB4;
  --accent-strong: #245B98;
  --accent-text: #1D5794;
  --accent-weak: #e7f1fb;
  --accent-weak-2: #d5e6f8;
  --accent-line: #bcd8f3;
  --ok: #2f7a4f; --ok-weak: #e9f4ee; --ok-line: #c2e0cf;
  --warn: #b4632a; --warn-weak: #fbefe3; --warn-line: #f0cfac;
  --danger: #c8453a; --danger-weak: #fbeae8; --danger-line: #ecc6c1;
  --info-weak: #e7f1fb; --info-line: #bcd8f3;
  --neutral-weak: #eef0f1; --neutral-fg: #5a606a; --neutral-line: #dfe1e4;
  --anthracite: #2C3138;
  --shadow-sm: 0 1px 2px rgba(20,24,30,0.05), 0 1px 1px rgba(20,24,30,0.03);
  --shadow-md: 0 2px 8px rgba(20,24,30,0.06), 0 8px 24px rgba(20,24,30,0.05);
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
  --r-md: 8px; --r-lg: 12px; --chamfer: 8px;
}

html, body { margin: 0; padding: 0; min-height: 100%; }
body { background: var(--surface); color: var(--ink); font-family: var(--font-body); }

/* The two signature textures */
.dx-chamfer { clip-path: polygon(var(--chamfer) 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0% calc(100% - var(--chamfer)), 0% var(--chamfer)); }
.dx-matrix { background-image: linear-gradient(rgba(44,49,56,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(44,49,56,0.045) 1px, transparent 1px); background-size: 26px 26px; }