/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-body);
  color: var(--color-text-body);
  line-height: 1.8;
  font-size: var(--font-size-base);
  background-color: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elegant Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-text-dark);
  font-weight: 600; /* Less heavy/cheesy */
  line-height: 1.15;
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em; /* Editorial feel */
}

h1 { font-size: var(--font-size-5xl); font-weight: 500; letter-spacing: -0.03em; }
h2 { font-size: var(--font-size-4xl); font-weight: 500; }
h3 { font-size: var(--font-size-3xl); font-weight: 500; }
h4 { font-size: var(--font-size-2xl); font-weight: 600; }

p {
  margin-bottom: var(--space-4);
  font-weight: 300;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-normal);
}

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

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Massive spacing for breathable areas */
.section {
  padding: var(--space-24) 0;
}

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

.section-bg-subtle {
  background-color: var(--color-bg-subtle);
}

.grid {
  display: grid;
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.gap-4 { gap: var(--space-4); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); } /* Extra large gaps */

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-white { color: var(--color-text-light); }
.text-muted { color: var(--color-text-body); }

/* Overlapping Utilities */
.overlap-top {
  margin-top: -120px;
  position: relative;
  z-index: 10;
}

/* Pre-heading subtle text */
.section-subtitle {
  color: var(--color-secondary);
  font-family: var(--font-family-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--font-size-sm);
  display: block;
  margin-bottom: var(--space-3);
}