/* Critical styles for initial page load */
:root {
  --color-earth-base: #9A765C;
  --color-earth-light: #E3D1C3;
  --color-earth-dark: #452A15;
  --color-earth-pale: #D6BCAD;
  --color-earth-rich: #5C3321;
  --color-earth-deep: #522D1B;
  --color-earth-copper: #B86636;
  --color-earth-chocolate: #583924;
  --color-earth-caramel: #C29667;
  --color-earth-burgundy: #6B261F;
}

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lexend', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Loading indicator */
.loading::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--color-earth-base), var(--color-earth-light));
  animation: loading 1s ease-in-out infinite;
  z-index: 9999;
}

@keyframes loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}