@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #0a0f1c;
  --navy: #0f2c5c;
  --navy-700: #15407f;
  --navy-50: #eef3fb;
  --sky: #4da3c7;
  --sky-600: #2f87ad;
  --sky-50: #ecf6fb;
  --muted: #5b6577;
  --border: #e5e9f0;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-navy: var(--navy);
  --color-navy-700: var(--navy-700);
  --color-navy-50: var(--navy-50);
  --color-sky-brand: var(--sky);
  --color-sky-brand-600: var(--sky-600);
  --color-sky-brand-50: var(--sky-50);
  --color-muted-foreground: var(--muted);
  --color-border-soft: var(--border);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15, 44, 92, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
}

.gradient-text {
  background: linear-gradient(90deg, var(--navy) 0%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.animate-float {
  animation: float-slow 6s ease-in-out infinite;
}