/* ============================================================
   SPACING, RADIUS & ELEVATION — xAI Design System
   4px base unit. No shadows — hairline borders carry elevation.
   ============================================================ */
:root {
  /* --- Spacing (4px base) --- */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* Section / card padding semantics */
  --pad-section: var(--space-4xl);   /* hero & content bands (desktop) */
  --pad-card: var(--space-xl);       /* card interior */
  --container-max: 1200px;

  /* --- Radius --- */
  --radius-none: 0px;
  --radius-sm: 8px;       /* card chrome — the brand --radius */
  --radius-pill: 9999px;  /* every interactive element */
  --radius-full: 9999px;  /* circular icon containers */

  /* --- Elevation (no shadows; hairline only) --- */
  --elevation-flat: none;
  --elevation-hairline: 0 0 0 1px var(--color-hairline);
}