/*
 * The scales everything else is built from.
 *
 * ⛔ WHY THIS FILE EXISTS. An audit counted 34 distinct font sizes and 28
 * distinct spacing values across site.css, rider.css and admin.css —
 * 11.5, 12.5, 13.5, 14.5, 15.5px for type; 5, 7, 9, 11, 13, 15, 26, 34, 46px
 * for space; and `.9063rem` in the admin sheet, which is 14.5px written as a
 * fraction nobody chose on purpose.
 *
 * Those are not design decisions. They are the fingerprints of nudging a
 * number until one screen looked right, one screen at a time, and they are
 * the single clearest reason the product reads as amateur: nothing lines up
 * with anything, because there is nothing for it to line up WITH.
 *
 * ⚠️ A scale is a constraint, and that is the whole value. Picking the
 * nearest step is a one-second decision with a defensible answer; picking a
 * number is an hour of nudging with no answer at all. If a step is missing,
 * add it here — do not write a literal in a component.
 *
 * Loaded BEFORE site.css, rider.css and admin.css, so a sheet can override a
 * token for its own surface without redefining the scale.
 */

:root {
  /* ---- type ------------------------------------------------------------
   * A ~1.125 ratio at the small end where legibility is decided, opening to
   * ~1.2 at display sizes where it is proportion that matters. Whole pixels:
   * a half-pixel renders differently on every device and buys nothing.
   */
  --text-2xs: 11px;   /* legal fine print, badge counters */
  --text-xs:  12px;   /* captions, timestamps */
  --text-sm:  13px;   /* table headers, pill labels */
  --text-md:  14px;   /* secondary body, form labels */
  --text-base:15px;   /* UI body — the portal's default */
  --text-lg:  16px;   /* form inputs. 16 exactly: anything smaller makes iOS
                         Safari zoom the page on focus. */
  --text-xl:  17px;   /* marketing body */
  --text-2xl: 19px;   /* card titles, lede */
  --text-3xl: 22px;   /* section sub-heads */
  --text-4xl: 25px;   /* page titles */
  --text-5xl: 29px;   /* big numbers */
  --text-6xl: 34px;   /* hero stats */
  --text-7xl: 42px;   /* display */

  /* ---- space -----------------------------------------------------------
   * A 4px grid. Every margin, padding and gap is a step on it, so vertical
   * rhythm is a property of the system rather than something each component
   * has to be talked into.
   */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  --space-20: 80px;

  /* ---- shape -----------------------------------------------------------
   * ⚠️ Four radii, not nine. site.css had 10/16/24, rider.css reused them,
   * admin.css had its own six in rem. A card and a button rounded to
   * different curves on two pages of one product is noticed without being
   * identified.
   */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- line height -----------------------------------------------------
   * Tight for display, open for reading. Unitless, so it scales with the
   * element's own size rather than inheriting a pixel value.
   */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}