/* ========== CSS VARIABLES FROM THEME ========== */
:root {
  --color-primary: #007BBD;
  --color-secondary: #79C8E0;
  --color-accent: #F8B400;
  --color-background: #F5F9FC;
  --color-surface: #FFFFFF;
  --color-text-primary: #0D1B2A;
  --color-text-secondary: #4B5D73;
  --color-border: #DCE6F2;
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-warning: #F59E0B;
  --gradient-primary: linear-gradient(135deg, #007BBD, #79C8E0);
  
  --font-family: 'Poppins', 'Inter', sans-serif;
  --h1-size: 2.5rem;
  --h1-weight: 700;
  --h2-size: 2rem;
  --h2-weight: 700;
  --h3-size: 1.5rem;
  --h3-weight: 600;
  --body-size: 1rem;
  --body-weight: 400;
  --small-size: 0.875rem;
  --small-weight: 400;
  
  --radius-small: 6px;
  --radius-medium: 12px;
  --radius-large: 20px;
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 8px 30px rgba(0, 123, 189, 0.15);
}

/* ========== COMMON STYLES ========== */
/* These styles are shared across all sections */
/* Individual section styles are in their respective CSS files */

/* ========== PAGE CONTAINER ========== */
.page-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm, 16px);
}

@media (min-width: 768px) {
  .page-container {
    padding: 0 var(--spacing-md, 24px);
  }
}

@media (min-width: 1024px) {
  .page-container {
    padding: 0 var(--spacing-lg, 32px);
  }
}