/* BlackFrame Labs · design tokens (dark theme = the target look of BF01 DRAFT2 dark + bfrlabs.com night theme).
   Sources: pieces/BF01/lib/brand.js (PALETTE.dark, FONTS, HOUSE ease, label/lockup CSS), Branding/index.html (type scale,
   grain .06 overlay, vignette), pieces/BF01/lib/gl3d.js (fog, glow). See TOKENS.md for usage. Mirrors tokens.json. */

/* ---- fonts: vendored OFL TTFs (licences in fonts/OFL-*.txt). Google Fonts equivalents in TOKENS.md. ---- */
@font-face { font-family: "Anton"; src: url("fonts/Anton-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-VF.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-VF.ttf") format("truetype"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* ---- colour: the dark world ---- */
  --bf-bg: #0b0b0a;            /* page + WebGL clear (renders exactly 11,11,10) */
  --bf-black: #030303;         /* cut-to-black grade target, lockup ground */
  --bf-ink: #e8e6e0;           /* primary type, edges, points */
  --bf-ink-rgb: 232, 230, 224;
  --bf-mute: #8a8880;          /* secondary type, chapter labels */
  --bf-line: rgba(232, 230, 224, .18);   /* hairline borders (the BFR square's 1px frame) */
  --bf-line2: rgba(232, 230, 224, .32);  /* stronger hairline */
  --bf-lead: rgba(232, 230, 224, .55);   /* label leader lines */
  --bf-acct: #b8423a;          /* REC red: ignition, red boxes, the redline, centrelines. Accent only, never body text */
  --bf-acct-rgb: 184, 66, 58;
  --bf-glow: #fff1dc;          /* warm-white glow: fire core, tunnel end, mark bloom */
  --bf-warm: #ffe2c4;          /* warm strip light, exhaust pulses */
  --bf-hot: #ffd2a0;           /* spark tint */
  --bf-halo: rgba(0, 0, 0, .85);   /* text-shadow behind type over 3D */
  --bf-halo2: rgba(0, 0, 0, .6);
  --bf-vig: rgba(0, 0, 0, .42);    /* vignette edge */
  --bf-ui-panel: #1a1a18;      /* in-world UI panels (ECU face) */
  --bf-ui-bg: #121211;

  /* ---- type families ---- */
  --font-display: "Anton", "Impact", sans-serif;              /* uppercase display, lockup word, moat names */
  --font-body: "Archivo", system-ui, sans-serif;              /* body + UI copy */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;     /* labels, chapters, eyebrows, data (UPPERCASE, tracked) */
  --font-story: "Instrument Serif", Georgia, serif;           /* italic accents ("your engine.") */

  /* ---- type scale (fluid; film px at 1920 noted in TOKENS.md) ---- */
  --fs-hero: clamp(64px, 14vw, 260px);       /* Anton, lh .82, the site's hero h1 */
  --fs-display: clamp(56px, 9vw, 180px);     /* Anton, lh .84 */
  --fs-h2: clamp(40px, 5.6vw, 120px);        /* Anton, lh .86 (film: 120px chapter type) */
  --fs-label: clamp(26px, 2.3vw, 44px);      /* Anton moat names (film 44px) */
  --fs-lead: clamp(22px, 2.6vw, 40px);       /* Archivo 500, lh 1.1 */
  --fs-body: clamp(15px, 1.3vw, 20px);       /* Archivo 500, lh 1.4 */
  --fs-mono: clamp(11px, 1.0vw, 14px);       /* JetBrains Mono 500, .12em, UPPERCASE (film 28px at 1080p) */
  --fs-mono-film: clamp(12px, 1.46vw, 28px); /* the film's mono 28 scaled to the viewport */
  --fs-story: clamp(28px, 3.3vw, 64px);      /* Instrument Serif italic (film 64px) */
  --lh-display: .84; --lh-body: 1.4;
  --track-mono: .12em; --track-mono-film: .10em; --track-display: .01em;

  /* ---- layout ---- */
  --margin: clamp(16px, 5vw, 96px);          /* film margin 96 px at 1920 */
  --gap: clamp(12px, 1.8vw, 34px);
  --hairline: 1px;
  --red-tick: 56px;                          /* chapter red hairline length */

  /* ---- surface FX ---- */
  --grain-opacity: .06;      /* overlay blend, re-seeded noise (site + film) */
  --grain-blend: overlay;
  --vignette: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, var(--bf-vig) 100%);
  --fog-near: 8; --fog-far: 60;                       /* engine world (units, 1 u = 10 cm) */
  --glow-fire: 0 0 40px rgba(var(--bf-acct-rgb), .55); /* DOM echo of the red ignition bloom */

  /* ---- motion: no bounce, ≤ 3 % scale, expo-out arrivals, sine in-out moves ---- */
  --ease-house: cubic-bezier(.16, 1, .3, 1);   /* the site ease (HOUSE): every entry */
  --ease-expo-out: cubic-bezier(.16, 1, .3, 1);
  --ease-sine-in-out: cubic-bezier(.37, 0, .63, 1);
  --ease-expo-in: cubic-bezier(.7, 0, .84, 0);
  --ease-glide: cubic-bezier(.65, 0, .35, 1);  /* camera-like pans */
  --dur-micro: 180ms;  --dur-ui: 420ms;  --dur-reveal: 1300ms;  --dur-camera: 2400ms;
  --stagger-glyph: 45ms;  --stagger-line: 120ms;
  --scale-max: 1.03;
}

body { background: var(--bf-bg); color: var(--bf-ink); font: 500 var(--fs-body)/var(--lh-body) var(--font-body); -webkit-font-smoothing: antialiased; }
.t-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--lh-display); letter-spacing: var(--track-display); }
.t-mono { font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.t-body { font: 500 var(--fs-body)/var(--lh-body) var(--font-body); }
.t-story { font: italic 400 var(--fs-story)/1 var(--font-story); letter-spacing: -.01em; }
.t-mute { color: var(--bf-mute); }
.t-acct { color: var(--bf-acct); }
@media (prefers-reduced-motion: reduce) { :root { --dur-ui: 1ms; --dur-reveal: 1ms; --dur-camera: 1ms; } }