/* Small Desktop (1024-1119px) */
@media (max-width: 1119px) {
  :root {
    /* Micro/Small Spacing - stays same */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    
    /* Medium Spacing - minimal reduction */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 3.5rem;    /* 56px - reduced from 64px */
    
    /* Large Spacing - moderate reduction */
    --space-20: 4rem;      /* 64px - reduced from 80px */
    --space-24: 5rem;      /* 80px - reduced from 96px */
    --space-32: 6.5rem;    /* 104px - reduced from 128px */
    --space-40: 8rem;      /* 128px - reduced from 160px */
    --space-48: 10rem;     /* 160px - reduced from 192px */

    /* Section Spacing */
    --section-padding-sm: var(--space-16);   /* 56px */
    --section-padding-md: var(--space-20);   /* 64px */
    --section-padding-lg: var(--space-24);   /* 80px */
    --section-padding-xl: var(--space-32);   /* 104px */

    /* Micro/Standard - stays same */
    --radius-none: 0;
    --radius-xs: 0.25rem;       /* 4px */
    --radius-sm: 0.5rem;        /* 8px */
    --radius-base: 0.75rem;     /* 12px */
    --radius-md: 1rem;          /* 16px */
    --radius-lg: 1.5rem;        /* 24px */
    --radius-xl: 1.75rem;       /* 28px - reduced from 32px */
    
    /* Feature Radius - slight reduction */
    --radius-2xl: 2.25rem;      /* 36px - reduced from 40px */
    --radius-3xl: 2.75rem;      /* 44px - reduced from 48px */
    --radius-4xl: 3.5rem;       /* 56px - reduced from 64px */
    
    /* Special */
    --radius-bubble: 3rem;      /* 48px - reduced from 56px */
    --radius-full: 9999px;

    /* Display Text */
    --text-display-xl: 6.5rem;      /* 104px - reduced from 120px */
    --text-display-lg: 3.5rem;      /* 56px - reduced from 64px */
    --text-display-md: 2.333rem;    /* 37.33px - reduced from 42.67px */
    --text-display-sm: 1.556rem;    /* 24.9px - reduced from 28.45px */
    
    /* Headings */
    --text-h1: 2.75rem;             /* 44px - reduced from 48px */
    --text-h2: 2.25rem;             /* 36px - reduced from 40px */
    --text-h3: 1.875rem;            /* 30px - reduced from 32px */
    --text-h4: 1.5rem;              /* 24px - stays same */
    --text-h5: 1.25rem;             /* 20px - stays same */
    --text-h6: 1.125rem;            /* 18px - stays same */
    
    /* Body Text - stays same */
    --text-body-xl: 1.375rem;       /* 22px */
    --text-body-lg: 1.25rem;        /* 20px */
    --text-body-base: 1.125rem;     /* 18px */
    --text-body-md: 1rem;           /* 16px */
    --text-body-sm: 0.875rem;       /* 14px */
    --text-body-xs: 0.75rem;        /* 12px */
    
    /* UI Text - stays same */
    --text-button-lg: 1.125rem;     /* 18px */
    --text-button-base: 1rem;       /* 16px */
    --text-button-sm: 0.875rem;     /* 14px */
    --text-input: 1rem;             /* 16px */
    --text-label: 0.875rem;         /* 14px */
    --text-helper: 0.75rem;         /* 12px */
    --text-nav: 1rem;               /* 16px */
    --text-badge: 0.75rem;          /* 12px */
    --text-overline: 0.75rem;       /* 12px */
  }
}

/* Tablet (768-1023px) */
@media (max-width: 1023px) {
  :root {
    /* Micro/Small Spacing - stays same */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 1.75rem;    /* 28px - slight reduction */
    
    /* Medium Spacing - moderate reduction */
    --space-10: 2rem;      /* 32px - reduced from 40px */
    --space-12: 2.5rem;    /* 40px - reduced from 48px */
    --space-16: 3rem;      /* 48px - reduced from 56px */
    
    /* Large Spacing - significant reduction */
    --space-20: 3.5rem;    /* 56px - reduced from 64px */
    --space-24: 4rem;      /* 64px - reduced from 80px */
    --space-32: 5rem;      /* 80px - reduced from 104px */
    --space-40: 6rem;      /* 96px - reduced from 128px */
    --space-48: 7.5rem;    /* 120px - reduced from 160px */

    /* Section Spacing */
    /* --section-padding-sm: var(--space-12);   40px */
    /* --section-padding-md: var(--space-16);   48px */
    /* --section-padding-lg: var(--space-20);   56px */
    /* --section-padding-xl: var(--space-24);   64px */

    /* Container Gutters */
    --container-gutter: var(--space-12);   /* 40px */

    /* Micro/Standard */
    --radius-none: 0;
    --radius-xs: 0.25rem;       /* 4px */
    --radius-sm: 0.5rem;        /* 8px */
    --radius-base: 0.625rem;    /* 10px - slight reduction */
    --radius-md: 0.875rem;      /* 14px - reduced from 16px */
    --radius-lg: 1.25rem;       /* 20px - reduced from 24px */
    --radius-xl: 1.5rem;        /* 24px - reduced from 28px */
    
    /* Feature Radius */
    --radius-2xl: 2rem;         /* 32px - reduced from 36px */
    --radius-3xl: 2.5rem;       /* 40px - reduced from 44px */
    --radius-4xl: 3rem;         /* 48px - reduced from 56px */
    
    /* Special */
    --radius-bubble: 2.75rem;   /* 44px - reduced from 48px */
    --radius-full: 9999px;

    /* Display Text */
    --text-display-xl: 5.5rem;      /* 88px - reduced from 104px */
    --text-display-lg: 3rem;        /* 48px - reduced from 56px */
    --text-display-md: 2rem;        /* 32px - reduced from 37.33px */
    --text-display-sm: 1.333rem;    /* 21.33px - reduced from 24.9px */
    
    /* Headings */
    --text-h1: 2.5rem;              /* 40px - reduced from 44px */
    --text-h2: 2rem;                /* 32px - reduced from 36px */
    --text-h3: 1.75rem;             /* 28px - reduced from 30px */
    --text-h4: 1.375rem;            /* 22px - reduced from 24px */
    --text-h5: 1.25rem;             /* 20px - stays same */
    --text-h6: 1.125rem;            /* 18px - stays same */
    
    /* Body Text */
    --text-body-xl: 1.25rem;        /* 20px - slightly reduced */
    --text-body-lg: 1.125rem;       /* 18px - slightly reduced */
    --text-body-base: 1.125rem;     /* 18px - stays same */
    --text-body-md: 1rem;           /* 16px - stays same */
    --text-body-sm: 0.875rem;       /* 14px - stays same */
    --text-body-xs: 0.75rem;        /* 12px - stays same */
    
    /* UI Text - stays same */
    --text-button-lg: 1.125rem;     /* 18px */
    --text-button-base: 1rem;       /* 16px */
    --text-button-sm: 0.875rem;     /* 14px */
    --text-input: 1rem;             /* 16px */
    --text-label: 0.875rem;         /* 14px */
    --text-helper: 0.75rem;         /* 12px */
    --text-nav: 1rem;               /* 16px */
    --text-badge: 0.75rem;          /* 12px */
    --text-overline: 0.75rem;       /* 12px */
  }
}

/* Mobile Landscape (480-767px) */
@media (max-width: 767px) {
  :root {
    /* Micro/Small Spacing - minimal change */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.125rem;   /* 18px - slight reduction */
    --space-6: 1.25rem;    /* 20px - reduced from 24px */
    --space-8: 1.5rem;     /* 24px - reduced from 28px */
    
    /* Medium Spacing */
    --space-10: 1.75rem;   /* 28px - reduced from 32px */
    --space-12: 2rem;      /* 32px - reduced from 40px */
    --space-16: 2.5rem;    /* 40px - reduced from 48px */
    
    /* Large Spacing */
    --space-20: 3rem;      /* 48px - reduced from 56px */
    --space-24: 3.5rem;    /* 56px - reduced from 64px */
    --space-32: 4rem;      /* 64px - reduced from 80px */
    --space-40: 5rem;      /* 80px - reduced from 96px */
    --space-48: 6rem;      /* 96px - reduced from 120px */

    /* Section Spacing */
    /* --section-padding-sm: var(--space-10);   28px */
    /* --section-padding-md: var(--space-12);   32px */
    /* --section-padding-lg: var(--space-16);   40px */
    /* --section-padding-xl: var(--space-20);   48px */
    
    /* Container Gutters */
    --container-gutter: var(--space-8);   /* 24px */

    /* Micro/Standard */
    --radius-none: 0;
    --radius-xs: 0.25rem;       /* 4px */
    --radius-sm: 0.375rem;      /* 6px - slight reduction */
    --radius-base: 0.5rem;      /* 8px - reduced from 10px */
    --radius-md: 0.75rem;       /* 12px - reduced from 14px */
    --radius-lg: 1rem;          /* 16px - reduced from 20px */
    --radius-xl: 1.25rem;       /* 20px - reduced from 24px */
    
    /* Feature Radius */
    --radius-2xl: 1.5rem;       /* 24px - reduced from 32px */
    --radius-3xl: 2rem;         /* 32px - reduced from 40px */
    --radius-4xl: 2.5rem;       /* 40px - reduced from 48px */
    
    /* Special */
    --radius-bubble: 2.25rem;   /* 36px - reduced from 44px */
    --radius-full: 9999px;


    /* Display Text */
    --text-display-xl: 4rem;        /* 64px - reduced from 88px */
    --text-display-lg: 2.5rem;      /* 40px - reduced from 48px */
    --text-display-md: 1.75rem;     /* 28px - reduced from 32px */
    --text-display-sm: 1.25rem;     /* 20px - reduced from 21.33px */
    
    /* Headings */
    --text-h1: 2.25rem;             /* 36px - reduced from 40px */
    --text-h2: 1.875rem;            /* 30px - reduced from 32px */
    --text-h3: 1.5rem;              /* 24px - reduced from 28px */
    --text-h4: 1.25rem;             /* 20px - reduced from 22px */
    --text-h5: 1.125rem;            /* 18px - slightly reduced */
    --text-h6: 1rem;                /* 16px - reduced from 18px */
    
    /* Body Text */
    --text-body-xl: 1.125rem;       /* 18px - reduced from 20px */
    --text-body-lg: 1.0625rem;      /* 17px - reduced from 18px */
    --text-body-base: 1rem;         /* 16px - reduced from 18px */
    --text-body-md: 1rem;           /* 16px - stays same */
    --text-body-sm: 0.875rem;       /* 14px - stays same */
    --text-body-xs: 0.75rem;        /* 12px - stays same */
    
    /* UI Text */
    --text-button-lg: 1rem;         /* 16px - reduced from 18px */
    --text-button-base: 1rem;       /* 16px - stays same */
    --text-button-sm: 0.875rem;     /* 14px - stays same */
    --text-input: 1rem;             /* 16px - critical for iOS zoom */
    --text-label: 0.875rem;         /* 14px */
    --text-helper: 0.75rem;         /* 12px */
    --text-nav: 1rem;               /* 16px */
    --text-badge: 0.75rem;          /* 12px */
    --text-overline: 0.75rem;       /* 12px */
  }
}

/* Mobile Portrait (320-479px) */
@media (max-width: 479px) {
  :root {
    /* Micro/Small Spacing */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1rem;       /* 16px - reduced from 18px */
    --space-6: 1rem;       /* 16px - reduced from 20px */
    --space-8: 1.25rem;    /* 20px - reduced from 24px */
    
    /* Medium Spacing */
    --space-10: 1.5rem;    /* 24px - reduced from 28px */
    --space-12: 1.75rem;   /* 28px - reduced from 32px */
    --space-16: 2rem;      /* 32px - reduced from 40px */
    
    /* Large Spacing */
    --space-20: 2.5rem;    /* 40px - reduced from 48px */
    --space-24: 3rem;      /* 48px - reduced from 56px */
    --space-32: 3.5rem;    /* 56px - reduced from 64px */
    --space-40: 4rem;      /* 64px - reduced from 80px */
    --space-48: 5rem;      /* 80px - reduced from 96px */

    /* Section Spacing */
    /* --section-padding-sm: var(--space-8);    20px */
    /* --section-padding-md: var(--space-10);   24px */
    /* --section-padding-lg: var(--space-12);   28px */
    /* --section-padding-xl: var(--space-16);   32px */
    
    /* Container Gutters */
    --container-gutter: var(--space-6);     /* 16px */

    /* Micro/Standard */
    --radius-none: 0;
    --radius-xs: 0.25rem;       /* 4px */
    --radius-sm: 0.375rem;      /* 6px */
    --radius-base: 0.5rem;      /* 8px */
    --radius-md: 0.625rem;      /* 10px - reduced from 12px */
    --radius-lg: 0.875rem;      /* 14px - reduced from 16px */
    --radius-xl: 1rem;          /* 16px - reduced from 20px */
    
    /* Feature Radius */
    --radius-2xl: 1.25rem;      /* 20px - reduced from 24px */
    --radius-3xl: 1.5rem;       /* 24px - reduced from 32px */
    --radius-4xl: 2rem;         /* 32px - reduced from 40px */
    
    /* Special */
    --radius-bubble: 1.75rem;   /* 28px - reduced from 36px */
    --radius-full: 9999px;

    /* Display Text */
    --text-display-xl: 3rem;        /* 48px - reduced from 64px */
    --text-display-lg: 2rem;        /* 32px - reduced from 40px */
    --text-display-md: 1.5rem;      /* 24px - reduced from 28px */
    --text-display-sm: 1.125rem;    /* 18px - reduced from 20px */
    
    /* Headings */
    --text-h1: 2rem;                /* 32px - reduced from 36px */
    --text-h2: 1.75rem;             /* 28px - reduced from 30px */
    --text-h3: 1.375rem;            /* 22px - reduced from 24px */
    --text-h4: 1.125rem;            /* 18px - reduced from 20px */
    --text-h5: 1rem;                /* 16px - reduced from 18px */
    --text-h6: 1rem;                /* 16px - stays same */
    
    /* Body Text */
    /* --text-body-xl: 1.0625rem;      17px - reduced from 18px */
    --text-body-lg: 1rem;           /* 16px - reduced from 17px */
    --text-body-base: 1rem;         /* 16px - stays same */
    --text-body-md: 1rem;           /* 16px - stays same */
    --text-body-sm: 0.875rem;       /* 14px - stays same */
    --text-body-xs: 0.75rem;        /* 12px - stays same */
    
    /* UI Text */
    --text-button-lg: 1rem;         /* 16px */
    --text-button-base: 1rem;       /* 16px */
    --text-button-sm: 0.875rem;     /* 14px */
    --text-input: 1rem;             /* 16px - never below on mobile */
    --text-label: 0.875rem;         /* 14px */
    --text-helper: 0.75rem;         /* 12px */
    --text-nav: 1rem;               /* 16px */
    --text-badge: 0.75rem;          /* 12px */
    --text-overline: 0.75rem;       /* 12px */
  }
}