/* Critical above-the-fold styles */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 210 100% 20%;
  --primary-foreground: 210 40% 98%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  min-height: 100vh;
  line-height: 1.5;
}

#root {
  min-height: 100vh;
}

/* Prevent layout shift for hero section */
.hero-placeholder {
  min-height: 600px;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.05) 0%, hsl(var(--background)) 100%);
}