@layer base {
    :root {
      /* ==========================================
         SPACING TOKENS
         Base unit: 0.25rem (4px)
         ========================================== */
      --rs-spacing-none: 0rem;      /* 0px */
      --rs-spacing-xxs: 0.125rem;   /* 2px */
      --rs-spacing-xs: 0.25rem;     /* 4px */
      --rs-spacing-sm: 0.375rem;    /* 6px */
      --rs-spacing-md: 0.5rem;      /* 8px */
      --rs-spacing-lg: 0.75rem;     /* 12px */
      --rs-spacing-xl: 1rem;        /* 16px */
      --rs-spacing-2xl: 1.25rem;    /* 20px */
      --rs-spacing-3xl: 1.5rem;     /* 24px */
      --rs-spacing-4xl: 2rem;       /* 32px */
      --rs-spacing-5xl: 2.5rem;     /* 40px */
      --rs-spacing-6xl: 3rem;       /* 48px */
      --rs-spacing-7xl: 4rem;       /* 64px */
      --rs-spacing-8xl: 5rem;       /* 80px */
      --rs-spacing-9xl: 6rem;       /* 96px */
      --rs-spacing-10xl: 8rem;      /* 128px */
      --rs-spacing-11xl: 10rem;     /* 160px */

      /* Legacy aliases (deprecated, use --rs-spacing-*) */
      --spacing-none: var(--rs-spacing-none);
      --spacing-xxs: var(--rs-spacing-xxs);
      --spacing-xs: var(--rs-spacing-xs);
      --spacing-sm: var(--rs-spacing-sm);
      --spacing-md: var(--rs-spacing-md);
      --spacing-lg: var(--rs-spacing-lg);
      --spacing-xl: var(--rs-spacing-xl);
      --spacing-2xl: var(--rs-spacing-2xl);
      --spacing-3xl: var(--rs-spacing-3xl);
      --spacing-4xl: var(--rs-spacing-4xl);
      --spacing-5xl: var(--rs-spacing-5xl);
      --spacing-6xl: var(--rs-spacing-6xl);
      --spacing-7xl: var(--rs-spacing-7xl);
      --spacing-8xl: var(--rs-spacing-8xl);
      --spacing-9xl: var(--rs-spacing-9xl);
      --spacing-10xl: var(--rs-spacing-10xl);
      --spacing-11xl: var(--rs-spacing-11xl);

      --bs-spacer: 1rem;

      /* ==========================================
         BORDER TOKENS
         ========================================== */
      --border-1: 1px;
      --border-2: 2px;
      --border-3: 3px;
      --border-4: 4px;
      --border-5: 5px;
      --border-6: 6px;
      --border-7: 7px;
      --border-8: 8px;

      /* ==========================================
         BORDER RADIUS TOKENS
         Derived from spacing primitives
         ========================================== */
      --rs-radius-none: 0rem;       /* 0px */
      --rs-radius-xxs: 0.125rem;    /* 2px */
      --rs-radius-xs: 0.25rem;      /* 4px */
      --rs-radius-sm: 0.375rem;     /* 6px */
      --rs-radius-md: 0.5rem;       /* 8px */
      --rs-radius-lg: 0.625rem;     /* 10px */
      --rs-radius-xl: 0.75rem;      /* 12px */
      --rs-radius-2xl: 1rem;        /* 16px */
      --rs-radius-3xl: 1.25rem;     /* 20px */
      --rs-radius-4xl: 1.5rem;      /* 24px */
      --rs-radius-full: 9999px;     /* Pill / fully-rounded */

      /* ==========================================
         WIDTH TOKENS
         Pre-defined widths for containers
         ========================================== */
      --rs-width-xxs: 20rem;    /* 320px */
      --rs-width-xs: 24rem;     /* 384px */
      --rs-width-sm: 30rem;     /* 480px */
      --rs-width-md: 35rem;     /* 560px */
      --rs-width-lg: 40rem;     /* 640px */
      --rs-width-xl: 48rem;     /* 768px */
      --rs-width-2xl: 64rem;    /* 1,024px */
      --rs-width-3xl: 80rem;    /* 1,280px */
      --rs-width-4xl: 90rem;    /* 1,440px */
      --rs-width-5xl: 100rem;   /* 1,600px */
      --rs-width-6xl: 120rem;   /* 1,920px */

      /* ==========================================
         CONTAINER TOKENS
         Page-level container constraints
         ========================================== */
      --rs-container-padding-mobile: 1rem;      /* 16px */
      --rs-container-padding-desktop: 2rem;     /* 32px */
      --rs-container-max-width-desktop: 80rem;  /* 1,280px */

      /* ==========================================
         PARAGRAPH MAX-WIDTH
         Optimized for readability (45-75 chars)
         ========================================== */
      --rs-paragraph-max-width: 45rem;          /* 720px */
    }
}