/* =============================================================================
   Pixelboop — Typography tokens
   Pixelboop ships NO webfonts. It uses the native system UI stack for all
   prose and a monospace stack for code, the ASCII wordmark, and keycaps.
   The third "typeface" is a 3×5 bitmap PIXEL FONT rendered as grid cells
   (see web/app.js PIXEL_FONT) — documented as a brand asset, not CSS text.
   ============================================================================= */

:root {
  /* ---- Families ------------------------------------------------------------- */
  --pb-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --pb-font-mono: ui-monospace, "SF Mono", Monaco, monospace;

  --pb-font-body: var(--pb-font-system);
  --pb-font-display: var(--pb-font-system); /* display = system, heavy weight   */
  --pb-font-code: var(--pb-font-mono);

  /* ---- Weights -------------------------------------------------------------- */
  --pb-weight-light:   300;  /* large editorial / case-study subtitles          */
  --pb-weight-regular: 400;
  --pb-weight-medium:  500;
  --pb-weight-semibold:600;  /* the workhorse heading/button weight             */
  --pb-weight-bold:    700;
  --pb-weight-black:   800;  /* case-study hero display                          */

  /* ---- Fluid type scale (clamp: mobile → desktop) --------------------------- */
  --pb-text-hero:    clamp(3rem, 8vw, 6rem);      /* case-study H1               */
  --pb-text-display: clamp(2rem, 5vw, 3rem);      /* section H2                  */
  --pb-text-title:   clamp(1.5rem, 4vw, 2.25rem); /* tagline / page title        */
  --pb-text-xl:      clamp(1.25rem, 3vw, 1.75rem);
  --pb-text-lg:      clamp(1.1rem, 3vw, 1.5rem);  /* hero tagline                */
  --pb-text-md:      1.125rem;
  --pb-text-base:    1rem;
  --pb-text-sm:      0.875rem;
  --pb-text-xs:      0.75rem;
  --pb-text-2xs:     0.65rem;  /* the BETA tag                                   */

  /* ---- Line height ---------------------------------------------------------- */
  --pb-leading-tight: 1.1;
  --pb-leading-snug:  1.4;
  --pb-leading-body:  1.6;
  --pb-leading-loose: 1.8;  /* hero tagline breathing room                      */

  /* ---- Letter spacing ------------------------------------------------------- */
  --pb-tracking-tight: -0.02em;  /* big display                                 */
  --pb-tracking-normal: 0;
  --pb-tracking-wide: 0.02em;    /* taglines                                    */
  --pb-tracking-caps: 0.05em;    /* UPPERCASE labels                            */
}