/* Scaling Book Lab — design tokens.
 *
 * Direction: the engineering datasheet. This book lives in the world of chip
 * specs, memory hierarchies and measured curves, so the app reads like a
 * well-set hardware datasheet crossed with test equipment: a precise hairline
 * grid, monospace for every number, and measured data as the hero — not a
 * dark dashboard with a neon accent.
 *
 * The palette is not decorative. It is lifted from the book's own roofline
 * figure, where colour means one specific thing: red = bandwidth-bound (you
 * are wasting FLOPs), amber = bound only at lower bandwidth, green =
 * compute-bound (you are using the hardware). Those three colours carry that
 * meaning EVERYWHERE in this app — a red number always means "memory-bound
 * here". Never use them for decoration.
 *
 * Every visual value in the app comes from this file.
 */

:root {
  /* ---- Surface ---------------------------------------------------------- */
  --paper:        #fbfbf9;  /* page */
  --paper-sunk:   #f2f3ef;  /* figure panels, code blocks */
  --paper-raise:  #ffffff;  /* cards lifted off the page */
  --rule:         #dee1da;  /* hairlines, plot grid */
  --rule-strong:  #c3c8bf;  /* axes, active borders */

  /* ---- Ink -------------------------------------------------------------- */
  --ink:          #16191c;  /* body text, headings */
  --ink-2:        #4a5157;  /* secondary text, captions */
  --ink-3:        #7c848b;  /* tertiary, axis labels, disabled */

  /* ---- Roofline semantics (meaning, not decoration) --------------------- */
  --bound-mem:    #c0392b;  /* bandwidth/communication-bound */
  --bound-mix:    #c2851b;  /* bound only at lower bandwidth */
  --bound-cmp:    #2f7d5c;  /* compute-bound — hardware fully used */
  --bound-mem-bg: #fbeceb;
  --bound-mix-bg: #fbf3e3;
  --bound-cmp-bg: #e9f3ee;

  /* ---- Interaction ------------------------------------------------------ */
  /* Reserved for "you can touch this": sliders, links, live controls. */
  --live:         #1f5fa8;
  --live-bg:      #eaf1f9;
  --live-ring:    #9cc0e8;

  /* ---- Type ------------------------------------------------------------- */
  /* One superfamily, three voices: Sans for interface, Serif for long-form
   * reading (dense technical prose is easier in a serif), Mono for every
   * number, formula, shape and identifier. */
  --font-ui:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-read:  'IBM Plex Serif', Georgia, serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-micro:  11px;   /* eyebrows, axis ticks */
  --t-small:  13px;   /* captions, chrome */
  --t-body:   17px;   /* reading column */
  --t-lead:   19px;   /* chapter standfirst */
  --t-h3:     20px;
  --t-h2:     26px;
  --t-h1:     34px;
  --t-display: 44px;  /* chapter numbers, hero figures */

  --lh-tight: 1.2;
  --lh-body:  1.65;   /* long-form reading */

  /* ---- Space (one scale, no ad-hoc values) ------------------------------ */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* ---- Geometry --------------------------------------------------------- */
  /* Datasheets are sharp. Radius stays small; plots get none at all. */
  --r-sm: 3px;
  --r-md: 5px;
  --r-plot: 0px;

  --hair: 1px solid var(--rule);

  /* Reading measure — ~68 characters at --t-body. */
  --measure: 34rem;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms;
  --slow: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --slow: 0ms; }
}