/* Design tokens — see .brain/design-system.md §1. Components reference ONLY these
   custom properties, never a font-family or color literal directly. */

/* ---- Fonts (D-013) ----
   Self-hosted only, no CDN, ever. font-display: swap.
   Morabba Pro (Fontiran) is commercial, not OFL — FontLicense.txt ships alongside it in this
   directory per the licence's own terms; the 6-digit licence code is a Phase 7 launch blocker,
   see .brain/todo.md. The other five faces are OFL (Google Fonts / Estedad project). */
@font-face {
  font-family: 'Morabba';
  src: url('/static/fonts/Morabba-Variable.woff2') format('woff2');
  font-weight: 250 900; /* the file's real fvar range; 100 was clamped anyway */
  font-display: swap;
  /* No metrics-override here: this build's hhea table reports a positive descent (a bug in the
     vendored file), which would produce nonsense size-adjust values — falls back to plain swap. */
}
@font-face {
  font-family: 'Markazi Text';
  src: url('/static/fonts/MarkaziText-Regular.woff2') format('woff2');
  /* The file's own fvar wght axis is 400-700. Declaring a bare 400 made every <strong> a
     browser-synthesized smear instead of Markazi's drawn bold. */
  font-weight: 400 700;
  /* Markazi's x-height is 0.364 of its em (measured: OS/2.sxHeight 746 / upm 2048) against
     Estedad's 0.490 and Newsreader's 0.426. At the same font-size it therefore rendered ~26%
     smaller than every other face on the page, which is why body prose read as tiny and
     lifeless while the size tokens all looked correct on paper. Normalising here rather than
     at ~8 call sites keeps one size scale meaning one optical size across all six faces. */
  size-adjust: 126%;
  font-display: swap;
}
@font-face {
  font-family: 'Estedad';
  src: url('/static/fonts/Estedad-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/static/fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/static/fonts/Newsreader-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Metrics-matched fallbacks (design-system §2: "a font swap causes no layout shift").
   size-adjust/ascent-override/descent-override computed from each font's own hhea/head tables
   against the published Arial/Times New Roman metrics (the standard reference pair for this
   technique) — measured facts, not guessed numbers. Referenced as the second link in each
   --font-fa-*/--font-latin-* stack below, ahead of the bare generic. */
@font-face {
  font-family: 'Markazi Text Fallback';
  src: local('Times New Roman');
  size-adjust: 130%; /* 103.1% measured * the 1.26 size-adjust above, so the swap still doesn't shift */
  ascent-override: 69.9%;
  descent-override: 30.1%;
}
@font-face {
  font-family: 'Estedad Fallback';
  src: local('Arial');
  size-adjust: 132.6%;
  ascent-override: 67.2%;
  descent-override: 32.8%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Times New Roman');
  size-adjust: 111.7%;
  ascent-override: 76.2%;
  descent-override: 23.8%;
}
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman');
  size-adjust: 85.9%;
  ascent-override: 73.5%;
  descent-override: 26.5%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback';
  src: local('Arial');
  size-adjust: 113.1%;
  ascent-override: 78.8%;
  descent-override: 21.2%;
}

:root {
  /* type roles — the ONLY font references a component may use */
  --font-fa-display: 'Morabba';
  --font-fa-body: 'Markazi Text', 'Markazi Text Fallback';
  --font-fa-ui: 'Estedad', 'Estedad Fallback';
  --font-latin-display: 'Instrument Serif', 'Instrument Serif Fallback';
  --font-latin-body: 'Newsreader', 'Newsreader Fallback';
  --font-latin-ui: 'Estedad', 'Estedad Fallback'; /* no separate Latin UI face chosen; Estedad covers Latin */
  --font-latin-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback';

  --font-display: var(--font-fa-display), var(--font-latin-display), serif;
  --font-body: var(--font-fa-body), var(--font-latin-body), serif;
  --font-ui: var(--font-fa-ui), var(--font-latin-ui), sans-serif;
  --font-mono: var(--font-latin-mono), monospace;

  /* colour — near-black ground, archaeological cream, earth, brick accent */
  --ink: #14110f; /* near-black, warm-shifted; never pure #000 */
  --ink-2: #3a332e;
  --paper: #f2ede3; /* warm cream */
  --paper-2: #e4dccd;
  --earth: #8a7b66;
  --earth-2: #5c5142;
  --brick: #a83a28; /* THE WALL. accent + the Red Snake line. used sparingly, never decoration */
  --brick-dim: #7a2a1d;
  --brick-on-ink: #d4694f; /* brick lifted for dark grounds: 5.31:1 on --ink (raw brick is 2.96:1) */

  --rule: color-mix(in oklab, var(--ink) 14%, transparent);
  --rule-on-ink: color-mix(in oklab, var(--paper) 18%, transparent);
  --focus: var(--brick);

  /* line-height — Persian needs the air, Latin reads tighter */
  --leading-fa: 1.85;
  --leading-latin: 1.5;

  /* spacing — 4px base scale for component-level gaps/padding */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* rhythm — one line-height unit; section-level vertical spacing is set in multiples of this,
     not raw pixels, so the vertical grid survives a font swap (design-system §1). */
  --lh: 1.6rem;

  /* type scale — clamp() so it scales with viewport without a breakpoint per size */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  --text-display: clamp(3rem, 2.3rem + 3.5vw, 5.5rem);

  /* the page's inline gutter — one value, so container tiers can be expressed against it */
  --pad: clamp(var(--space-5), 5vw, var(--space-8));

  --measure: 40em; /* prose line length; em-based so it tracks the active font's average glyph width */
}

/* Institutional document rhythm: corners, not cards. No border-radius above 2px anywhere,
   no box-shadow for elevation — depth comes from rules, spacing, ground colour. */