:root {
  --background: 210 40% 98%;
  --foreground: 222.2 47.4% 11.2%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;

  --primary: 202 80% 45%;
  --primary-deep: 202 85% 30%;
  --primary-accent: 202 75% 40%;
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 202 80% 45%;

  --primary-rgb: 23, 142, 206;
  --background-rgb: 250, 251, 252;

  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;

  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;

  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;

  --primary: 202 85% 50%;
  --primary-deep: 202 85% 30%;
  --primary-accent: 203 85% 65%;
  --primary-foreground: 210 40% 98%;

  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;

  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 202 85% 50%;

  --primary-rgb: 25, 155, 230;
  --background-rgb: 2, 8, 20;
}

/* Custom Utilities from globals.css */
.bg-hero-glow {
  background: radial-gradient(circle at top center, hsla(var(--primary), 0.15), transparent 70%);
}

.bg-grid {
  background-image: linear-gradient(to right, hsla(var(--border), 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(var(--border), 0.3) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-primary-gradient {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-deep)));
}

.glass {
  background: hsl(var(--background));
  backdrop-filter: blur(10px);
  border: 1px solid hsl(var(--border));
}

.glass-card {
  background: hsla(var(--primary), 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid hsla(var(--primary), 0.1);
}

.text-gradient {
  background: linear-gradient(to right, hsl(var(--foreground)), hsl(var(--primary-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-balance {
  text-wrap: balance;
}

@keyframes reverse-spin {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

.animate-reverse-spin-slow {
  animation: spin-slow 8s linear reverse infinite;
}

/* Base resets */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: hsla(var(--primary), 0.2);
  color: hsl(var(--primary));
}

/* Custom classes were defined in tailwind v4 @theme, let's map them for standard use */
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary { color: hsl(var(--primary)); }
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.border-border { border-color: hsl(var(--border)); }