/**
 * Matrix Design System - Spacing Tokens
 * Consistent spacing scale for layouts and components
 */

@layer base {
  :root {
    /* Base spacing unit - 4px */
    --matrix-space-px: 1px;
    --matrix-space-0: 0;
    --matrix-space-0-5: 0.125rem;  /* 2px */
    --matrix-space-1: 0.25rem;     /* 4px */
    --matrix-space-1-5: 0.375rem;  /* 6px */
    --matrix-space-2: 0.5rem;      /* 8px */
    --matrix-space-2-5: 0.625rem;  /* 10px */
    --matrix-space-3: 0.75rem;     /* 12px */
    --matrix-space-3-5: 0.875rem;  /* 14px */
    --matrix-space-4: 1rem;        /* 16px */
    --matrix-space-5: 1.25rem;     /* 20px */
    --matrix-space-6: 1.5rem;      /* 24px */
    --matrix-space-7: 1.75rem;     /* 28px */
    --matrix-space-8: 2rem;        /* 32px */
    --matrix-space-9: 2.25rem;     /* 36px */
    --matrix-space-10: 2.5rem;     /* 40px */
    --matrix-space-11: 2.75rem;    /* 44px */
    --matrix-space-12: 3rem;       /* 48px */
    --matrix-space-14: 3.5rem;     /* 56px */
    --matrix-space-16: 4rem;       /* 64px */
    --matrix-space-20: 5rem;       /* 80px */
    --matrix-space-24: 6rem;       /* 96px */
    --matrix-space-28: 7rem;       /* 112px */
    --matrix-space-32: 8rem;       /* 128px */
    --matrix-space-36: 9rem;       /* 144px */
    --matrix-space-40: 10rem;      /* 160px */
    --matrix-space-44: 11rem;      /* 176px */
    --matrix-space-48: 12rem;      /* 192px */
    --matrix-space-52: 13rem;      /* 208px */
    --matrix-space-56: 14rem;      /* 224px */
    --matrix-space-60: 15rem;      /* 240px */
    --matrix-space-64: 16rem;      /* 256px */
    --matrix-space-72: 18rem;      /* 288px */
    --matrix-space-80: 20rem;      /* 320px */
    --matrix-space-96: 24rem;      /* 384px */
    
    /* Component-specific spacing */
    --matrix-space-component-xs: var(--matrix-space-2);   /* 8px */
    --matrix-space-component-sm: var(--matrix-space-3);   /* 12px */
    --matrix-space-component-md: var(--matrix-space-4);   /* 16px */
    --matrix-space-component-lg: var(--matrix-space-6);   /* 24px */
    --matrix-space-component-xl: var(--matrix-space-8);   /* 32px */
    
    /* Layout spacing */
    --matrix-space-layout-xs: var(--matrix-space-4);      /* 16px */
    --matrix-space-layout-sm: var(--matrix-space-6);      /* 24px */
    --matrix-space-layout-md: var(--matrix-space-8);      /* 32px */
    --matrix-space-layout-lg: var(--matrix-space-12);     /* 48px */
    --matrix-space-layout-xl: var(--matrix-space-16);     /* 64px */
    --matrix-space-layout-2xl: var(--matrix-space-24);    /* 96px */
    
    /* Container widths */
    --matrix-container-xs: 20rem;    /* 320px */
    --matrix-container-sm: 24rem;    /* 384px */
    --matrix-container-md: 28rem;    /* 448px */
    --matrix-container-lg: 32rem;    /* 512px */
    --matrix-container-xl: 36rem;    /* 576px */
    --matrix-container-2xl: 42rem;   /* 672px */
    --matrix-container-3xl: 48rem;   /* 768px */
    --matrix-container-4xl: 56rem;   /* 896px */
    --matrix-container-5xl: 64rem;   /* 1024px */
    --matrix-container-6xl: 72rem;   /* 1152px */
    --matrix-container-7xl: 80rem;   /* 1280px */
    --matrix-container-full: 100%;
    
    /* Border radius */
    --matrix-radius-none: 0;
    --matrix-radius-sm: 0.125rem;    /* 2px */
    --matrix-radius-base: 0.25rem;   /* 4px */
    --matrix-radius-md: 0.375rem;    /* 6px */
    --matrix-radius-lg: 0.5rem;      /* 8px */
    --matrix-radius-xl: 0.75rem;     /* 12px */
    --matrix-radius-2xl: 1rem;       /* 16px */
    --matrix-radius-3xl: 1.5rem;     /* 24px */
    --matrix-radius-full: 9999px;
    
    /* Border widths */
    --matrix-border-0: 0;
    --matrix-border-1: 1px;
    --matrix-border-2: 2px;
    --matrix-border-4: 4px;
    --matrix-border-8: 8px;
    
    /* Z-index layers */
    --matrix-z-auto: auto;
    --matrix-z-0: 0;
    --matrix-z-10: 10;
    --matrix-z-20: 20;
    --matrix-z-30: 30;
    --matrix-z-40: 40;
    --matrix-z-50: 50;
    --matrix-z-modal: 1000;
    --matrix-z-popover: 1010;
    --matrix-z-tooltip: 1020;
    --matrix-z-notification: 1030;
    --matrix-z-max: 2147483647;
    
    /* Opacity levels */
    --matrix-opacity-0: 0;
    --matrix-opacity-5: 0.05;
    --matrix-opacity-10: 0.1;
    --matrix-opacity-20: 0.2;
    --matrix-opacity-25: 0.25;
    --matrix-opacity-30: 0.3;
    --matrix-opacity-40: 0.4;
    --matrix-opacity-50: 0.5;
    --matrix-opacity-60: 0.6;
    --matrix-opacity-70: 0.7;
    --matrix-opacity-75: 0.75;
    --matrix-opacity-80: 0.8;
    --matrix-opacity-90: 0.9;
    --matrix-opacity-95: 0.95;
    --matrix-opacity-100: 1;
  }
}