/* Main CSS - Design System Variables */
:root {
  /* Colors */
  --trust-blue: 220 100% 45%;
  --trust-blue-dark: 220 100% 35%;
  --warm-orange: 25 95% 55%;
  --success-green: 142 76% 36%;
  --professional-gray: 220 9% 46%;
  --light-gray: 210 40% 98%;
  
  /* Background & Foreground */
  --background: 0 0% 100%;
  --foreground: 222 84% 5%;
  --muted: 210 40% 98%;
  --muted-foreground: 215 16% 47%;
  
  /* Primary & Secondary */
  --primary: var(--trust-blue);
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 84% 5%;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(var(--trust-blue)), hsl(var(--trust-blue-dark)));
  --gradient-hero: linear-gradient(to right, hsl(var(--trust-blue) / 0.9), hsl(var(--trust-blue-dark) / 0.8));
  
  /* Shadows */
  --shadow-elegant: 0 10px 30px -10px hsl(var(--trust-blue) / 0.3);
  --shadow-glow: 0 0 40px hsl(var(--warm-orange) / 0.4);
  
  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background: 222 84% 5%;
    --foreground: 210 40% 98%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
  }
}

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

body {
  font-family: var(--font-family);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 3rem;
  color: hsl(var(--foreground));
}

/* Layout */
.main-content {
  min-height: 100vh;
}

/* Utilities */
.highlight {
  color: hsl(var(--warm-orange));
}

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

@media (max-width: 768px) {
  .container {
    padding: 0 0.5rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
}