/* ============================================================
   Shared design tokens — Nebulous LLC / StrataForge
   One system, two skins. StrataForge (strataforge.ai) is the
   source of truth for every value; Nebulous (nebulousconsult.com)
   consumes the same file and diverges only in accent frequency
   and density (the -loose rhythm variants).

   THIS FILE MUST BE BYTE-IDENTICAL IN BOTH REPOS:
     website-sf/assets/tokens.css
     website/assets/tokens.css
   Edit both together; tools/check-assets.sh fails on drift.

   Values originate from the Ledger design system (2026-07-07);
   full audit: website-sf/audit/token-diff.md (2026-07-11).
   ============================================================ */

/* --- Type foundation: Satoshi variable, self-hosted --- */
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Color ------------------------------------------------ */
  --bg: #121316;        /* page ground — never pure black */
  --bg-raised: #1b1d21; /* cards, wells, frames */
  --ink: #ececea;       /* primary text — never pure white */
  --ink-muted: #a2a5a9; /* secondary text */
  --ink-faint: #83878e; /* furniture, provenance, footers */
  --rule: #2a2c30;      /* hairline dividers */
  --accent: #e8a862;    /* ember — never a fill, never a background */
  --accent-underline: color-mix(in srgb, var(--accent) 45%, transparent);

  /* --- Type: families + weights ----------------------------- */
  --font-display: "Satoshi", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-display: 700;

  /* --- Type: size scale (static steps) ---------------------- */
  --text-2xs: 0.6875rem;  /* phase labels */
  --text-xs: 0.75rem;     /* section eyebrows */
  --text-sm: 0.8125rem;   /* captions, provenance, footers */
  --text-md: 1.05rem;     /* prose h3 (kept distinct from base: 16.8px vs 17px) */
  --text-base: 1.0625rem; /* body — 17px */
  --text-lg: 1.15rem;     /* row/card titles */

  /* --- Type: size scale (fluid steps) ----------------------- */
  --text-display: clamp(2.2rem, 6vw, 3.6rem);    /* hero h1 */
  --text-display-sm: clamp(2rem, 6vw, 3rem);     /* 404 h1 */
  --text-h1: clamp(1.8rem, 4vw, 2.4rem);         /* utility-page h1 */
  --text-h2: clamp(1.4rem, 3vw, 1.8rem);         /* section h2 */
  --text-contact: clamp(1.4rem, 3.6vw, 2rem);    /* footer email sign-off */
  --text-lead: clamp(1.25rem, 2.4vw, 1.5rem);    /* lead-in lines */

  /* --- Type: leading + tracking ------------------------------ */
  --leading-tight: 1.12;  /* headings */
  --leading-body: 1.6;    /* body copy */
  --leading-loose: 1.75;  /* long-form legal text (loose skin) */
  --tracking-tight: -0.02em;  /* headings, leads */
  --tracking-slight: -0.01em; /* large sign-offs */
  --tracking-wide: 0.12em;    /* tracked-out uppercase furniture */

  /* --- Space scale -------------------------------------------
     Value-keyed: --space-NN = NN/100 rem. Carries today's exact
     Ledger stops (zero-pixel refactor constraint). Consolidating
     near-duplicate stops (035/04, 075/08, 1/11, 125/14, 2/225)
     is a future pass that needs visual sign-off. */
  --space-015: 0.15rem;
  --space-035: 0.35rem;
  --space-04: 0.4rem;
  --space-05: 0.5rem;
  --space-075: 0.75rem;
  --space-08: 0.8rem;
  --space-1: 1rem;
  --space-11: 1.1rem;
  --space-125: 1.25rem;
  --space-14: 1.4rem;
  --space-15: 1.5rem;
  --space-2: 2rem;
  --space-225: 2.25rem;
  --space-25: 2.5rem;
  --space-35: 3.5rem;

  /* --- Rhythm ------------------------------------------------
     -loose variants are the Nebulous skin: same system, more air. */
  --pad-y: clamp(3rem, 8vh, 5rem);        /* section vertical padding */
  --pad-y-loose: clamp(4rem, 12vh, 7rem);
  --pad-hero: clamp(4rem, 14vh, 8rem);    /* hero top padding */
  --pad-x: 1.25rem;                       /* min horizontal gutter */
  --pad-x-loose: 2rem;

  /* --- Measure + containers ---------------------------------- */
  --measure: 40rem;      /* prose measure ≈640px ≈ 84 CPL in Satoshi 17px */
  --container: 1080px;   /* full-bleed elements */
  --measure-hero: 18ch;  /* hero h1 cap */
  --measure-sub: 52ch;   /* hero subline cap */

  /* --- Radii + borders ---------------------------------------- */
  --radius-1: 1px;  /* images inside frames */
  --radius-2: 2px;  /* frames, wells */
  --border-hairline: 1px solid var(--rule);
  --border-dashed: 1px dashed var(--rule);
  --border-strong: 1px solid var(--ink);  /* masthead rule only */

  /* --- Links + focus ------------------------------------------ */
  --underline-offset: 3px;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* --- Motion (the three sanctioned moves) -------------------- */
  --dur-hover: 200ms;
  --dur-reveal: 500ms;
  --dur-draw: 600ms;
  --ease: ease-out;
  --reveal-shift: 12px;

  /* --- Texture (Nebulous skin: the grid) ---------------------- */
  --grid-line: var(--bg-raised);
  --grid-cell: 60px;
}

/* Breakpoint (cannot be a custom property in @media):
   the canonical width breakpoint is 700px. Keep every
   `@media (max-width: 700px)` literal in sync with this note. */