/* Main Styles */
@import 'typography.css';
@import 'layout.css';
@import 'components.css';
@import 'responsive.css';

:root {
  /* Color variables */
  --primary: #003366;
  --primary-light: #004d99;
  --primary-dark: #002244;
  
  --secondary: #557a95;
  --accent: #b54142;
  
  --success: #2e7d32;
  --warning: #f9a825;
  --error: #c62828;
  
  --neutral-100: #f5f5f5;
  --neutral-200: #e0e0e0;
  --neutral-300: #bdbdbd;
  --neutral-400: #9e9e9e;
  --neutral-500: #757575;
  --neutral-600: #616161;
  --neutral-700: #424242;
  --neutral-800: #212121;
  --neutral-900: #121212;
  
  --white: #ffffff;
  --black: #000000;

  /* Spacing variables */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.section {
  padding: var(--space-6) 0;
}

.section-title {
  text-align: center;
  margin-bottom: var(--space-4);
  color: var(--primary);
}

.section-intro {
  max-width: 800px;
  margin: 0 auto var(--space-4);
  text-align: center;
  font-size: 1.2rem;
  color: var(--neutral-700);
}

.alternate-bg {
  background-color: var(--neutral-100);
}