:root {
  /* ============ SPACING — base 8px, with 2/4/12 sub-tokens ============ */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-huge: 64px;

  /* Layout */
  --container-max: 1280px;
  --sidebar-width: 240px;
  --section-pad: 80px;       /* marketing section padding (64–96) */
  --card-pad: 32px;          /* feature / product card */
  --card-pad-dense: 16px;    /* dense data card */
  --cell-pad-y: 12px;        /* table cell vertical */
  --cell-pad-x: 16px;        /* table cell horizontal */

  /* ============ RADIUS ============ */
  --radius-xs:  4px;     /* inputs, inline status tags */
  --radius-sm:  6px;     /* buttons — signature radius; compact chips */
  --radius-md:  8px;     /* compact cards, alerts, tooltips */
  --radius-lg:  12px;    /* feature/product cards, UI mockup containers */
  --radius-xl:  16px;    /* modals, large panel chrome */
  --radius-full: 9999px; /* status pills, avatars */

  /* ============ ELEVATION ============ */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06);    /* subtle card lift, dropdowns */
  --shadow-2: 0 8px 24px rgba(0,0,0,0.08);   /* floating mockups, modals */
  --shadow-3: 0 16px 48px rgba(0,0,0,0.12);  /* overlay dialogs, deep panels */
}