/* ============================================================
   FIBRIC design tokens — single source of truth (Oxblood system).
   Concept: "We bring reason to matter."
   Fraunces (reason) · Hanken Grotesk (matter) · Spline Sans Mono (machine)
   Locked 2026-06-14. See skill: fibric-web-design.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..560&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces — warm-light editorial */
  --paper:#f7f4ec; --paper-2:#ede5d7; --paper-3:#e4dcca; --card:#fffdf8;
  --ink:#1a1611; --ink-2:#43392f; --mid:#6e6354; --faint:#a59a86;
  --line:#e6ddcf; --line-2:#d7cebb;

  /* cinematic dark family — heroes, dark sections, footer */
  --night:#16110d; --night-2:#1e1810; --night-3:#291f16;
  --cream:#f3efe6; --cream-2:#ccc2b0; --cream-3:#8f8472; --night-line:#342a20;

  /* THE accent — oxblood — plus bronze, tied to the centerpiece */
  --clay:#963626; --clay-deep:#75271b; --bronze:#c68f49; --bronze-deep:#a9762f;
  /* legacy aliases so older markup keeps resolving */
  --grad:linear-gradient(90deg,#963626,#c68f49);
  --lime:#c68f49; --green:#7b8f6b; --coral:#963626; --sky:#8a7e6a;

  /* type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --display:"Hanken Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* layout */
  --maxw:1240px; --gutter:clamp(1.25rem,5vw,5rem);
  --r-pill:999px; --r-card:18px; --r-sm:11px;
  /* layered, hue-tinted shadows — warm brown light, one source, 3-4 stacked layers */
  --shadow-hsl:30 28% 11%;
  --shadow-card:0 1px 1px hsl(var(--shadow-hsl)/.04), 0 4px 8px -2px hsl(var(--shadow-hsl)/.05), 0 14px 26px -10px hsl(var(--shadow-hsl)/.10);
  --shadow-float:0 2px 4px hsl(var(--shadow-hsl)/.05), 0 8px 16px -4px hsl(var(--shadow-hsl)/.07), 0 22px 40px -14px hsl(var(--shadow-hsl)/.16), 0 36px 64px -28px hsl(var(--shadow-hsl)/.14);

  /* fluid type scale — restrained; body sits at ~16px, display tops out smaller */
  --s5:clamp(2.5rem,1.5rem + 4.6vw,4.9rem);
  --s4:clamp(2rem,1.4rem + 2.7vw,3.4rem);
  --s3:clamp(1.5rem,1.25rem + 1.3vw,2.2rem);
  --s2:clamp(1.2rem,1.08rem + .6vw,1.5rem);
  --s1:clamp(1.02rem,.99rem + .2vw,1.12rem);
  --s0:clamp(.95rem,.93rem + .1vw,1rem);
  --sm:.75rem;
}

/* ---- DARK theme — docs / API reference (warm, not cold) ---- */
:root[data-theme="dark"], .docs-dark{
  --paper:#14110d; --paper-2:#1b160f; --card:#1f180f; --line:#2c241a; --line-2:#352b1f;
  --ink:#f3efe6; --ink-2:#cdc3b0; --mid:#9a8f7c; --faint:#6b6253;
  --code-bg:#0f0c08; --code-line:#241d14; --code-ink:#ece6da; --kbd:#1b160f;
  --night:#0f0c08; --cream:#f3efe6;
  --shadow-float:0 24px 60px -22px rgba(0,0,0,.6);
  --shadow-card:0 1px 0 rgba(255,255,255,.02), 0 18px 40px -28px rgba(0,0,0,.5);
}