/* generated from DESIGN.md (JUG.ba, preset designs/smoke, "Bosnian blue" palette) —
   edit DESIGN.md first, then sync tokens.json and this file.
   DARK-ONLY identity: S5 in package-info.md is amended to single-scheme dark. */

/* ---------- self-hosted brand faces (S3: no font CDN, ever) ----------
   Two families, not three: Space Grotesk serves BOTH body and display, with IBM Plex Mono for
   labels. Subset hard to keep S8's 60 KB critical path — basic latin, the punctuation the pages
   use, and the BHS diacritics the planned /bs /hr /sr locales will need. Space Grotesk is
   variable with its weight axis clamped to exactly what the CSS asks for; IBM Plex Mono is
   static 400. Filenames carry a per-face version so /fonts/* can be cached immutably for a
   year — bump it when re-cutting, or caches keep the old file. Recipe: tools/subset-fonts.py,
   rationale: DESIGN.md § Typography. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-v2.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-v1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  color-scheme: dark;
}

:root {
  /* GOLD is the single accent — where Java's orange and the flag's triangle meet, and the
     highest-contrast of the preset's five swatches as text (the CTA is text, not a button).
     Other swatches: #e8623c ember, #5b7cff indigo, #3f9d6b green, #c04a4a red. */
  --color-primary: #c9a24a;
  --color-primary-hover: #dcb96b;
  --color-on-primary: #160b07;
  /* blue-tinted near-black: the flag blue and the Java blue carried at canvas depth */
  --color-surface: #080d18;
  --color-surface-raised: rgba(255, 255, 255, 0.03);
  /* cool ink ramp. muted + meta sit above the preset's #83858b / #7f8187 because the fog
     blends with mix-blend-mode: screen and only ever LIGHTENS what is under the type —
     see DESIGN.md § Fog, scrim and contrast. */
  --color-on-surface: #b4bacb;
  --color-on-surface-strong: #f4f6fa;
  --color-on-surface-muted: #9aa1b5;
  --color-on-surface-meta: #949bb0;
  --color-accent-border: rgba(255, 255, 255, 0.08);
  --color-accent-border-strong: rgba(255, 255, 255, 0.16);
  --color-danger: #ff6b6b;
  --color-outline: var(--color-primary);
  /* brand families first, system fallbacks — zero requests until WOFF2s are self-hosted in site/fonts/ */
  --font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* The display ROLE still exists — it is simply served by the body family. One sans at three
     weights plus a mono is a tighter system than three families, it is the voice smoke's own
     editorial hero already uses, and it costs no extra bytes. Repointing this one token is all
     a future face swap needs. */
  --font-family-display: var(--font-family);
  --font-family-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-weight-bold: 700;
  --font-weight-label: 600;
  --font-weight-regular: 400;
  /* 600, not the serif's 300: a light weight reads as elegant on a high-contrast serif and as
     underset on a geometric sans. 500 is one step down if 600 lands too heavy. */
  --font-weight-display: 600;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --rounded-sm: 2px;
  --rounded-md: 6px;
  --rounded-pill: 999px;
  /* fog tints — a deeper blue drifting behind, a paler blue veil in front */
  --fog-back: 76, 112, 176;
  --fog-front: 150, 180, 226;
}