/* Brutalist · Design System Tokens
 * ----------------------------------------------
 * Color, type, spacing, rules. Consumed by inline styles in
 * brutalist/components.jsx via var(--...) and by raw CSS classes.
 * One source of truth: change a value here and every scene updates.
 */

:root {
  /* ─── color ──────────────────────────────────────────── */
  --b-bg:        #0a0a0a;   /* page bg, all pages start here  */
  --b-fg:        #f4f1ec;   /* primary text, on bg            */
  --b-dim:       #6f6a63;   /* metadata, mono labels          */
  --b-accent:    #ff3b1f;   /* safety red — use sparingly     */
  --b-rule:      rgba(244,241,236,0.14);  /* hairlines        */
  --b-rule-2:    rgba(244,241,236,0.28);  /* heavier hair     */
  --b-panel:     #14130f;   /* slightly raised surface        */
  --b-panel-2:   #1a1814;   /* striped image plates           */
  --b-inverse-bg:#f4f1ec;   /* inverted: cream bg             */
  --b-inverse-fg:#0a0a0a;   /* inverted: ink fg               */

  /* ─── type families ──────────────────────────────────── */
  --b-f-display: "Archivo Black", "Anton", system-ui, sans-serif;
  --b-f-body:    "Space Grotesk", system-ui, sans-serif;
  --b-f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --b-f-italic:  "DM Serif Display", "Cormorant Garamond", Georgia, serif;

  /* ─── type scale (1440 hero scale; halve for compact pages) ─ */
  --b-t-display-xxl: 240px;
  --b-t-display-xl:  196px;
  --b-t-display-l:   140px;
  --b-t-display-m:   96px;
  --b-t-display-s:   56px;
  --b-t-heading-l:   36px;
  --b-t-heading-m:   28px;
  --b-t-heading-s:   20px;
  --b-t-body-l:      17px;
  --b-t-body:        15px;
  --b-t-body-s:      13px;
  --b-t-caption:     11px;
  --b-t-tag:         10px;

  /* ─── spacing (4px base) ────────────────────────────── */
  --b-s-1:  4px;
  --b-s-2:  8px;
  --b-s-3:  12px;
  --b-s-4:  16px;
  --b-s-5:  20px;
  --b-s-6:  24px;
  --b-s-7:  32px;
  --b-s-8:  40px;
  --b-s-9:  48px;
  --b-s-10: 56px;
  --b-s-11: 64px;
  --b-s-12: 80px;
  --b-s-13: 96px;

  /* ─── borders & rules ───────────────────────────────── */
  --b-hair:        1px solid var(--b-rule);
  --b-hair-thick:  2px solid var(--b-fg);
  --b-hair-accent: 2px solid var(--b-accent);
  --b-dash:        1px dashed var(--b-rule);

  /* ─── hazard pattern (reused across placards & bands) ─ */
  --b-hazard: repeating-linear-gradient(135deg,
              var(--b-accent) 0 22px,
              var(--b-bg)     22px 44px);
  --b-stripe-panel: repeating-linear-gradient(135deg,
              #14130f 0 12px,
              #1a1814 12px 24px);
}

/* ─── reset (scoped to brutalist pages) ─────────────────── */
.b-root {
  margin: 0;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--b-f-body);
  font-size: var(--b-t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.b-root *,
.b-root *::before,
.b-root *::after { box-sizing: border-box; }

.b-root a { color: inherit; text-decoration: none; cursor: pointer; }
.b-root button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.b-root h1, .b-root h2, .b-root h3, .b-root h4, .b-root h5, .b-root h6, .b-root p { margin: 0; }
.b-root ::selection { background: var(--b-accent); color: var(--b-bg); }

/* ─── helper classes (for prose, non-component bits) ──── */
.b-mono     { font-family: var(--b-f-mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--b-t-caption); color: var(--b-dim); }
.b-mono-xs  { font-family: var(--b-f-mono); letter-spacing: 0.22em; text-transform: uppercase; font-size: var(--b-t-tag); color: var(--b-dim); }
.b-italic   { font-family: var(--b-f-italic); font-style: italic; }
.b-display  { font-family: var(--b-f-display); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.86; }
.b-accent   { color: var(--b-accent); }
.b-dim      { color: var(--b-dim); }

/* swap a section to inverted (cream bg) */
.b-invert { background: var(--b-inverse-bg); color: var(--b-inverse-fg); }
.b-invert ::selection { background: var(--b-inverse-fg); color: var(--b-accent); }