/* RailScanPro Framework Standards - Based on Comprehensive Layout Analysis */
/* This file implements the standardized Tailwind CSS patterns for consistent layouts */

/* =================================================================
   1. SPACING AND PADDING STANDARDS
   ================================================================= */

/* Section Spacing */
.section-standard { @apply py-12 md:py-16 lg:py-20; }
.section-compact { @apply py-8 md:py-12; }
.section-spacious { @apply py-16 md:py-24; }

/* Component Spacing */
.component-spacing { @apply space-y-8; }
.element-spacing { @apply space-y-4; }
.tight-spacing { @apply space-y-2; }

/* Container Padding */
.container-padding { @apply px-4 sm:px-6 lg:px-8; }

/* =================================================================
   2. TYPOGRAPHY HIERARCHY
   ================================================================= */

/* Standardized Headings */
.h1 { @apply mb-6 text-4xl font-bold md:text-5xl lg:text-6xl; }
.h2 { @apply mt-8 mb-5 text-3xl font-semibold md:text-4xl; }
.h3 { @apply mt-6 mb-4 text-2xl font-medium md:text-3xl; }
.h4 { @apply mt-5 mb-3 text-xl font-medium md:text-2xl; }
.h5 { @apply mt-4 mb-2 text-lg font-medium md:text-xl; }

/* Body Text */
.text-body { @apply text-base leading-relaxed md:text-lg; }
.text-caption { @apply text-sm text-gray-600 dark:text-gray-400; }
.text-small { @apply text-xs text-gray-500 dark:text-gray-500; }

/* Responsive Text */
.text-responsive { @apply text-base md:text-lg lg:text-xl; }
.heading-responsive { @apply text-2xl md:text-3xl lg:text-4xl; }

/* =================================================================
   3. CONTAINER WIDTHS
   ================================================================= */

.container-narrow { @apply mx-auto max-w-3xl; }
.container-standard { @apply mx-auto max-w-5xl; }
.container-wide { @apply mx-auto max-w-7xl; }
.container-full { @apply max-w-full; }

/* Reading Optimized */
.content-prose { @apply mx-auto max-w-prose; }
.content-readable { @apply mx-auto max-w-4xl leading-relaxed; }

/* =================================================================
   4. LAYOUT ALIGNMENT
   ================================================================= */

/* Grid Alignment */
.grid-center { @apply place-items-center; }
.grid-stretch { @apply items-stretch; }

/* Flexbox Patterns */
.flex-center { @apply flex items-center justify-center; }
.flex-between { @apply flex items-center justify-between; }
.flex-start { @apply flex items-start; }
.flex-stack { @apply flex flex-col gap-6 md:flex-row; }
.flex-wrap-responsive { @apply flex flex-wrap gap-4; }

/* =================================================================
   5. RESPONSIVE GRIDS
   ================================================================= */

.responsive-grid { @apply grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3; }
.responsive-flex { @apply flex flex-col gap-4 md:flex-row md:gap-8; }
.grid-auto { @apply grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3; }
.grid-even { @apply grid grid-cols-2 gap-4 md:grid-cols-4; }
.grid-sidebar { @apply grid grid-cols-1 gap-8 lg:grid-cols-[300px_1fr]; }

/* =================================================================
   6. BUTTON STANDARDS
   ================================================================= */

/* Button Sizes */
.btn-sm { @apply px-3 py-1.5 text-sm; }
.btn-base { @apply px-4 py-2 text-base; }
.btn-lg { @apply px-6 py-3 text-lg; }

/* Mobile Friendly */
.btn-mobile { @apply min-h-[44px] px-6 py-3 md:px-4 md:py-2; }
.btn-mobile-friendly { @apply min-h-[44px] min-w-[44px] px-6 py-3; }

/* Button Groups */
.btn-group { @apply flex flex-wrap gap-3; }
.btn-group-vertical { @apply flex flex-col gap-2; }

/* =================================================================
   7. CARD COMPONENTS
   ================================================================= */

/* Standard Card */
.card-standard { @apply rounded-lg bg-white p-6 shadow-md dark:bg-slate-900; }
.card-header { @apply mb-4 border-b border-gray-200 pb-4 dark:border-gray-700; }
.card-body { @apply space-y-4; }
.card-footer { @apply mt-6 border-t border-gray-200 pt-4 dark:border-gray-700; }

/* Card Layouts */
.card-grid { @apply grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3; }
.card-list { @apply space-y-4; }

/* =================================================================
   8. FORM STANDARDS
   ================================================================= */

/* Form Structure */
.form-container { @apply space-y-6; }
.form-group { @apply space-y-2; }
.form-row { @apply flex flex-col gap-4 md:flex-row; }
.form-actions { @apply mt-6 flex flex-col gap-3 sm:flex-row; }

/* Form Elements */
.form-input-standard { 
  @apply w-full rounded-md border border-gray-300 px-4 py-2
         focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-slate-800
         dark:text-white;
}
.form-label-standard { 
  @apply mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300;
}

/* =================================================================
   9. NAVIGATION PATTERNS
   ================================================================= */

/* Desktop Nav */
.nav-desktop { @apply hidden items-center space-x-6 md:flex; }
.nav-container { @apply flex h-16 items-center justify-between px-4 md:px-8; }

/* Mobile Nav */
.nav-mobile { @apply md:hidden; }
.mobile-menu { 
  @apply absolute top-full right-0 left-0 bg-white shadow-lg dark:bg-slate-900;
}
.mobile-menu-item { 
  @apply block px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-800;
}
.link-mobile { @apply block py-2 md:inline md:py-0; }

/* =================================================================
   10. HEADER & FOOTER
   ================================================================= */

/* Header */
.header-main { 
  @apply sticky top-0 z-50 border-b border-gray-200
         bg-white dark:border-gray-800 dark:bg-slate-950;
}
.header-content { @apply container mx-auto h-16 px-4 md:h-20 md:px-8; }

/* Footer */
.footer-main { @apply mt-auto bg-gray-100 dark:bg-slate-900; }
.footer-content { @apply container mx-auto px-4 py-12 md:px-8; }
.footer-columns { @apply grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4; }
.footer-bottom { 
  @apply mt-8 border-t border-gray-300 pt-8 text-center
         md:text-left dark:border-gray-700;
}

/* =================================================================
   11. VISUAL HIERARCHY
   ================================================================= */

/* Sections */
.hero-section { @apply py-20 text-center md:py-32 md:text-left; }
.primary-content { @apply mb-8 text-lg font-medium; }
.secondary-content { @apply text-base text-gray-700 dark:text-gray-300; }

/* Emphasis */
.highlight-box { 
  @apply border-l-4 border-blue-500 bg-blue-50 p-4 dark:bg-blue-900/20;
}
.feature-primary { @apply mb-4 text-xl font-bold; }
.feature-secondary { @apply text-base text-gray-600 dark:text-gray-400; }

/* Whitespace */
.section-divider { @apply my-12 md:my-16; }
.content-separator { @apply my-6 border-t border-gray-200 dark:border-gray-700; }

/* =================================================================
   12. UTILITY CLASSES
   ================================================================= */

/* Touch Targets */
.touch-target { @apply min-h-[44px] min-w-[44px]; }

/* Text Alignment */
.hero-text { @apply text-center md:text-left; }
.section-title { @apply mb-8 text-center; }

/* Dark Mode Support */
.dark-support { @apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100; }

/* Focus States */
.focus-visible-ring { 
  @apply focus-visible:ring-2 focus-visible:ring-blue-500
         focus-visible:ring-offset-2 focus-visible:outline-none;
}

/* Loading States */
.skeleton-loader { 
  @apply animate-pulse rounded bg-gray-200 dark:bg-gray-700;
}

/* =================================================================
   13. RESPONSIVE HELPERS
   ================================================================= */

/* Hide/Show */
.desktop-only { @apply hidden md:block; }
.mobile-only { @apply md:hidden; }
.tablet-up { @apply hidden sm:block; }

/* Responsive Spacing */
.responsive-padding { @apply p-4 md:p-6 lg:p-8; }
.responsive-margin { @apply m-4 md:m-6 lg:m-8; }

/* Responsive Text Align */
.text-mobile-center { @apply text-center md:text-left; }

/* =================================================================
   14. ANIMATION CLASSES
   ================================================================= */

.fade-in { @apply transition-opacity duration-300 ease-in-out; }
.slide-down { @apply transition-transform duration-300 ease-out; }
.scale-hover { @apply transition-transform hover:scale-105; }

/* =================================================================
   15. Z-INDEX MANAGEMENT
   ================================================================= */

.z-base { @apply z-0; }
.z-dropdown { @apply z-10; }
.z-sticky { @apply z-20; }
.z-modal { @apply z-30; }
.z-notification { @apply z-40; }
.z-header { @apply z-50; }