/* Spacing and radius, from the Figma "Layout Tokens" frame.
   The Figma Variables collections store these unitless (see fig-tokens.css);
   these are the px-ready aliases to consume in CSS. */
:root {
  --space-1: 4px;   /* Inline icon gaps, tight element padding */
  --space-2: 8px;   /* Inline icon gaps, tight element padding */
  --space-3: 12px;  /* Small component internal padding */
  --space-4: 16px;  /* Default component padding, list item spacing */
  --space-5: 20px;  /* Medium padding for cards and inputs */
  --space-6: 24px;  /* Section padding, form field gaps */
  --space-8: 32px;  /* Large component padding, group spacing */
  --space-10: 40px; /* Section margins, card body padding */
  --space-12: 48px; /* Large section gaps, modal padding */
  --space-16: 64px; /* Page section vertical spacing */
  --space-20: 80px; /* Major layout section breaks */
  --space-24: 96px; /* Maximum spacing for hero and page-level gaps */

  --radius-xs: 4px;   /* Tags, badges, chips */
  --radius-sm: 8px;   /* Inputs, small buttons, form controls */
  --radius-md: 12px;  /* Cards, dropdowns, standard containers */
  --radius-lg: 16px;  /* Modals, dialogs, large cards */
  --radius-xl: 24px;  /* Feature cards, highlighted sections */
  --radius-xxl: 28px; /* Large panels, promotional containers */
  --radius-full: 9999px;
}