:root {
  --spacing: 0.125rem;

  // Base spacing scale (original scale for internal use)
  --spacing-00: 0px; /* 0rem */
  --spacing-01: var(--spacing); /* 0.125rem */
  --spacing-02: calc(var(--spacing) * 2); /* 0.25rem / 4px */
  --spacing-03: calc(var(--spacing) * 3); /* 0.375rem */
  --spacing-04: calc(var(--spacing) * 4); /* 0.5rem / 8px */
  --spacing-05: calc(var(--spacing) * 6); /* 0.75rem / 12px */
  --spacing-06: calc(var(--spacing) * 8); /* 1rem / 16px */
  --spacing-07: calc(var(--spacing) * 10); /* 1.25rem */
  --spacing-08: calc(var(--spacing) * 12); /* 1.5rem / 24px */
  --spacing-09: calc(var(--spacing) * 16); /* 2rem / 32px */
  --spacing-10: calc(var(--spacing) * 20); /* 2.5rem */
  --spacing-11: calc(var(--spacing) * 24); /* 3rem / 48px */
  --spacing-12: calc(var(--spacing) * 28); /* 3.5rem / 56px */
  --spacing-13: calc(var(--spacing) * 32); /* 4rem */
  --spacing-14: calc(var(--spacing) * 36); /* 4.5rem */
  --spacing-15: calc(var(--spacing) * 40); /* 5rem */
  --spacing-16: calc(var(--spacing) * 48); /* 6rem */
  --spacing-17: calc(var(--spacing) * 60); /* 7.5rem */
  --spacing-18: calc(var(--spacing) * 80); /* 10rem */

  // Semantic spacing tokens
  --spacing-zero: var(--spacing-00);
  --spacing-xs: var(--spacing-02);
  --spacing-s: var(--spacing-04);
  --spacing-m: var(--spacing-05);
  --spacing-l: var(--spacing-06);
  --spacing-xl: var(--spacing-08);
  --spacing-xxl: var(--spacing-09);
  --spacing-xxxl: var(--spacing-11);

  // Semantic sizing tokens
  --size-xs: var(--spacing-06);
  --size-s: var(--spacing-08);
  --size-m: var(--spacing-09);
  --controls-size-default: var(--spacing-09);
  --controls-size-small: var(--spacing-08);
}