/* Design tokens - matches original app */
:root {
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --surface: 0 0% 100%;
  --primary: 224 76% 33%;
  --primary-foreground: 0 0% 100%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 217 91% 60%;
  --accent-foreground: 0 0% 100%;
  --border: 214 32% 91%;
  --radius: 0.75rem;
  --hero-gradient: linear-gradient(135deg, hsl(224 76% 33%), hsl(217 91% 60%));
  --glass-bg: hsla(0, 0%, 100%, 0.7);
  --glass-border: hsla(0, 0%, 100%, 0.3);
  --shadow-soft: 0 4px 30px hsla(224, 76%, 33%, 0.08);
  --shadow-elevated: 0 20px 60px hsla(224, 76%, 33%, 0.12);
  --shadow-glow: 0 0 40px hsla(217, 91%, 60%, 0.2);
}

/* Semantic backgrounds and text */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-surface { background-color: hsl(var(--surface)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-primary { background: var(--hero-gradient); }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.border-border { border-color: hsl(var(--border)); }
.bg-border { background-color: hsl(var(--border)); }
.bg-accent\/5 { background-color: hsl(217 91% 60% / 0.05); }
.bg-accent\/10 { background-color: hsl(217 91% 60% / 0.1); }
.bg-accent\/20 { background-color: hsl(217 91% 60% / 0.2); }
.bg-accent\/40 { background-color: hsl(217 91% 60% / 0.4); }
.bg-primary\/5 { background-color: hsl(224 76% 33% / 0.05); }
.bg-primary\/20 { background-color: hsl(224 76% 33% / 0.2); }
.bg-primary\/30 { background-color: hsl(224 76% 33% / 0.3); }
.bg-muted\/50 { background-color: hsl(210 40% 96% / 0.5); }
.bg-muted\/30 { background-color: hsl(210 40% 96% / 0.3); }

/* Component classes */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}
.glass-navbar {
  background: hsla(210, 40%, 98%, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.gradient-primary {
  background: var(--hero-gradient);
}
.gradient-text {
  background: var(--hero-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.btn-primary-glow:hover {
  box-shadow: 0 0 30px hsla(217, 91%, 60%, 0.4);
}
.floating {
  animation: float 6s ease-in-out infinite;
}
.floating-delayed {
  animation: float 6s ease-in-out 2s infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Override for dark footer text */
footer .opacity-60 { opacity: 0.6; }
footer .opacity-70 { opacity: 0.7; }
footer .opacity-40 { opacity: 0.4; }