/* ============================================================
   SETTINGS · TYPOGRAPHY
   Three families, three jobs:
   - PLAQUE  (Orbitron):    engraved control-panel labels, headings
   - DATA    (JetBrains):   readable monospace for body + data
   - TERMINAL (VT323):      CRT phosphor terminals, system messages

   DECISION (chunk 00): --font-segment / "DSEG7 Classic" was DROPPED. It had no
   @font-face in _fonts.css (strict CSP font-src 'self', and no self-hosted
   woff2), so it silently fell back to mono — a phantom typographic role and
   pure debt with no real 7-segment readout on the roadmap. Its two consumers
   (c-readout, .u-segment) now point at --font-data directly (a visual no-op,
   since DSEG7 never loaded). Re-introduce a real @font-face if a true segment
   readout is ever built.
   ============================================================ */

:root {
  --font-plaque:    "Orbitron", "Eurostile", "Bank Gothic", system-ui, sans-serif;
  --font-data:      "JetBrains Mono", "Share Tech Mono", ui-monospace, Menlo, monospace;
  --font-terminal:  "VT323", "Courier New", ui-monospace, monospace;
  --font-display:   "Major Mono Display", "JetBrains Mono", ui-monospace, monospace;
  /* PROSE: a readable PROPORTIONAL face for the rare place the control-panel
     monospace actively hurts — multi-line explanatory copy (e.g. the model-picker
     blurbs/tradeoffs), where setting whole paragraphs in JetBrains Mono is a wall
     of hard-to-scan text. System fonts only, so NO @font-face / network fetch is
     needed (CSP font-src 'self' never applies). Use sparingly: data + labels stay
     mono; this is for sentences a human reads, not numbers or chrome. */
  --font-prose:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — based on 16px root, 1.25 ratio for body, larger jumps for display */
  --fs-3xs:  0.625rem;   /* 10px — micro labels, legends */
  --fs-2xs:  0.6875rem;  /* 11px — plaque sub-labels */
  --fs-xs:   0.75rem;    /* 12px — secondary labels */
  --fs-sm:   0.875rem;   /* 14px — small body */
  --fs-md:   1rem;       /* 16px — body */
  --fs-lg:   1.125rem;   /* 18px — large body */
  --fs-xl:   1.5rem;     /* 24px — module title */
  --fs-2xl:  2rem;       /* 32px — section title */
  /* Display sizes are FLUID (clamp): forced-uppercase Orbitron + heavy tracking
     makes a fixed 44px/64px heading dominate and wrap awkwardly on a ~360px
     phone. clamp() scales them from a mobile floor up to the original desktop
     ceiling (the max == the previous fixed value, so desktop is unchanged). */
  --fs-3xl:  clamp(2rem, 1.45rem + 2.45vw, 2.75rem);   /* 32 → 44px — panel header */
  --fs-4xl:  clamp(2.5rem, 1.55rem + 4.2vw, 4rem);     /* 40 → 64px — readouts, display */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.75;

  /* Letter spacing — plaques are always tracked out */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.16em;   /* engraved plaque */
  --ls-widest:  0.32em;   /* legend caption, ALL CAPS micro */

  /* Breakpoints — the canonical, shared responsive vocabulary (the app slice
     previously hard-coded a single 720px query with no token). NB: CSS custom
     properties can NOT be used inside a @media condition, so these are the
     DOCUMENTED constants — author media queries with the literal value noted
     here, and back intrinsic objects (o-cluster--stack-on-mobile) on them. */
  --bp-sm:  30rem;   /* 480px — phone / single column */
  --bp-md:  45rem;   /* 720px — tablet / two column */
  --bp-lg:  64rem;   /* 1024px — desktop / full grid */
}

/* Mobile type step (item 9): ease the widest tracking on the smallest labels.
   --ls-widest (0.32em) on the --fs-3xs/2xs Orbitron micro-labels wraps oddly at
   narrow widths. The forced-uppercase stays (it's chrome, C1); only the
   TRACKING relaxes for legibility. Literal of --bp-sm (custom props can't ride
   a @media condition). */
@media (max-width: 30rem) {
  :root {
    --ls-widest: 0.2em;
  }
}