/* ============================================================
   Tassel — Spacing, radius, shadow tokens
   Spacing follows the Figma "Spacings" + "Modular scale" collections
   (8px base module). Radii from the "Corner" tokens.
   ============================================================ */

:root {
  /* Spacing scale — 8px module (Figma: 0.5x … 10x) */
  --space-0:  0;
  --space-xs: 4px;   /* 0.5x */
  --space-sm: 8px;   /* 1x   */
  --space-smd:12px;  /* 1.5x */
  --space-md: 16px;  /* 2x   */
  --space-lg: 24px;  /* 3x   */
  --space-xl: 32px;  /* 4x   */
  --space-2xl:40px;  /* 5x   */
  --space-3xl:48px;  /* 6x   */
  --space-4xl:64px;  /* 8x   */
  --space-5xl:80px;  /* 10x  */

  /* Radii (Figma Corner tokens) */
  --radius-sm:    4px;  /* corner-small */
  --radius-md:    8px;  /* corner-medium */
  --radius-lg:    16px; /* corner-large */
  --radius-xl:    24px; /* corner-very-large */
  --radius-pill:  80px; /* corner-rounded */
  --radius-full:  9999px;

  /* Elevation — soft, low-contrast shadows (rgba black) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(32, 32, 32, 0.12);
}