/* Variables CSS */
:root {
  /* Color System */
  --color-primary: #1e50a0;
  --color-primary-light: #2a62c2;
  --color-primary-dark: #153d7d;
  
  --color-secondary: #34495e;
  --color-secondary-light: #40576f;
  --color-secondary-dark: #283848;
  
  --color-accent: #e67e22;
  --color-accent-light: #f39c12;
  --color-accent-dark: #d35400;
  
  --color-success: #2ecc71;
  --color-warning: #f1c40f;
  --color-error: #e74c3c;
  
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-dark: #111111;
  
  --color-background: #ffffff;
  --color-background-alt: #f9f9f9;
  --color-background-dark: #eeeeee;
  
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1fac54;
  
  /* Typography */
  --font-family: 'Montserrat', sans-serif;
  --font-size-xs: 1.2rem;
  --font-size-sm: 1.4rem;
  --font-size-md: 1.6rem;
  --font-size-lg: 1.8rem;
  --font-size-xl: 2.4rem;
  --font-size-xxl: 3.2rem;
  --font-size-xxxl: 4rem;
  
  /* Spacing System (based on 8px) */
  --space-1: 0.8rem;
  --space-2: 1.6rem;
  --space-3: 2.4rem;
  --space-4: 3.2rem;
  --space-5: 4rem;
  --space-6: 4.8rem;
  --space-7: 5.6rem;
  --space-8: 6.4rem;
  
  /* Border Radius */
  --radius-sm: 0.4rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.6rem;
  --radius-full: 999rem;
  
  /* Box Shadows */
  --shadow-sm: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
  --shadow-md: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Container */
  --container-width: 120rem;
  --container-padding: 2rem;
  
  /* Z-index */
  --z-navigation: 1000;
  --z-modal: 2000;
  --z-floating: 1500;
}

/* Media Query Breakpoints */
/* Small devices (landscape phones) */
@media (min-width: 576px) {
  :root {
    --container-padding: 3.2rem;
  }
}

/* Medium devices (tablets) */
@media (min-width: 768px) {
  :root {
    --container-padding: 4rem;
  }
}

/* Large devices (desktops) */
@media (min-width: 992px) {
  :root {
    --container-padding: 4.8rem;
  }
}

/* Extra large devices */
@media (min-width: 1200px) {
  :root {
    --container-padding: 6.4rem;
  }
}