/* SOEI website tokens.
   Source of truth: projects/soei/02-brand/design-system/tokens.json (v1, brand locked 2026-09-28,
   revised 2026-09-29: baby blue #9fd8f5). Values are copied verbatim; do not edit them here, edit
   the brand tokens and re-derive. Every class in 02-brand/design-system/components/bundle.css
   reads these names.
   The site copies this file byte-for-byte to site/css/tokens.css. */

/* ---- Colour: Paper theme (default) ---- */
:root,
[data-theme="paper"] {
  --surface-000: #f2ede4;   /* page canvas, newsprint */
  --surface-100: #faf7f1;   /* cards, form fields, phone screens */
  --surface-kraft: #b79a70; /* cardboard tiles, poster grounds; text on it is ink */
  --surface-blue: #9fd8f5;  /* the one blue fill per layout; text on it is on-blue */
  --ink: #141414;           /* headlines, body, borders */
  --ink-muted: #5c5852;     /* captions, fine print (6:1 on surface-000) */
  --on-blue: #141414;       /* any text or glyph on surface-blue (11.6:1) */
  --blue: #9fd8f5;          /* blue as a mark: underline, lion badge; decorative only (1.3:1) */
  --ash: #c8c4bc;           /* dividers, disabled, tape; never text */
  --border: #141414;        /* 2-3px marker borders */
  --focus: #141414;         /* focus ring */
  --shadow-offset: 4px 4px 0 #141414;
}

/* ---- Colour: Ink theme ---- */
[data-theme="ink"] {
  --surface-000: #141414;
  --surface-100: #1e1d1b;
  --surface-kraft: #8f7650;
  --surface-blue: #9fd8f5;
  --ink: #f2ede4;
  --ink-muted: #c8c4bc;     /* 10:1 on surface-000 */
  --on-blue: #141414;
  --blue: #9fd8f5;
  --ash: #3a3835;
  --border: #f2ede4;
  --focus: #f2ede4;
  --shadow-offset: 4px 4px 0 #f2ede4;
}

:root {
  /* ---- Type families ---- */
  --font-display: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-mono: "Courier Prime", "IBM Plex Mono", "Courier New", monospace;
  --font-marker: "Permanent Marker", "Comic Sans MS", cursive;

  /* ---- Type scale (Display: all caps; Mono: sentence case; Marker: one per layout) ---- */
  --fs-display-xl: 96px;  --lh-display-xl: 0.92; --ls-display-xl: -0.01em;
  --fs-display-lg: 64px;  --lh-display-lg: 0.95; --ls-display-lg: -0.01em;
  --fs-display-md: 40px;  --lh-display-md: 1;
  --fs-display-sm: 24px;  --lh-display-sm: 1.05; --ls-display-sm: 0.01em;
  --fs-body: 16px;        --lh-body: 24px;       /* weight 400; body-strong = 700 */
  --fs-small: 13px;       --lh-small: 20px;
  --fs-readout: 14px;     --lh-readout: 20px;    --ls-readout: 0.08em; /* weight 700, caps */
  --fs-note: 20px;        --lh-note: 1.15;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-0: 0px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* ---- Stroke (marker weight, never a hairline) ---- */
  --stroke-mark: 3px;
  --stroke-rule: 2px;
  --stroke-tilt: -3deg;

  /* ---- Shadow ---- */
  --shadow-none: none;
}

/* ---- Site layout derivations (NOT brand tokens) ----
   The brand scale above is a fixed px scale. The site only clamps it down for narrow viewports;
   the maximum is always the brand token. Defined in 03-website/design-system.md §3. */
:root {
  --fs-display-xl-fluid: clamp(56px, 9vw, var(--fs-display-xl));
  --fs-display-lg-fluid: clamp(40px, 6vw, var(--fs-display-lg));
  --fs-display-md-fluid: clamp(28px, 4vw, var(--fs-display-md));
}