/**
 * WhenBRRR Mobile-First Breakpoints System
 * Standardized across entire application
 * Based on HubSpot's responsive design patterns
 */

:root {
    /* Breakpoint Values */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;
    
    /* Container Max Widths */
    --container-mobile: 100%;
    --container-tablet: 720px;
    --container-desktop: 960px;
    --container-wide: 1200px;
    
    /* Spacing Scale (4px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Typography Scale */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    
    /* Touch Targets (iOS/Android) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 9999;
    --z-sidebar: 10000;
    --z-modal: 10001;
    --z-toast: 10002;
}

/* Mobile First Base Styles */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Tablet and up (768px+) */
@media (min-width: 768px) {
    .container {
        max-width: var(--container-tablet);
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
    
    :root {
        --space-md: 20px;
        --space-lg: 32px;
    }
}

/* Desktop and up (1024px+) */
@media (min-width: 1024px) {
    .container {
        max-width: var(--container-desktop);
    }
    
    :root {
        --space-lg: 40px;
        --space-xl: 48px;
    }
}

/* Wide screens (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: var(--container-wide);
    }
}

/* Utility Classes for Responsive Visibility */
.hide-mobile {
    display: none;
}

.show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
    
    .show-mobile {
        display: none;
    }
    
    .hide-tablet {
        display: none;
    }
    
    .show-tablet {
        display: block;
    }
}

@media (min-width: 1024px) {
    .hide-desktop {
        display: none;
    }
    
    .show-desktop {
        display: block;
    }
}

/* Responsive Grid System */
.grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .grid-sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .grid-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid {
        gap: var(--space-lg);
    }
}

/* Responsive Typography */
.text-responsive {
    font-size: var(--text-base);
}

@media (min-width: 768px) {
    .text-responsive {
        font-size: var(--text-lg);
    }
}

@media (min-width: 1024px) {
    .text-responsive {
        font-size: var(--text-xl);
    }
}

/* Responsive Spacing */
.spacing-responsive {
    padding: var(--space-md);
}

@media (min-width: 768px) {
    .spacing-responsive {
        padding: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .spacing-responsive {
        padding: var(--space-xl);
    }
}