/* ========================================
   APPLE HIG-INSPIRED SPACING SYSTEM
   Based on 8pt grid system
   ======================================== */

/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 8pt Grid System Variables */
:root {
    --space-0: 0;
    --space-1: 4px;     /* 0.5 × base */
    --space-2: 8px;     /* 1 × base */
    --space-3: 12px;    /* 1.5 × base */
    --space-4: 16px;    /* 2 × base */
    --space-5: 20px;    /* 2.5 × base */
    --space-6: 24px;    /* 3 × base */
    --space-8: 32px;    /* 4 × base */
    --space-10: 40px;   /* 5 × base */
    --space-12: 48px;   /* 6 × base */
    --space-16: 64px;   /* 8 × base */
    --space-20: 80px;   /* 10 × base */
    --space-24: 96px;   /* 12 × base */
    --space-32: 128px;  /* 16 × base */
    --space-40: 160px;  /* 20 × base */
    
    /* Semantic Spacing */
    --space-xs: var(--space-2);
    --space-sm: var(--space-4);
    --space-md: var(--space-6);
    --space-lg: var(--space-8);
    --space-xl: var(--space-12);
    --space-2xl: var(--space-16);
    --space-3xl: var(--space-24);
    --space-4xl: var(--space-32);
}

/* Section Padding - Following Apple's generous whitespace */
.section-padding {
    padding: var(--space-32) 4%;
}

.section-padding-lg {
    padding: var(--space-40) 4% var(--space-32);
}

.section-padding-sm {
    padding: var(--space-20) 4%;
}

.section-padding-xs {
    padding: var(--space-24) 4%;
}

/* Container Max Widths */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-md {
    max-width: 1024px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-sm {
    max-width: 768px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-xs {
    max-width: 640px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* Margin Utilities - 8pt Grid System */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mx-auto { 
    margin-left: auto; 
    margin-right: auto; 
}

/* Padding Utilities - 8pt Grid System */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Gap Utilities - 8pt Grid System */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

/* Specific Component Spacing */

/* Navbar Spacing - Apple-style compact yet airy */
.navbar {
    padding: var(--space-4) 4%;
}

.nav-links {
    gap: var(--space-8);
}

/* Hero Spacing */
.hero {
    padding: var(--space-40) 4% var(--space-32);
}

.hero-content {
    gap: var(--space-24);
}

/* Card Spacing */
.card {
    padding: var(--space-8);
}

.card-lg {
    padding: var(--space-10);
}

.card-sm {
    padding: var(--space-6);
}

/* Grid Spacing */
.grid-gap {
    gap: var(--space-8);
}

.grid-gap-lg {
    gap: var(--space-10);
}

.grid-gap-sm {
    gap: var(--space-6);
}

/* Footer Spacing */
.footer {
    padding: var(--space-24) 4% var(--space-8);
}

.footer-content {
    gap: var(--space-16);
    margin-bottom: var(--space-12);
}

.footer-bottom {
    padding-top: var(--space-8);
}

/* List Item Spacing */
.list-spacing li {
    margin-bottom: var(--space-3);
}

.list-spacing-sm li {
    margin-bottom: var(--space-2);
}

/* Button Spacing */
.btn {
    padding: var(--space-3) var(--space-6);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
}

/* Responsive Spacing */
@media (max-width: 1024px) {
    :root {
        --space-40: 120px;
        --space-32: 96px;
        --space-24: 72px;
    }
    
    .section-padding {
        padding: var(--space-24) 4%;
    }
    
    .hero-content {
        gap: var(--space-12);
    }
    
    .footer-content {
        gap: var(--space-12);
    }
}

@media (max-width: 768px) {
    :root {
        --space-40: 96px;
        --space-32: 80px;
        --space-24: 64px;
    }
    
    .section-padding {
        padding: var(--space-20) 5%;
    }
    
    .section-padding-lg {
        padding: var(--space-32) 5% var(--space-24);
    }
    
    .hero {
        padding: var(--space-32) 5% var(--space-24);
    }
    
    .navbar {
        padding: var(--space-4) 5%;
    }
    
    .footer {
        padding: var(--space-20) 5% var(--space-8);
    }
    
    .footer-content {
        gap: var(--space-8);
    }
    
    .card {
        padding: var(--space-6);
    }
    
    .container,
    .container-md,
    .container-sm,
    .container-xs {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}