/* 
 * Brisbane 8 Ball Website - Main CSS
 * Modern, modular CSS architecture
 * 
 * Import Order:
 * 1. Base (variables, reset, typography)
 * 2. Layout (grid, containers, header, footer)
 * 3. Components (reusable UI components)
 * 4. Pages (page-specific styles)
 * 5. Utilities (helper classes)
 * 6. Themes (dark mode overrides)
 */

/* ==================== BASE ==================== */
/* Design tokens and CSS variables */
@import url('base/variables.css');

/* CSS reset and normalization */
@import url('base/reset.css');

/* Typography system */
@import url('base/typography.css');

/* ==================== LAYOUT ==================== */
/* Grid and layout system */
@import url('layout/grid.css');

/* Header and navigation */
@import url('layout/header.css');
/* Previous attempts commented out */
/* @import url('layout/navbar-fix.css'); */
/* @import url('layout/navbar-stabilize.css'); */
/* @import url('layout/navbar-final-fix.css'); */
@import url('layout/navbar-proper-fix.css');
@import url('layout/navbar-alignment-fix.css');

/* Footer styles */
@import url('layout/footer.css');

/* ==================== COMPONENTS ==================== */
/* Button components */
@import url('components/buttons.css');

/* Card components */
@import url('components/cards.css');

/* Form components */
@import url('components/forms.css');

/* Table components */
@import url('components/tables.css');

/* Modal components */
@import url('components/modals.css');

/* Navigation components */
@import url('components/navigation.css');

/* ==================== PAGES ==================== */
/* Home page specific */
@import url('pages/home.css');

/* Players page specific */
@import url('pages/players.css');

/* Rules pages specific */
@import url('pages/rules.css');
@import url('pages/rules-sidebar.css');

/* Events page specific */
@import url('pages/events.css');

/* Tools pages specific */
@import url('pages/tools.css');

/* Statistics page specific */
@import url('pages/statistics.css');

/* ==================== UTILITIES ==================== */
/* Spacing utilities */
@import url('utilities/spacing.css');

/* Content typography for long-form text */
@import url('utilities/content.css');

/* Border utilities */
/* @import url('utilities/borders.css'); */

/* Shadow utilities */
/* @import url('utilities/shadows.css'); */

/* Animation utilities */
/* @import url('utilities/animations.css'); */

/* ==================== THEMES ==================== */
/* Dark mode overrides - loaded last for specificity */
/* @import url('themes/dark-mode.css'); */

/* ==================== TEMPORARY COMPATIBILITY ==================== */
/* 
 * During migration, we'll keep essential global styles here
 * These will be gradually moved to appropriate modules
 */

/* Global body styles */
body {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-background);
  min-height: 100vh;
  line-height: var(--leading-normal);
}

/* Main content area */
.main-content {
  padding-top: 100px; /* Account for fixed header */
  min-height: calc(100vh - 70px);
}

/* Mobile: No header, no top padding needed */
@media (max-width: 768px) {
  .main-content {
    padding-top: 0 !important; /* No top padding in mobile */
    min-height: calc(100vh - 60px); /* Account for bottom nav */
  }
  
  /* Also remove padding from page containers */
  .page-container {
    padding-top: 1rem !important;
  }
  
  /* Remove any margin from first element */
  .main-content > *:first-child {
    margin-top: 0 !important;
  }
}

/* Page container */
.page-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-6);
}

/* Content wrapper */
.content-wrapper {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Section spacing */
section {
  margin-bottom: var(--space-8);
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none;
  }
}

/* 
 * MIGRATION NOTES:
 * - Old site.css: 8,474 lines, 188KB
 * - New modular CSS: ~2,000 lines, ~40KB (estimated)
 * - Removed 833 !important declarations
 * - Organized into logical modules
 * - Uses CSS custom properties for theming
 * - Follows BEM naming convention where applicable
 * - Includes utility classes to reduce custom CSS needs
 */