/* ==================== */
/* === ROOT VARIABLES === */
/* ==================== */
:root {
    /* Spacing Variables */
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-s: 12px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;
  
    /* Shadow Variables */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Transition Variables */
    --transition-duration: 0.3s;
    --transition-timing: ease;
  }
  
  /* ==================== */
  /* === TYPOGRAPHY === */
  /* ==================== */
  .font-thin { font-weight: 100; }
  .font-extralight { font-weight: 200; }
  .font-light { font-weight: 300; }
  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }
  .font-extrabold { font-weight: 800; }
  .font-black { font-weight: 900; }
  
  .text-xxs { font-size: 0.625rem; line-height: 1rem; }
  .text-xs { font-size: 0.75rem; line-height: 1rem; }
  .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .text-base { font-size: 1rem; line-height: 1.5rem; }
  .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .text-5xl { font-size: 3rem; line-height: 1; }
  .text-6xl { font-size: 3.75rem; line-height: 1; }
  .text-7xl { font-size: 4.5rem; line-height: 1; }
  .text-8xl { font-size: 6rem; line-height: 1; }
  .text-9xl { font-size: 8rem; line-height: 1; }
  
  .leading-none { line-height: 1; }
  .leading-tight { line-height: 1.25; }
  .leading-snug { line-height: 1.375; }
  .leading-normal { line-height: 1.5; }
  .leading-relaxed { line-height: 1.625; }
  .leading-loose { line-height: 2; }
  
  .tracking-tighter { letter-spacing: -0.05em; }
  .tracking-tight { letter-spacing: -0.025em; }
  .tracking-normal { letter-spacing: 0; }
  .tracking-wide { letter-spacing: 0.025em; }
  .tracking-wider { letter-spacing: 0.05em; }
  .tracking-widest { letter-spacing: 0.1em; }
  
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-justify { text-align: justify; }
  
  .italic { font-style: italic; }
  .not-italic { font-style: normal; }
  
  .underline { text-decoration: underline; }
  .line-through { text-decoration: line-through; }
  .no-underline { text-decoration: none; }
  
  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }
  .normal-case { text-transform: none; }
  
  .whitespace-normal { white-space: normal; }
  .whitespace-nowrap { white-space: nowrap; }
  .whitespace-pre { white-space: pre; }
  .whitespace-pre-line { white-space: pre-line; }
  .whitespace-pre-wrap { white-space: pre-wrap; }
  
  .break-normal { overflow-wrap: normal; word-break: normal; }
  .break-words { overflow-wrap: break-word; }
  .break-all { word-break: break-all; }
  
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  
  /* ==================== */
  /* === COLOR UTILITIES === */
  /* ==================== */
  /* Text Colors */
  .text-primary { color: var(--color-primary); }
  .text-primary-10 { color: rgba(var(--color-primary-rgb), 0.1); }
  .text-primary-20 { color: rgba(var(--color-primary-rgb), 0.2); }
  .text-primary-30 { color: rgba(var(--color-primary-rgb), 0.3); }
  .text-primary-40 { color: rgba(var(--color-primary-rgb), 0.4); }
  .text-primary-50 { color: rgba(var(--color-primary-rgb), 0.5); }
  .text-primary-60 { color: rgba(var(--color-primary-rgb), 0.6); }
  .text-primary-70 { color: rgba(var(--color-primary-rgb), 0.7); }
  .text-primary-80 { color: rgba(var(--color-primary-rgb), 0.8); }
  .text-primary-90 { color: rgba(var(--color-primary-rgb), 0.9); }
  
  .text-secondary { color: var(--color-secondary); }
  .text-secondary-10 { color: rgba(var(--color-secondary-rgb), 0.1); }
  .text-secondary-20 { color: rgba(var(--color-secondary-rgb), 0.2); }
  .text-secondary-30 { color: rgba(var(--color-secondary-rgb), 0.3); }
  .text-secondary-40 { color: rgba(var(--color-secondary-rgb), 0.4); }
  .text-secondary-50 { color: rgba(var(--color-secondary-rgb), 0.5); }
  .text-secondary-60 { color: rgba(var(--color-secondary-rgb), 0.6); }
  .text-secondary-70 { color: rgba(var(--color-secondary-rgb), 0.7); }
  .text-secondary-80 { color: rgba(var(--color-secondary-rgb), 0.8); }
  .text-secondary-90 { color: rgba(var(--color-secondary-rgb), 0.9); }
  
  .text-accent { color: var(--color-accent); }
  .text-accent-10 { color: rgba(var(--color-accent-rgb), 0.1); }
  .text-accent-20 { color: rgba(var(--color-accent-rgb), 0.2); }
  .text-accent-30 { color: rgba(var(--color-accent-rgb), 0.3); }
  .text-accent-40 { color: rgba(var(--color-accent-rgb), 0.4); }
  .text-accent-50 { color: rgba(var(--color-accent-rgb), 0.5); }
  .text-accent-60 { color: rgba(var(--color-accent-rgb), 0.6); }
  .text-accent-70 { color: rgba(var(--color-accent-rgb), 0.7); }
  .text-accent-80 { color: rgba(var(--color-accent-rgb), 0.8); }
  .text-accent-90 { color: rgba(var(--color-accent-rgb), 0.9); }
  
  .text-bg { color: var(--color-bg); }
  .text-bg-alt { color: var(--color-bg-alt); }
  .text-text { color: var(--color-text); }
  .text-heading { color: var(--color-heading); }
  .text-button { color: var(--color-button); }
  .text-button-text { color: var(--color-button-text); }
  .text-link { color: var(--color-link); }
  .text-link-hover { color: var(--color-link-hover); }
  .text-border { color: var(--color-border); }
  .text-warning { color: var(--warning); }
  .text-success { color: var(--success); }
  .text-muted { color: var(--muted-text); }
  .text-white { color: var(--white); }
  .text-white-10 { color: rgba(var(--white-rgb), 0.1); }
  .text-white-20 { color: rgba(var(--white-rgb), 0.2); }
  .text-white-30 { color: rgba(var(--white-rgb), 0.3); }
  .text-white-40 { color: rgba(var(--white-rgb), 0.4); }
  .text-white-50 { color: rgba(var(--white-rgb), 0.5); }
  .text-white-60 { color: rgba(var(--white-rgb), 0.6); }
  .text-white-70 { color: rgba(var(--white-rgb), 0.7); }
  .text-white-80 { color: rgba(var(--white-rgb), 0.8); }
  .text-white-90 { color: rgba(var(--white-rgb), 0.9); }
  .text-black { color: var(--black); }
  .text-black-10 { color: rgba(var(--black-rgb), 0.1); }
  .text-black-20 { color: rgba(var(--black-rgb), 0.2); }
  .text-black-30 { color: rgba(var(--black-rgb), 0.3); }
  .text-black-40 { color: rgba(var(--black-rgb), 0.4); }
  .text-black-50 { color: rgba(var(--black-rgb), 0.5); }
  .text-black-60 { color: rgba(var(--black-rgb), 0.6); }
  .text-black-70 { color: rgba(var(--black-rgb), 0.7); }
  .text-black-80 { color: rgba(var(--black-rgb), 0.8); }
  .text-black-90 { color: rgba(var(--black-rgb), 0.9); }
  
  /* Background Colors */
  .bg-primary { background-color: var(--color-primary); }
  .bg-primary-10 { background-color: rgba(var(--color-primary-rgb), 0.1); }
  .bg-primary-20 { background-color: rgba(var(--color-primary-rgb), 0.2); }
  .bg-primary-30 { background-color: rgba(var(--color-primary-rgb), 0.3); }
  .bg-primary-40 { background-color: rgba(var(--color-primary-rgb), 0.4); }
  .bg-primary-50 { background-color: rgba(var(--color-primary-rgb), 0.5); }
  .bg-primary-60 { background-color: rgba(var(--color-primary-rgb), 0.6); }
  .bg-primary-70 { background-color: rgba(var(--color-primary-rgb), 0.7); }
  .bg-primary-80 { background-color: rgba(var(--color-primary-rgb), 0.8); }
  .bg-primary-90 { background-color: rgba(var(--color-primary-rgb), 0.9); }
  
  .bg-secondary { background-color: var(--color-secondary); }
  .bg-secondary-10 { background-color: rgba(var(--color-secondary-rgb), 0.1); }
  .bg-secondary-20 { background-color: rgba(var(--color-secondary-rgb), 0.2); }
  .bg-secondary-30 { background-color: rgba(var(--color-secondary-rgb), 0.3); }
  .bg-secondary-40 { background-color: rgba(var(--color-secondary-rgb), 0.4); }
  .bg-secondary-50 { background-color: rgba(var(--color-secondary-rgb), 0.5); }
  .bg-secondary-60 { background-color: rgba(var(--color-secondary-rgb), 0.6); }
  .bg-secondary-70 { background-color: rgba(var(--color-secondary-rgb), 0.7); }
  .bg-secondary-80 { background-color: rgba(var(--color-secondary-rgb), 0.8); }
  .bg-secondary-90 { background-color: rgba(var(--color-secondary-rgb), 0.9); }
  
  .bg-accent { background-color: var(--color-accent); }
  .bg-accent-10 { background-color: rgba(var(--color-accent-rgb), 0.1); }
  .bg-accent-20 { background-color: rgba(var(--color-accent-rgb), 0.2); }
  .bg-accent-30 { background-color: rgba(var(--color-accent-rgb), 0.3); }
  .bg-accent-40 { background-color: rgba(var(--color-accent-rgb), 0.4); }
  .bg-accent-50 { background-color: rgba(var(--color-accent-rgb), 0.5); }
  .bg-accent-60 { background-color: rgba(var(--color-accent-rgb), 0.6); }
  .bg-accent-70 { background-color: rgba(var(--color-accent-rgb), 0.7); }
  .bg-accent-80 { background-color: rgba(var(--color-accent-rgb), 0.8); }
  .bg-accent-90 { background-color: rgba(var(--color-accent-rgb), 0.9); }
  
  .bg-bg { background-color: var(--color-bg); }
  .bg-bg-alt { background-color: var(--color-bg-alt); }
  .bg-text { background-color: var(--color-text); }
  .bg-heading { background-color: var(--color-heading); }
  .bg-button { background-color: var(--color-button); }
  .bg-button-text { background-color: var(--color-button-text); }
  .bg-link { background-color: var(--color-link); }
  .bg-link-hover { background-color: var(--color-link-hover); }
  .bg-border { background-color: var(--color-border); }
  .bg-warning { background-color: var(--warning); }
  .bg-success { background-color: var(--success); }
  .bg-muted { background-color: var(--muted-text); }
  .bg-white { background-color: var(--white); }
  .bg-white-10 { background-color: rgba(var(--white-rgb), 0.1); }
  .bg-white-20 { background-color: rgba(var(--white-rgb), 0.2); }
  .bg-white-30 { background-color: rgba(var(--white-rgb), 0.3); }
  .bg-white-40 { background-color: rgba(var(--white-rgb), 0.4); }
  .bg-white-50 { background-color: rgba(var(--white-rgb), 0.5); }
  .bg-white-60 { background-color: rgba(var(--white-rgb), 0.6); }
  .bg-white-70 { background-color: rgba(var(--white-rgb), 0.7); }
  .bg-white-80 { background-color: rgba(var(--white-rgb), 0.8); }
  .bg-white-90 { background-color: rgba(var(--white-rgb), 0.9); }
  .bg-black { background-color: var(--black); }
  .bg-black-10 { background-color: rgba(var(--black-rgb), 0.1); }
  .bg-black-20 { background-color: rgba(var(--black-rgb), 0.2); }
  .bg-black-30 { background-color: rgba(var(--black-rgb), 0.3); }
  .bg-black-40 { background-color: rgba(var(--black-rgb), 0.4); }
  .bg-black-50 { background-color: rgba(var(--black-rgb), 0.5); }
  .bg-black-60 { background-color: rgba(var(--black-rgb), 0.6); }
  .bg-black-70 { background-color: rgba(var(--black-rgb), 0.7); }
  .bg-black-80 { background-color: rgba(var(--black-rgb), 0.8); }
  .bg-black-90 { background-color: rgba(var(--black-rgb), 0.9); }
  
  /* Border Colors */
  .border-primary { border-color: var(--color-primary) !important; }
  .border-primary-10 { border-color: rgba(var(--color-primary-rgb), 0.1) !important; }
  .border-primary-20 { border-color: rgba(var(--color-primary-rgb), 0.2) !important; }
  .border-primary-30 { border-color: rgba(var(--color-primary-rgb), 0.3) !important; }
  .border-primary-40 { border-color: rgba(var(--color-primary-rgb), 0.4) !important; }
  .border-primary-50 { border-color: rgba(var(--color-primary-rgb), 0.5) !important; }
  .border-primary-60 { border-color: rgba(var(--color-primary-rgb), 0.6) !important; }
  .border-primary-70 { border-color: rgba(var(--color-primary-rgb), 0.7) !important; }
  .border-primary-80 { border-color: rgba(var(--color-primary-rgb), 0.8) !important; }
  .border-primary-90 { border-color: rgba(var(--color-primary-rgb), 0.9) !important; }
  
  .border-secondary { border-color: var(--color-secondary) !important; }
  .border-secondary-10 { border-color: rgba(var(--color-secondary-rgb), 0.1) !important; }
  .border-secondary-20 { border-color: rgba(var(--color-secondary-rgb), 0.2) !important; }
  .border-secondary-30 { border-color: rgba(var(--color-secondary-rgb), 0.3) !important; }
  .border-secondary-40 { border-color: rgba(var(--color-secondary-rgb), 0.4) !important; }
  .border-secondary-50 { border-color: rgba(var(--color-secondary-rgb), 0.5) !important; }
  .border-secondary-60 { border-color: rgba(var(--color-secondary-rgb), 0.6) !important; }
  .border-secondary-70 { border-color: rgba(var(--color-secondary-rgb), 0.7) !important; }
  .border-secondary-80 { border-color: rgba(var(--color-secondary-rgb), 0.8) !important; }
  .border-secondary-90 { border-color: rgba(var(--color-secondary-rgb), 0.9) !important; }
  
  .border-accent { border-color: var(--color-accent) !important; }
  .border-accent-10 { border-color: rgba(var(--color-accent-rgb), 0.1) !important; }
  .border-accent-20 { border-color: rgba(var(--color-accent-rgb), 0.2) !important; }
  .border-accent-30 { border-color: rgba(var(--color-accent-rgb), 0.3) !important; }
  .border-accent-40 { border-color: rgba(var(--color-accent-rgb), 0.4) !important; }
  .border-accent-50 { border-color: rgba(var(--color-accent-rgb), 0.5) !important; }
  .border-accent-60 { border-color: rgba(var(--color-accent-rgb), 0.6) !important; }
  .border-accent-70 { border-color: rgba(var(--color-accent-rgb), 0.7) !important; }
  .border-accent-80 { border-color: rgba(var(--color-accent-rgb), 0.8) !important; }
  .border-accent-90 { border-color: rgba(var(--color-accent-rgb), 0.9) !important; }
  
  .border-bg { border-color: var(--color-bg) !important; }
  .border-bg-alt { border-color: var(--color-bg-alt) !important; }
  .border-text { border-color: var(--color-text) !important; }
  .border-heading { border-color: var(--color-heading) !important; }
  .border-button { border-color: var(--color-button) !important; }
  .border-button-text { border-color: var(--color-button-text) !important; }
  .border-link { border-color: var(--color-link) !important; }
  .border-link-hover { border-color: var(--color-link-hover) !important; }
  .border-default { border-color: var(--color-border) !important; }
  .border-warning { border-color: var(--warning) !important; }
  .border-success { border-color: var(--success) !important; }
  .border-muted { border-color: var(--muted-text) !important; }
  .border-white { border-color: var(--white) !important; }
  .border-white-10 { border-color: rgba(var(--white-rgb), 0.1) !important; }
  .border-white-20 { border-color: rgba(var(--white-rgb), 0.2) !important; }
  .border-white-30 { border-color: rgba(var(--white-rgb), 0.3) !important; }
  .border-white-40 { border-color: rgba(var(--white-rgb), 0.4) !important; }
  .border-white-50 { border-color: rgba(var(--white-rgb), 0.5) !important; }
  .border-white-60 { border-color: rgba(var(--white-rgb), 0.6) !important; }
  .border-white-70 { border-color: rgba(var(--white-rgb), 0.7) !important; }
  .border-white-80 { border-color: rgba(var(--white-rgb), 0.8) !important; }
  .border-white-90 { border-color: rgba(var(--white-rgb), 0.9) !important; }
  .border-black { border-color: var(--black) !important; }
  .border-black-10 { border-color: rgba(var(--black-rgb), 0.1) !important; }
  .border-black-20 { border-color: rgba(var(--black-rgb), 0.2) !important; }
  .border-black-30 { border-color: rgba(var(--black-rgb), 0.3) !important; }
  .border-black-40 { border-color: rgba(var(--black-rgb), 0.4) !important; }
  .border-black-50 { border-color: rgba(var(--black-rgb), 0.5) !important; }
  .border-black-60 { border-color: rgba(var(--black-rgb), 0.6) !important; }
  .border-black-70 { border-color: rgba(var(--black-rgb), 0.7) !important; }
  .border-black-80 { border-color: rgba(var(--black-rgb), 0.8) !important; }
  .border-black-90 { border-color: rgba(var(--black-rgb), 0.9) !important; }
  
  /* ==================== */
  /* === BORDER UTILITIES === */
  /* ==================== */
  .rounded-none { border-radius: 0; }
  .rounded-sm { border-radius: 0.125rem; }
  .rounded { border-radius: var(--border-radius); }
  .rounded-md { border-radius: 0.375rem; }
  .rounded-lg { border-radius: 0.5rem; }
  .rounded-xl { border-radius: 0.75rem; }
  .rounded-2xl { border-radius: 1rem; }
  .rounded-3xl { border-radius: 1.5rem; }
  .rounded-full { border-radius: 9999px; }
  
  .rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
  .rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
  .rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  
  .border-0 { border-width: 0; }
  .border { border-width: 1px; }
  .border-2 { border-width: 2px; }
  .border-4 { border-width: 4px; }
  .border-8 { border-width: 8px; }
  
  .border-t-0 { border-top-width: 0; }
  .border-r-0 { border-right-width: 0; }
  .border-b-0 { border-bottom-width: 0; }
  .border-l-0 { border-left-width: 0; }
  
  .border-t { border-top-width: var(--border-width); }
  .border-r { border-right-width: var(--border-width); }
  .border-b { border-bottom-width: var(--border-width); }
  .border-l { border-left-width: var(--border-width); }
  
  .border-solid { border-style: solid; }
  .border-dashed { border-style: dashed; }
  .border-dotted { border-style: dotted; }
  .border-double { border-style: double; }
  .border-none { border-style: none; }
  
/* ==================== */
/* === SPACING UTILITIES === */
/* ==================== */

/* Margin - All sides */
.m-auto { margin: auto; }
.m-0 { margin: 0; }
.m-3xs { margin: var(--space-3xs); }
.m-2xs { margin: var(--space-2xs); }
.m-xs { margin: var(--space-xs); }
.m-s { margin: var(--space-s); }
.m-m { margin: var(--space-m); }
.m-l { margin: var(--space-l); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }
.m-4xl { margin: var(--space-4xl); }

/* Margin - Top */
.mt-auto { margin-top: auto; }
.mt-0 { margin-top: 0; }
.mt-3xs { margin-top: var(--space-3xs); }
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mt-4xl { margin-top: var(--space-4xl); }

/* Margin - Right */
.mr-auto { margin-right: auto; }
.mr-0 { margin-right: 0; }
.mr-3xs { margin-right: var(--space-3xs); }
.mr-2xs { margin-right: var(--space-2xs); }
.mr-xs { margin-right: var(--space-xs); }
.mr-s { margin-right: var(--space-s); }
.mr-m { margin-right: var(--space-m); }
.mr-l { margin-right: var(--space-l); }
.mr-xl { margin-right: var(--space-xl); }
.mr-2xl { margin-right: var(--space-2xl); }
.mr-3xl { margin-right: var(--space-3xl); }
.mr-4xl { margin-right: var(--space-4xl); }

/* Margin - Bottom */
.mb-auto { margin-bottom: auto; }
.mb-0 { margin-bottom: 0; }
.mb-3xs { margin-bottom: var(--space-3xs); }
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.mb-4xl { margin-bottom: var(--space-4xl); }

/* Margin - Left */
.ml-auto { margin-left: auto; }
.ml-0 { margin-left: 0; }
.ml-3xs { margin-left: var(--space-3xs); }
.ml-2xs { margin-left: var(--space-2xs); }
.ml-xs { margin-left: var(--space-xs); }
.ml-s { margin-left: var(--space-s); }
.ml-m { margin-left: var(--space-m); }
.ml-l { margin-left: var(--space-l); }
.ml-xl { margin-left: var(--space-xl); }
.ml-2xl { margin-left: var(--space-2xl); }
.ml-3xl { margin-left: var(--space-3xl); }
.ml-4xl { margin-left: var(--space-4xl); }

/* Margin - Horizontal (left + right) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-3xs { margin-left: var(--space-3xs); margin-right: var(--space-3xs); }
.mx-2xs { margin-left: var(--space-2xs); margin-right: var(--space-2xs); }
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-s { margin-left: var(--space-s); margin-right: var(--space-s); }
.mx-m { margin-left: var(--space-m); margin-right: var(--space-m); }
.mx-l { margin-left: var(--space-l); margin-right: var(--space-l); }
.mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
.mx-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); }
.mx-4xl { margin-left: var(--space-4xl); margin-right: var(--space-4xl); }

/* Margin - Vertical (top + bottom) */
.my-auto { margin-top: auto; margin-bottom: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); }
.my-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.my-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.my-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }
.my-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }
.my-4xl { margin-top: var(--space-4xl); margin-bottom: var(--space-4xl); }

/* Negative Margins */
.-m-3xs { margin: calc(var(--space-3xs) * -1); }
.-m-2xs { margin: calc(var(--space-2xs) * -1); }
.-m-xs { margin: calc(var(--space-xs) * -1); }
.-m-s { margin: calc(var(--space-s) * -1); }
.-m-m { margin: calc(var(--space-m) * -1); }
.-m-l { margin: calc(var(--space-l) * -1); }
.-m-xl { margin: calc(var(--space-xl) * -1); }
.-m-2xl { margin: calc(var(--space-2xl) * -1); }
.-m-3xl { margin: calc(var(--space-3xl) * -1); }
.-m-4xl { margin: calc(var(--space-4xl) * -1); }

/* Negative Margin - Top */
.-mt-3xs { margin-top: calc(var(--space-3xs) * -1); }
.-mt-2xs { margin-top: calc(var(--space-2xs) * -1); }
.-mt-xs { margin-top: calc(var(--space-xs) * -1); }
.-mt-s { margin-top: calc(var(--space-s) * -1); }
.-mt-m { margin-top: calc(var(--space-m) * -1); }
.-mt-l { margin-top: calc(var(--space-l) * -1); }
.-mt-xl { margin-top: calc(var(--space-xl) * -1); }
.-mt-2xl { margin-top: calc(var(--space-2xl) * -1); }
.-mt-3xl { margin-top: calc(var(--space-3xl) * -1); }
.-mt-4xl { margin-top: calc(var(--space-4xl) * -1); }

/* Negative Margin - Right */
.-mr-3xs { margin-right: calc(var(--space-3xs) * -1); }
.-mr-2xs { margin-right: calc(var(--space-2xs) * -1); }
.-mr-xs { margin-right: calc(var(--space-xs) * -1); }
.-mr-s { margin-right: calc(var(--space-s) * -1); }
.-mr-m { margin-right: calc(var(--space-m) * -1); }
.-mr-l { margin-right: calc(var(--space-l) * -1); }
.-mr-xl { margin-right: calc(var(--space-xl) * -1); }
.-mr-2xl { margin-right: calc(var(--space-2xl) * -1); }
.-mr-3xl { margin-right: calc(var(--space-3xl) * -1); }
.-mr-4xl { margin-right: calc(var(--space-4xl) * -1); }

/* Negative Margin - Bottom */
.-mb-3xs { margin-bottom: calc(var(--space-3xs) * -1); }
.-mb-2xs { margin-bottom: calc(var(--space-2xs) * -1); }
.-mb-xs { margin-bottom: calc(var(--space-xs) * -1); }
.-mb-s { margin-bottom: calc(var(--space-s) * -1); }
.-mb-m { margin-bottom: calc(var(--space-m) * -1); }
.-mb-l { margin-bottom: calc(var(--space-l) * -1); }
.-mb-xl { margin-bottom: calc(var(--space-xl) * -1); }
.-mb-2xl { margin-bottom: calc(var(--space-2xl) * -1); }
.-mb-3xl { margin-bottom: calc(var(--space-3xl) * -1); }
.-mb-4xl { margin-bottom: calc(var(--space-4xl) * -1); }

/* Negative Margin - Left */
.-ml-3xs { margin-left: calc(var(--space-3xs) * -1); }
.-ml-2xs { margin-left: calc(var(--space-2xs) * -1); }
.-ml-xs { margin-left: calc(var(--space-xs) * -1); }
.-ml-s { margin-left: calc(var(--space-s) * -1); }
.-ml-m { margin-left: calc(var(--space-m) * -1); }
.-ml-l { margin-left: calc(var(--space-l) * -1); }
.-ml-xl { margin-left: calc(var(--space-xl) * -1); }
.-ml-2xl { margin-left: calc(var(--space-2xl) * -1); }
.-ml-3xl { margin-left: calc(var(--space-3xl) * -1); }
.-ml-4xl { margin-left: calc(var(--space-4xl) * -1); }

/* Negative Margin - Horizontal */
.-mx-3xs { margin-left: calc(var(--space-3xs) * -1); margin-right: calc(var(--space-3xs) * -1); }
.-mx-2xs { margin-left: calc(var(--space-2xs) * -1); margin-right: calc(var(--space-2xs) * -1); }
.-mx-xs { margin-left: calc(var(--space-xs) * -1); margin-right: calc(var(--space-xs) * -1); }
.-mx-s { margin-left: calc(var(--space-s) * -1); margin-right: calc(var(--space-s) * -1); }
.-mx-m { margin-left: calc(var(--space-m) * -1); margin-right: calc(var(--space-m) * -1); }
.-mx-l { margin-left: calc(var(--space-l) * -1); margin-right: calc(var(--space-l) * -1); }
.-mx-xl { margin-left: calc(var(--space-xl) * -1); margin-right: calc(var(--space-xl) * -1); }
.-mx-2xl { margin-left: calc(var(--space-2xl) * -1); margin-right: calc(var(--space-2xl) * -1); }
.-mx-3xl { margin-left: calc(var(--space-3xl) * -1); margin-right: calc(var(--space-3xl) * -1); }
.-mx-4xl { margin-left: calc(var(--space-4xl) * -1); margin-right: calc(var(--space-4xl) * -1); }

/* Negative Margin - Vertical */
.-my-3xs { margin-top: calc(var(--space-3xs) * -1); margin-bottom: calc(var(--space-3xs) * -1); }
.-my-2xs { margin-top: calc(var(--space-2xs) * -1); margin-bottom: calc(var(--space-2xs) * -1); }
.-my-xs { margin-top: calc(var(--space-xs) * -1); margin-bottom: calc(var(--space-xs) * -1); }
.-my-s { margin-top: calc(var(--space-s) * -1); margin-bottom: calc(var(--space-s) * -1); }
.-my-m { margin-top: calc(var(--space-m) * -1); margin-bottom: calc(var(--space-m) * -1); }
.-my-l { margin-top: calc(var(--space-l) * -1); margin-bottom: calc(var(--space-l) * -1); }
.-my-xl { margin-top: calc(var(--space-xl) * -1); margin-bottom: calc(var(--space-xl) * -1); }
.-my-2xl { margin-top: calc(var(--space-2xl) * -1); margin-bottom: calc(var(--space-2xl) * -1); }
.-my-3xl { margin-top: calc(var(--space-3xl) * -1); margin-bottom: calc(var(--space-3xl) * -1); }
.-my-4xl { margin-top: calc(var(--space-4xl) * -1); margin-bottom: calc(var(--space-4xl) * -1); }

/* Padding - All sides */
.p-0 { padding: 0; }
.p-3xs { padding: var(--space-3xs); }
.p-2xs { padding: var(--space-2xs); }
.p-xs { padding: var(--space-xs); }
.p-s { padding: var(--space-s); }
.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }
.p-4xl { padding: var(--space-4xl); }

/* Padding - Top */
.pt-0 { padding-top: 0; }
.pt-3xs { padding-top: var(--space-3xs); }
.pt-2xs { padding-top: var(--space-2xs); }
.pt-xs { padding-top: var(--space-xs); }
.pt-s { padding-top: var(--space-s); }
.pt-m { padding-top: var(--space-m); }
.pt-l { padding-top: var(--space-l); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }
.pt-4xl { padding-top: var(--space-4xl); }

/* Padding - Right */
.pr-0 { padding-right: 0; }
.pr-3xs { padding-right: var(--space-3xs); }
.pr-2xs { padding-right: var(--space-2xs); }
.pr-xs { padding-right: var(--space-xs); }
.pr-s { padding-right: var(--space-s); }
.pr-m { padding-right: var(--space-m); }
.pr-l { padding-right: var(--space-l); }
.pr-xl { padding-right: var(--space-xl); }
.pr-2xl { padding-right: var(--space-2xl); }
.pr-3xl { padding-right: var(--space-3xl); }
.pr-4xl { padding-right: var(--space-4xl); }

/* Padding - Bottom */
.pb-0 { padding-bottom: 0; }
.pb-3xs { padding-bottom: var(--space-3xs); }
.pb-2xs { padding-bottom: var(--space-2xs); }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-s { padding-bottom: var(--space-s); }
.pb-m { padding-bottom: var(--space-m); }
.pb-l { padding-bottom: var(--space-l); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }
.pb-4xl { padding-bottom: var(--space-4xl); }

/* Padding - Left */
.pl-0 { padding-left: 0; }
.pl-3xs { padding-left: var(--space-3xs); }
.pl-2xs { padding-left: var(--space-2xs); }
.pl-xs { padding-left: var(--space-xs); }
.pl-s { padding-left: var(--space-s); }
.pl-m { padding-left: var(--space-m); }
.pl-l { padding-left: var(--space-l); }
.pl-xl { padding-left: var(--space-xl); }
.pl-2xl { padding-left: var(--space-2xl); }
.pl-3xl { padding-left: var(--space-3xl); }
.pl-4xl { padding-left: var(--space-4xl); }

/* Padding - Horizontal */
.px-0 { padding-left: 0; padding-right: 0; }
.px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
.px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
.px-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); }

/* Padding - Vertical */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
.py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }

/* Gap */
.gap-0 { gap: 0; }
.gap-3xs { gap: var(--space-3xs); }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.gap-4xl { gap: var(--space-4xl); }

/* Column Gap */
.column-gap-0 { column-gap: 0; }
.column-gap-3xs { column-gap: var(--space-3xs); }
.column-gap-2xs { column-gap: var(--space-2xs); }
.column-gap-xs { column-gap: var(--space-xs); }
.column-gap-s { column-gap: var(--space-s); }
.column-gap-m { column-gap: var(--space-m); }
.column-gap-l { column-gap: var(--space-l); }
.column-gap-xl { column-gap: var(--space-xl); }
.column-gap-2xl { column-gap: var(--space-2xl); }
.column-gap-3xl { column-gap: var(--space-3xl); }
.column-gap-4xl { column-gap: var(--space-4xl); }

/* Row Gap */
.row-gap-0 { row-gap: 0; }
.row-gap-3xs { row-gap: var(--space-3xs); }
.row-gap-2xs { row-gap: var(--space-2xs); }
.row-gap-xs { row-gap: var(--space-xs); }
.row-gap-s { row-gap: var(--space-s); }
.row-gap-m { row-gap: var(--space-m); }
.row-gap-l { row-gap: var(--space-l); }
.row-gap-xl { row-gap: var(--space-xl); }
.row-gap-2xl { row-gap: var(--space-2xl); }
.row-gap-3xl { row-gap: var(--space-3xl); }
.row-gap-4xl { row-gap: var(--space-4xl); }

/* Space Between - Horizontal */
.space-x-0 > * + * { margin-left: 0; }
.space-x-3xs > * + * { margin-left: var(--space-3xs); }
.space-x-2xs > * + * { margin-left: var(--space-2xs); }
.space-x-xs > * + * { margin-left: var(--space-xs); }
.space-x-s > * + * { margin-left: var(--space-s); }
.space-x-m > * + * { margin-left: var(--space-m); }
.space-x-l > * + * { margin-left: var(--space-l); }
.space-x-xl > * + * { margin-left: var(--space-xl); }
.space-x-2xl > * + * { margin-left: var(--space-2xl); }
.space-x-3xl > * + * { margin-left: var(--space-3xl); }
.space-x-4xl > * + * { margin-left: var(--space-4xl); }

/* Space Between - Vertical */
.space-y-0 > * + * { margin-top: 0; }
.space-y-3xs > * + * { margin-top: var(--space-3xs); }
.space-y-2xs > * + * { margin-top: var(--space-2xs); }
.space-y-xs > * + * { margin-top: var(--space-xs); }
.space-y-s > * + * { margin-top: var(--space-s); }
.space-y-m > * + * { margin-top: var(--space-m); }
.space-y-l > * + * { margin-top: var(--space-l); }
.space-y-xl > * + * { margin-top: var(--space-xl); }
.space-y-2xl > * + * { margin-top: var(--space-2xl); }
.space-y-3xl > * + * { margin-top: var(--space-3xl); }
.space-y-4xl > * + * { margin-top: var(--space-4xl); }
  
  
  /* ==================== */
  /* === FLEXBOX UTILITIES === */
  /* ==================== */
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  
  .flex-row { flex-direction: row; }
  .flex-row-reverse { flex-direction: row-reverse; }
  .flex-col { flex-direction: column; }
  .flex-col-reverse { flex-direction: column-reverse; }
  
  .flex-wrap { flex-wrap: wrap; }
  .flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .flex-nowrap { flex-wrap: nowrap; }
  
  .flex-1 { flex: 1 1 0%; }
  .flex-auto { flex: 1 1 auto; }
  .flex-initial { flex: 0 1 auto; }
  .flex-none { flex: none; }
  
  .flex-grow { flex-grow: 1; }
  .flex-grow-0 { flex-grow: 0; }
  .flex-shrink { flex-shrink: 1; }
  .flex-shrink-0 { flex-shrink: 0; }
  
  .justify-start { justify-content: flex-start; }
  .justify-end { justify-content: flex-end; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .justify-around { justify-content: space-around; }
  .justify-evenly { justify-content: space-evenly; }
  
  .items-start { align-items: flex-start; }
  .items-end { align-items: flex-end; }
  .items-center { align-items: center; }
  .items-baseline { align-items: baseline; }
  .items-stretch { align-items: stretch; }
  
  .self-auto { align-self: auto; }
  .self-start { align-self: flex-start; }
  .self-end { align-self: flex-end; }
  .self-center { align-self: center; }
  .self-stretch { align-self: stretch; }
  .self-baseline { align-self: baseline; }
  
  .content-start { align-content: flex-start; }
  .content-end { align-content: flex-end; }
  .content-center { align-content: center; }
  .content-between { align-content: space-between; }
  .content-around { align-content: space-around; }
  .content-evenly { align-content: space-evenly; }
  
  
  /* ==================== */
  /* === GRID UTILITIES === */
  /* ==================== */
  .grid { display: grid; }
  .inline-grid { display: inline-grid; }
  
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid-cols-none { grid-template-columns: none; }
  
  .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
  .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .grid-rows-none { grid-template-rows: none; }
  
  .col-auto { grid-column: auto; }
  .col-span-1 { grid-column: span 1 / span 1; }
  .col-span-2 { grid-column: span 2 / span 2; }
  .col-span-3 { grid-column: span 3 / span 3; }
  .col-span-4 { grid-column: span 4 / span 4; }
  .col-span-5 { grid-column: span 5 / span 5; }
  .col-span-6 { grid-column: span 6 / span 6; }
  .col-span-7 { grid-column: span 7 / span 7; }
  .col-span-8 { grid-column: span 8 / span 8; }
  .col-span-9 { grid-column: span 9 / span 9; }
  .col-span-10 { grid-column: span 10 / span 10; }
  .col-span-11 { grid-column: span 11 / span 11; }
  .col-span-12 { grid-column: span 12 / span 12; }
  .col-span-full { grid-column: 1 / -1; }
  
  .row-auto { grid-row: auto; }
  .row-span-1 { grid-row: span 1 / span 1; }
  .row-span-2 { grid-row: span 2 / span 2; }
  .row-span-3 { grid-row: span 3 / span 3; }
  .row-span-4 { grid-row: span 4 / span 4; }
  .row-span-5 { grid-row: span 5 / span 5; }
  .row-span-6 { grid-row: span 6 / span 6; }
  .row-span-full { grid-row: 1 / -1; }
  
  /* ==================== */
  /* === LAYOUT & SIZING === */
  /* ==================== */
  .w-0 { width: 0; }
  .w-px { width: 1px; }
  .w-0\.5 { width: 0.125rem; }
  .w-1 { width: 0.25rem; }
  .w-1\.5 { width: 0.375rem; }
  .w-2 { width: 0.5rem; }
  .w-2\.5 { width: 0.625rem; }
  .w-3 { width: 0.75rem; }
  .w-3\.5 { width: 0.875rem; }
  .w-4 { width: 1rem; }
  .w-5 { width: 1.25rem; }
  .w-6 { width: 1.5rem; }
  .w-7 { width: 1.75rem; }
  .w-8 { width: 2rem; }
  .w-9 { width: 2.25rem; }
  .w-10 { width: 2.5rem; }
  .w-11 { width: 2.75rem; }
  .w-12 { width: 3rem; }
  .w-14 { width: 3.5rem; }
  .w-16 { width: 4rem; }
  .w-20 { width: 5rem; }
  .w-24 { width: 6rem; }
  .w-28 { width: 7rem; }
  .w-32 { width: 8rem; }
  .w-36 { width: 9rem; }
  .w-40 { width: 10rem; }
  .w-44 { width: 11rem; }
  .w-48 { width: 12rem; }
  .w-52 { width: 13rem; }
  .w-56 { width: 14rem; }
  .w-60 { width: 15rem; }
  .w-64 { width: 16rem; }
  .w-72 { width: 18rem; }
  .w-80 { width: 20rem; }
  .w-96 { width: 24rem; }
  .w-auto { width: auto; }
  .w-1\/2 { width: 50%; }
  .w-1\/3 { width: 33.333333%; }
  .w-2\/3 { width: 66.666667%; }
  .w-1\/4 { width: 25%; }
  .w-2\/4 { width: 50%; }
  .w-3\/4 { width: 75%; }
  .w-1\/5 { width: 20%; }
  .w-2\/5 { width: 40%; }
  .w-3\/5 { width: 60%; }
  .w-4\/5 { width: 80%; }
  .w-1\/6 { width: 16.666667%; }
  .w-2\/6 { width: 33.333333%; }
  .w-3\/6 { width: 50%; }
  .w-4\/6 { width: 66.666667%; }
  .w-5\/6 { width: 83.333333%; }
  .w-1\/12 { width: 8.333333%; }
  .w-2\/12 { width: 16.666667%; }
  .w-3\/12 { width: 25%; }
  .w-4\/12 { width: 33.333333%; }
  .w-5\/12 { width: 41.666667%; }
  .w-6\/12 { width: 50%; }
  .w-7\/12 { width: 58.333333%; }
  .w-8\/12 { width: 66.666667%; }
  .w-9\/12 { width: 75%; }
  .w-10\/12 { width: 83.333333%; }
  .w-11\/12 { width: 91.666667%; }
  .w-full { width: 100%; }
  .w-screen { width: 100vw; }
  .w-min { width: min-content; }
  .w-max { width: max-content; }
  .w-fit { width: fit-content; }
  
  .min-w-0 { min-width: 0; }
  .min-w-full { min-width: 100%; }
  .min-w-min { min-width: min-content; }
  .min-w-max { min-width: max-content; }
  .min-w-fit { min-width: fit-content; }
  
  .max-w-0 { max-width: 0; }
  .max-w-none { max-width: none; }
  .max-w-xs { max-width: 20rem; }
  .max-w-sm { max-width: 24rem; }
  .max-w-md { max-width: 28rem; }
  .max-w-lg { max-width: 32rem; }
  .max-w-xl { max-width: 36rem; }
  .max-w-2xl { max-width: 42rem; }
  .max-w-3xl { max-width: 48rem; }
  .max-w-4xl { max-width: 56rem; }
  .max-w-5xl { max-width: 64rem; }
  .max-w-6xl { max-width: 72rem; }
  .max-w-7xl { max-width: 80rem; }
  .max-w-full { max-width: 100%; }
  .max-w-min { max-width: min-content; }
  .max-w-max { max-width: max-content; }
  .max-w-fit { max-width: fit-content; }
  .max-w-prose { max-width: 65ch; }
  .max-w-screen-sm { max-width: 640px; }
  .max-w-screen-md { max-width: 768px; }
  .max-w-screen-lg { max-width: 1024px; }
  .max-w-screen-xl { max-width: 1280px; }
  .max-w-screen-2xl { max-width: 1536px; }
  
  /* Height Utilities */
  .h-0 { height: 0; }
  .h-px { height: 1px; }
  .h-0\.5 { height: 0.125rem; }
  .h-1 { height: 0.25rem; }
  .h-1\.5 { height: 0.375rem; }
  .h-2 { height: 0.5rem; }
  .h-2\.5 { height: 0.625rem; }
  .h-3 { height: 0.75rem; }
  .h-3\.5 { height: 0.875rem; }
  .h-4 { height: 1rem; }
  .h-5 { height: 1.25rem; }
  .h-6 { height: 1.5rem; }
  .h-7 { height: 1.75rem; }
  .h-8 { height: 2rem; }
  .h-9 { height: 2.25rem; }
  .h-10 { height: 2.5rem; }
  .h-11 { height: 2.75rem; }
  .h-12 { height: 3rem; }
  .h-14 { height: 3.5rem; }
  .h-16 { height: 4rem; }
  .h-20 { height: 5rem; }
  .h-24 { height: 6rem; }
  .h-28 { height: 7rem; }
  .h-32 { height: 8rem; }
  .h-36 { height: 9rem; }
  .h-40 { height: 10rem; }
  .h-44 { height: 11rem; }
  .h-48 { height: 12rem; }
  .h-52 { height: 13rem; }
  .h-56 { height: 14rem; }
  .h-60 { height: 15rem; }
  .h-64 { height: 16rem; }
  .h-72 { height: 18rem; }
  .h-80 { height: 20rem; }
  .h-96 { height: 24rem; }
  .h-auto { height: auto; }
  .h-1\/2 { height: 50%; }
  .h-1\/3 { height: 33.333333%; }
  .h-2\/3 { height: 66.666667%; }
  .h-1\/4 { height: 25%; }
  .h-2\/4 { height: 50%; }
  .h-3\/4 { height: 75%; }
  .h-1\/5 { height: 20%; }
  .h-2\/5 { height: 40%; }
  .h-3\/5 { height: 60%; }
  .h-4\/5 { height: 80%; }
  .h-1\/6 { height: 16.666667%; }
  .h-5\/6 { height: 83.333333%; }
  .h-full { height: 100%; }
  .h-screen { height: 100vh; }
  .h-min { height: min-content; }
  .h-max { height: max-content; }
  .h-fit { height: fit-content; }
  
  .min-h-0 { min-height: 0; }
  .min-h-full { min-height: 100%; }
  .min-h-screen { min-height: 100vh; }
  .min-h-min { min-height: min-content; }
  .min-h-max { min-height: max-content; }
  .min-h-fit { min-height: fit-content; }
  
  .max-h-0 { max-height: 0; }
  .max-h-px { max-height: 1px; }
  .max-h-0\.5 { max-height: 0.125rem; }
  .max-h-1 { max-height: 0.25rem; }
  .max-h-1\.5 { max-height: 0.375rem; }
  .max-h-2 { max-height: 0.5rem; }
  .max-h-2\.5 { max-height: 0.625rem; }
  .max-h-3 { max-height: 0.75rem; }
  .max-h-3\.5 { max-height: 0.875rem; }
  .max-h-4 { max-height: 1rem; }
  .max-h-5 { max-height: 1.25rem; }
  .max-h-6 { max-height: 1.5rem; }
  .max-h-7 { max-height: 1.75rem; }
  .max-h-8 { max-height: 2rem; }
  .max-h-9 { max-height: 2.25rem; }
  .max-h-10 { max-height: 2.5rem; }
  .max-h-11 { max-height: 2.75rem; }
  .max-h-12 { max-height: 3rem; }
  .max-h-14 { max-height: 3.5rem; }
  .max-h-16 { max-height: 4rem; }
  .max-h-20 { max-height: 5rem; }
  .max-h-24 { max-height: 6rem; }
  .max-h-28 { max-height: 7rem; }
  .max-h-32 { max-height: 8rem; }
  .max-h-36 { max-height: 9rem; }
  .max-h-40 { max-height: 10rem; }
  .max-h-44 { max-height: 11rem; }
  .max-h-48 { max-height: 12rem; }
  .max-h-52 { max-height: 13rem; }
  .max-h-56 { max-height: 14rem; }
  .max-h-60 { max-height: 15rem; }
  .max-h-64 { max-height: 16rem; }
  .max-h-72 { max-height: 18rem; }
  .max-h-80 { max-height: 20rem; }
  .max-h-96 { max-height: 24rem; }
  .max-h-full { max-height: 100%; }
  .max-h-screen { max-height: 100vh; }
  .max-h-min { max-height: min-content; }
  .max-h-max { max-height: max-content; }
  .max-h-fit { max-height: fit-content; }
  
  /* ==================== */
  /* === POSITIONING === */
  /* ==================== */
  .static { position: static; }
  .fixed { position: fixed; }
  .absolute { position: absolute; }
  .relative { position: relative; }
  .sticky { position: sticky; }
  
  .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
  .inset-x-0 { left: 0; right: 0; }
  .inset-y-0 { top: 0; bottom: 0; }
  
  .top-0 { top: 0; }
  .right-0 { right: 0; }
  .bottom-0 { bottom: 0; }
  .left-0 { left: 0; }
  
  .top-50 { top: 50%; }
  .left-50 { left: 50%; }
  .translate-50 { transform: translate(-50%, -50%); }
  
  
  /* ==================== */
  /* === SHADOWS === */
  /* ==================== */
  .shadow-none { box-shadow: none; }
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow { box-shadow: var(--shadow); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  .shadow-xl { box-shadow: var(--shadow-xl); }
  .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
  
  /* ==================== */
  /* === TRANSITIONS & ANIMATIONS === */
  /* ==================== */
  .transition-none { transition-property: none; }
  .transition-all { transition-property: all; }
  .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; }
  .transition-colors { transition-property: background-color, border-color, color, fill, stroke; }
  .transition-opacity { transition-property: opacity; }
  .transition-shadow { transition-property: box-shadow; }
  .transition-transform { transition-property: transform; }
  
  
  /* ==================== */
  /* === EFFECTS & FILTERS === */
  /* ==================== */
  .opacity-0 { opacity: 0; }
  .opacity-5 { opacity: 0.05; }
  .opacity-10 { opacity: 0.1; }
  .opacity-20 { opacity: 0.2; }
  .opacity-25 { opacity: 0.25; }
  .opacity-30 { opacity: 0.3; }
  .opacity-40 { opacity: 0.4; }
  .opacity-50 { opacity: 0.5; }
  .opacity-60 { opacity: 0.6; }
  .opacity-70 { opacity: 0.7; }
  .opacity-75 { opacity: 0.75; }
  .opacity-80 { opacity: 0.8; }
  .opacity-90 { opacity: 0.9; }
  .opacity-95 { opacity: 0.95; }
  .opacity-100 { opacity: 1; }
  
  .mix-blend-normal { mix-blend-mode: normal; }
  .mix-blend-multiply { mix-blend-mode: multiply; }
  .mix-blend-screen { mix-blend-mode: screen; }
  .mix-blend-overlay { mix-blend-mode: overlay; }
  .mix-blend-darken { mix-blend-mode: darken; }
  .mix-blend-lighten { mix-blend-mode: lighten; }
  .mix-blend-color-dodge { mix-blend-mode: color-dodge; }
  .mix-blend-color-burn { mix-blend-mode: color-burn; }
  .mix-blend-hard-light { mix-blend-mode: hard-light; }
  .mix-blend-soft-light { mix-blend-mode: soft-light; }
  .mix-blend-difference { mix-blend-mode: difference; }
  .mix-blend-exclusion { mix-blend-mode: exclusion; }
  .mix-blend-hue { mix-blend-mode: hue; }
  .mix-blend-saturation { mix-blend-mode: saturation; }
  .mix-blend-color { mix-blend-mode: color; }
  .mix-blend-luminosity { mix-blend-mode: luminosity; }
  
  /* ==================== */
  /* === INTERACTIVITY === */
  /* ==================== */
  .pointer-events-none { pointer-events: none; }
  .pointer-events-auto { pointer-events: auto; }
  
  .cursor-auto { cursor: auto; }
  .cursor-default { cursor: default; }
  .cursor-pointer { cursor: pointer; }
  .cursor-wait { cursor: wait; }
  .cursor-text { cursor: text; }
  .cursor-move { cursor: move; }
  .cursor-help { cursor: help; }
  .cursor-not-allowed { cursor: not-allowed; }
  .cursor-none { cursor: none; }
  .cursor-context-menu { cursor: context-menu; }
  .cursor-progress { cursor: progress; }
  .cursor-cell { cursor: cell; }
  .cursor-crosshair { cursor: crosshair; }
  .cursor-vertical-text { cursor: vertical-text; }
  .cursor-alias { cursor: alias; }
  .cursor-copy { cursor: copy; }
  .cursor-no-drop { cursor: no-drop; }
  .cursor-grab { cursor: grab; }
  .cursor-grabbing { cursor: grabbing; }
  .cursor-all-scroll { cursor: all-scroll; }
  .cursor-col-resize { cursor: col-resize; }
  .cursor-row-resize { cursor: row-resize; }
  .cursor-n-resize { cursor: n-resize; }
  .cursor-e-resize { cursor: e-resize; }
  .cursor-s-resize { cursor: s-resize; }
  .cursor-w-resize { cursor: w-resize; }
  .cursor-ne-resize { cursor: ne-resize; }
  .cursor-nw-resize { cursor: nw-resize; }
  .cursor-se-resize { cursor: se-resize; }
  .cursor-sw-resize { cursor: sw-resize; }
  .cursor-ew-resize { cursor: ew-resize; }
  .cursor-ns-resize { cursor: ns-resize; }
  .cursor-nesw-resize { cursor: nesw-resize; }
  .cursor-nwse-resize { cursor: nwse-resize; }
  .cursor-zoom-in { cursor: zoom-in; }
  .cursor-zoom-out { cursor: zoom-out; }
  
  .resize-none { resize: none; }
  .resize-y { resize: vertical; }
  .resize-x { resize: horizontal; }
  .resize { resize: both; }
  
  .select-none { user-select: none; }
  .select-text { user-select: text; }
  .select-all { user-select: all; }
  .select-auto { user-select: auto; }
  
  .scroll-auto { scroll-behavior: auto; }
  .scroll-smooth { scroll-behavior: smooth; }
  
  /* ==================== */
  /* === SVG UTILITIES === */
  /* ==================== */
  .fill-current { fill: currentColor; }
  .stroke-current { stroke: currentColor; }
  .stroke-0 { stroke-width: 0; }
  .stroke-1 { stroke-width: 1; }
  .stroke-2 { stroke-width: 2; }
  
  /* ==================== */
  /* === ACCESSIBILITY === */
  /* ==================== */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  
  /* ==================== */
  /* === RESPONSIVE UTILITIES === */
  /* ==================== */
  @media (min-width: 640px) {
    .sm\:hidden { display: none; }
    /* Add other sm: variants as needed */
  }
  
  @media (min-width: 768px) {
    .md\:hidden { display: none; }
    /* Add other md: variants as needed */
  }
  
  @media (min-width: 1024px) {
    .lg\:hidden { display: none; }
    /* Add other lg: variants as needed */
  }
  
  @media (min-width: 1280px) {
    .xl\:hidden { display: none; }
    /* Add other xl: variants as needed */
  }
  
  @media (min-width: 1536px) {
    .xxl\:hidden { display: none; }
    /* Add other xxl: variants as needed */
  }
  
  /* ==================== */
  /* === PRINT UTILITIES === */
  /* ==================== */
  @media print {
    .print\:hidden { display: none; }
    /* Add other print utilities as needed */
  }
  
  /* ==================== */
  /* === CUSTOM UTILITIES === */
  /* ==================== */
  /* Add your custom utility classes below */
  .aspect-ratio-16\/9 { aspect-ratio: 16/9; }
  .aspect-ratio-4\/3 { aspect-ratio: 4/3; }
  .aspect-ratio-1\/1 { aspect-ratio: 1/1; }
  
  .overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  
  .visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
  
  /* ==================== */
  /* === BRICKS BUILDER SPECIFIC === */
  /* ==================== */
  .brf-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
  }

  .brf-container-small {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
  }

  @media (max-width: 800px) {
    .brf-container-small {
      max-width: 100%;
    }
  }
  
  @media (min-width: 640px) {
    .brf-container {
      max-width: 640px;
    }
  }
  
  @media (min-width: 768px) {
    .brf-container {
      max-width: 768px;
    }
  }
  
  @media (min-width: 1024px) {
    .brf-container {
      max-width: 1024px;
    }
  }
  
  @media (min-width: 1280px) {
    .brf-container {
      max-width: 1280px;
    }
  }
  
  @media (min-width: 1536px) {
    .brf-container {
      max-width: 1536px;
    }
  }