/* ============================================================
   tokens.css — design tokens, loaded before every other sheet
   ------------------------------------------------------------
   SPACING SCALE (4 / 8px grid). Use these for every margin,
   padding and gap. Named by pixel value so the name always
   tells you the size.

     --space-0     0
     --space-4     4px
     --space-8     8px
     --space-12   12px
     --space-16   16px
     --space-24   24px
     --space-32   32px
     --space-48   48px
     --space-64   64px
     --space-96   96px
     --space-128 128px

   Legacy .spacer-* utilities (styles.css) map onto these:
     .spacer-1rem    -> --space-16
     .spacer-1-3rem  -> --space-24   (was 1.3rem / ~21px)
     .spacer-1-5rem  -> --space-24
     .spacer-2rem    -> --space-32
     .spacer-3rem    -> --space-48
     .spacer-4rem    -> --space-64
     .spacer-6rem    -> --space-96
     .spacer-8rem    -> --space-128

   BORDER RADIUS (4 / 8 / 16px + pill). Old values map:
     3px, 4px, 5px       -> --radius-sm   (4px)   inputs, badges, chips
     6px, 8px            -> --radius-md   (8px)   cards, buttons
     10px               -> --radius-lg   (16px)  large panels, media
     19px, 50px, 2rem   -> --radius-pill (999px) pill controls
     50%  (circles) is left as-is.
   ============================================================ */

:root {
  --space-0: 0;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Semantic aliases */
  --grid-gap: var(--space-64);      /* 12-column .cont gutter (was 60px) */
  --section-gap: var(--space-96);   /* gap between major page sections   */
}

/* Narrow screens: pull the biggest steps in so sections don't
   drift apart on a phone. Small steps (<= 48px) stay fixed. */
@media (max-width: 767px) {
  :root {
    --space-64: 40px;
    --space-96: 56px;
    --space-128: 72px;
  }
}