/* ============================================================
   Termdeck — Spacing & layout tokens
   4px base grid.
   ============================================================ */

:root {
  --space-0: 0;
  /* 2px: the sub-grid step. Fine padding on a badge, a chip, a meter rail —
     places the 4px grid was already being broken by hand with literal 2px. */
  --space-px: 0.125rem; /* 2  */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  /* 20px: the missing rung between 16 and 24. Button horizontal padding and
     card interiors both wanted it and were rounding to one neighbour or the
     other. */
  --space-4h: 1.25rem; /* 20 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 6rem;    /* 96 */
  --space-11: 8rem;    /* 128 */

  /* Radii - Linear's vocabulary, copied the way the colours were.
     Linear ships FOUR corner values plus the pill: 2 (small), 4 (badges),
     6 (inputs + buttons) and 12 (cards), and its don'ts cap cards and panels
     at 12 outright. This ladder has seven rungs, so three of them share a
     value now. That is what mapping a seven-rung ladder onto a four-value
     vocabulary looks like, and it is deliberate: the NAMES stay so ~250 call
     sites keep resolving, and the values are the reference's. Renaming the
     rungs is not what a shape swap is.

     8px is gone. It was the app's card-chrome rung and it is not a number
     Linear draws, so --radius-md joins the control radius and the 51
     hand-written 8px declarations moved with it (tests/design-tokens.mjs
     fails any radius off the family, which is what forced the sweep). */
  --radius-2xs: 2px;   /* linear "small" - meter rails, tight inline pills */
  --radius-xs: 4px;    /* linear badges */
  --radius-sm: 6px;    /* linear inputs + buttons - THE control radius */
  --radius-md: 6px;    /* was 8. Small chrome takes the control radius */
  --radius-lg: 12px;   /* linear cards */
  --radius-xl: 12px;   /* was 16. Linear caps cards and panels at 12 */
  --radius-2xl: 12px;  /* was 20. Same cap - the largest corner we draw */
  --radius-pill: 999px;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 820px;
  --container-lg: 1080px;
  --container-xl: 1200px;

  /* Common control heights */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
}