/* RadioKing spacing, radius, border & breakpoint tokens.
   Values mirror the Figma Spacing / Border / Breakpoint collections,
   re-expressed with px units for direct use. */

:root {
  /* ---- Spacing ---- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 64px;
  --space-3xl: 128px;

  /* ---- Radius ---- */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 5px;     /* the workhorse — buttons, inputs, cards */
  --radius-lg: 10px;
  --radius-xl: 20px;
  --radius-pill: 500px;

  /* ---- Border widths ---- */
  --border-none: 0px;
  --border-sm: 1px;
  --border-md: 2px;
  --border-lg: 3px;
  --border-xl: 4px;

  /* ---- Elevation (brandbook: light, soft shadows; coloured glow on alerts) ---- */
  --shadow-xs: 0 1px 2px rgba(37,37,37,0.06);
  --shadow-sm: 0 2px 8px rgba(37,37,37,0.08);
  --shadow-md: 0 8px 24px rgba(37,37,37,0.10);
  --shadow-lg: 0 16px 40px rgba(37,37,37,0.12);
  --shadow-photo: 0 12px 30px rgba(37,37,37,0.15);  /* §Photos: light drop shadow */

  /* Inner highlight used on the dark "play button" mark */
  --shadow-inset-hi: inset 4px 4px 12px rgba(255,255,255,0.25);

  /* ---- Breakpoints (px, for reference in @media) ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}