/* Base CSS - Variables and Global Styles */

:root {
  /* Colors */
  --primary-color: #192941;
  --secondary-color: #C9EEE8;
  --accent-color: #fff;
  --overlay-color: rgba(16, 29, 49, 0.95);
  
  /* Typography */
  --font-primary: 'Raleway', sans-serif;
  --font-secondary: 'Lora', serif;
  
  /* Spacing */
  --header-height: 4em;
  --container-padding: 15px;
  --section-padding: 2em;
  
  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
  
  /* Z-index layers */
  --z-header: 11;
  --z-menu: 10;
  --z-hero-content: 1;
  --z-video: -2;
  --z-scrim: -1;
}

/* Reset and Base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Container System */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--container-padding));
}

.col-12 {
  padding: 0 var(--container-padding);
  flex: 0 0 100%;
}

/* Utility Classes */
.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  :root {
    --header-height: 3.5em;
    --container-padding: 10px;
  }
}

@media (max-width: 480px) {
  :root {
    --header-height: 3em;
    --container-padding: 8px;
  }
}