:root {
  /* ── Spacing (8pt grid) ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   20px;
  --space-xl:   24px;
  --space-xxl:  32px;
  --space-xxxl: 48px;

  /* ── Corner radius ── */
  --radius-sm:   8px;   /* buttons (primary/secondary), chips inner */
  --radius-md:   12px;  /* cards, inputs */
  --radius-lg:   16px;  /* large buttons (the Done button), sheets */
  --radius-xl:   20px;  /* hero containers */
  --radius-full: 999px; /* pills, chips, avatars */
  --radius-card: var(--radius-md);  /* semantic alias — the card radius */

  /* ── Borders ── */
  --border-width: 1px;
  --border-width-selected: 2px;

  /* ── Layout / device ── */
  --device-width:  390px;
  --device-height: 844px;
  --device-radius: 50px;
  --tap-min: 44px;
  --tap-primary: 56px;
  --button-height: var(--tap-primary);
  --content-max: 440px;
}