/* Story Wish Spacing System */
/* Consistent spacing scale based on 8px grid system */

/* ==========================================================================
   SPACING SCALE
   ========================================================================== */

/* Based on Tailwind's spacing scale (4px = 1 unit) */
/* 0 = 0px, 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 8 = 32px, 10 = 40px, 12 = 48px, 16 = 64px, 20 = 80px, 24 = 96px, 32 = 128px */

/* ==========================================================================
   SECTION SPACING
   ========================================================================== */

/* Page-level spacing */
.section-spacing {
    @apply py-20; /* 80px vertical padding (increased from 64px) */
}

.section-spacing-lg {
    @apply py-32; /* 128px vertical padding (increased from 96px) */
}

.section-spacing-sm {
    @apply py-16; /* 64px vertical padding (increased from 48px) */
}

.section-spacing-xs {
    @apply py-10; /* 40px vertical padding (increased from 32px) */
}

/* Container spacing */
.section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* ==========================================================================
   COMPONENT SPACING
   ========================================================================== */

/* Card spacing */
.card-spacing {
    @apply p-8; /* 32px padding (increased from 24px) */
}

.card-spacing-lg {
    @apply p-10; /* 40px padding (increased from 32px) */
}

.card-spacing-sm {
    @apply p-5; /* 20px padding (increased from 16px) */
}

/* Form spacing */
.form-spacing {
    @apply space-y-4; /* 16px between form elements */
}

.form-spacing-lg {
    @apply space-y-6; /* 24px between form elements */
}

.form-spacing-sm {
    @apply space-y-3; /* 12px between form elements */
}

/* Grid spacing */
.grid-spacing {
    @apply gap-8; /* 32px gap (increased from 24px) */
}

.grid-spacing-lg {
    @apply gap-10; /* 40px gap (increased from 32px) */
}

.grid-spacing-sm {
    @apply gap-6; /* 24px gap (increased from 16px) */
}

/* ==========================================================================
   ELEMENT SPACING
   ========================================================================== */

/* Heading margins */
.heading-margin {
    @apply mb-6; /* 24px bottom margin */
}

.heading-margin-lg {
    @apply mb-8; /* 32px bottom margin */
}

.heading-margin-sm {
    @apply mb-4; /* 16px bottom margin */
}

/* Paragraph margins */
.paragraph-margin {
    @apply mb-4; /* 16px bottom margin */
}

.paragraph-margin-lg {
    @apply mb-6; /* 24px bottom margin */
}

.paragraph-margin-sm {
    @apply mb-3; /* 12px bottom margin */
}

/* List spacing */
.list-spacing {
    @apply space-y-2; /* 8px between list items */
}

.list-spacing-lg {
    @apply space-y-3; /* 12px between list items */
}

.list-spacing-sm {
    @apply space-y-1; /* 4px between list items */
}

/* ==========================================================================
   BUTTON SPACING
   ========================================================================== */

/* Button padding */
.btn-padding {
    @apply px-6 py-3; /* 24px horizontal, 12px vertical */
}

.btn-padding-lg {
    @apply px-8 py-4; /* 32px horizontal, 16px vertical */
}

.btn-padding-sm {
    @apply px-4 py-2; /* 16px horizontal, 8px vertical */
}

.btn-padding-xl {
    @apply px-12 py-6; /* 48px horizontal, 24px vertical */
}

/* Button spacing in groups */
.btn-group-spacing {
    @apply space-x-3; /* 12px between buttons */
}

.btn-group-spacing-lg {
    @apply space-x-4; /* 16px between buttons */
}

.btn-group-spacing-sm {
    @apply space-x-2; /* 8px between buttons */
}

/* ==========================================================================
   NAVIGATION SPACING
   ========================================================================== */

/* Navigation padding */
.nav-padding {
    @apply px-4 py-3; /* 16px horizontal, 12px vertical */
}

.nav-padding-lg {
    @apply px-6 py-4; /* 24px horizontal, 16px vertical */
}

.nav-padding-sm {
    @apply px-3 py-2; /* 12px horizontal, 8px vertical */
}

/* Navigation item spacing */
.nav-item-spacing {
    @apply space-x-4; /* 16px between nav items */
}

.nav-item-spacing-lg {
    @apply space-x-6; /* 24px between nav items */
}

.nav-item-spacing-sm {
    @apply space-x-2; /* 8px between nav items */
}

/* ==========================================================================
   MODAL AND OVERLAY SPACING
   ========================================================================== */

/* Modal padding */
.modal-padding {
    @apply p-6; /* 24px padding */
}

.modal-padding-lg {
    @apply p-8; /* 32px padding */
}

.modal-padding-sm {
    @apply p-4; /* 16px padding */
}

/* Modal content spacing */
.modal-content-spacing {
    @apply space-y-4; /* 16px between modal elements */
}

.modal-content-spacing-lg {
    @apply space-y-6; /* 24px between modal elements */
}

/* ==========================================================================
   RESPONSIVE SPACING
   ========================================================================== */

/* Mobile-first responsive adjustments */
@media (max-width: 640px) {
    .section-spacing {
        @apply py-14; /* 56px on mobile (increased from 48px) */
    }

    .section-spacing-lg {
        @apply py-20; /* 80px on mobile (increased from 64px) */
    }

    .card-spacing {
        @apply p-6; /* 24px on mobile (increased from 16px) */
    }

    .card-spacing-lg {
        @apply p-8; /* 32px on mobile (increased from 24px) */
    }

    .btn-padding {
        @apply px-4 py-3; /* Smaller buttons on mobile */
    }

    .btn-padding-lg {
        @apply px-6 py-4; /* Smaller large buttons on mobile */
    }

    .heading-margin {
        @apply mb-4; /* Smaller heading margins on mobile */
    }

    .heading-margin-lg {
        @apply mb-6; /* Smaller large heading margins on mobile */
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .section-spacing {
        @apply py-16; /* 64px on tablet */
    }

    .section-spacing-lg {
        @apply py-20; /* 80px on tablet */
    }
}

/* ==========================================================================
   UTILITY SPACING CLASSES
   ========================================================================== */

/* Margin utilities */
.m-0 { @apply m-0; }
.m-1 { @apply m-1; }
.m-2 { @apply m-2; }
.m-3 { @apply m-3; }
.m-4 { @apply m-4; }
.m-6 { @apply m-6; }
.m-8 { @apply m-8; }
.m-12 { @apply m-12; }
.m-16 { @apply m-16; }
.m-20 { @apply m-20; }
.m-24 { @apply m-24; }

/* Padding utilities */
.p-0 { @apply p-0; }
.p-1 { @apply p-1; }
.p-2 { @apply p-2; }
.p-3 { @apply p-3; }
.p-4 { @apply p-4; }
.p-6 { @apply p-6; }
.p-8 { @apply p-8; }
.p-12 { @apply p-12; }
.p-16 { @apply p-16; }
.p-20 { @apply p-20; }
.p-24 { @apply p-24; }

/* ==========================================================================
   COMPONENT-SPECIFIC SPACING
   ========================================================================== */

/* Story card spacing */
.story-card-spacing {
    @apply p-4 mb-6; /* 16px padding, 24px bottom margin */
}

.story-card-spacing-lg {
    @apply p-6 mb-8; /* 24px padding, 32px bottom margin */
}

/* Pricing card spacing */
.pricing-card-spacing {
    @apply p-8; /* 32px padding */
}

.pricing-card-spacing-sm {
    @apply p-6; /* 24px padding */
}

/* Feature card spacing */
.feature-card-spacing {
    @apply p-6; /* 24px padding */
}

.feature-card-spacing-lg {
    @apply p-8; /* 32px padding */
}

/* Form field spacing */
.form-field-spacing {
    @apply mb-4; /* 16px bottom margin */
}

.form-field-spacing-lg {
    @apply mb-6; /* 24px bottom margin */
}

/* ==========================================================================
   LEGACY SUPPORT
   ========================================================================== */

/* Maintain backward compatibility with existing spacing classes */
.landing-section {
    @apply section-spacing;
}

.landing-section-hero {
    @apply section-spacing-lg;
}

.landing-card-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

/* ==========================================================================
   PRINT SPACING
   ========================================================================== */

@media print {
    .section-spacing,
    .section-spacing-lg,
    .section-spacing-sm {
        @apply py-8; /* Consistent spacing in print */
    }

    .card-spacing,
    .card-spacing-lg {
        @apply p-4; /* Consistent card padding in print */
    }
}