/* GLOBAL RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* GLOBAL VARIABLES */
:root {
  /* BRAND COLORS */
  --primary-color: #e43a4e;
  --secondary-color: #072A60;

  /* COMPLEMENTARY TONES */
  --accent-color: #F5F7FA;
  --background-color: #FAF9F7;
  --surface-color: #FFFFFF;

  /* TYPOGRAPHY */
  --text-color: #2E2E2E;
  --text-muted: #6C757D;

  /* INTERACTIONS */
  --border-color: #D8D3CC;
  --hover-color: #093C8E;
  --focus-color: #ec252f;

  /* TYPOGRAPHY SETTINGS */
  --font-family-base: "Nunito", sans-serif;
  --font-size-xs: 0.25rem;
  --font-size-sm: 0.5rem;
  --font-size-md: 1rem;
  --font-size-lg: 2rem;
  --font-size-xl: 4rem;

  /* SPACING & DIMENSIONS */
  --container-width: 1200px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  /* VISUAL DETAILS */
  --border-radius: 8px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease-in-out;

  /* LAYERING */
  --z-nav: 1000;
}

/* BASIC STYLES */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  color: var(--text-color);
  background-color: var(--secondary-color);
  min-height: 100vh;
}

/* LINKS */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--hover-color);
}

/* MEDIA & CONTAINERS */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

/* RESPONSIVE */
@media (min-width: 768px) {
  .container {
    padding: 0;
  }
}