/* =============================================================================
   RESTOKE DESIGN TOKENS - SPACING & LAYOUT
   =============================================================================
   Spacing scale, border widths, border radius, widths, and container tokens.
   ============================================================================= */

@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 */

      /* ==========================================
         BORDER TOKENS
         ========================================== */
      --rs-border-1: 1px;
      --rs-border-2: 2px;
      --rs-border-3: 3px;
      --rs-border-4: 4px;
      --rs-border-5: 5px;
      --rs-border-6: 6px;
      --rs-border-7: 7px;
      --rs-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 */
    }
}