@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-headline: "Manrope", sans-serif;

  --color-primary: #002b4f;
  --color-primary-container: #15416c;
  --color-secondary: #00639b;
  --color-secondary-container: #3fadfe;
  --color-tertiary: #012c4a;
  
  --color-surface: #f8f9ff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-high: #dce9ff;
  --color-surface-container-highest: #d2e4ff;
  --color-surface-container-lowest: #ffffff;

  --color-on-surface: #001c37;
  --color-on-surface-variant: #42474f;
  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #003e64;
  
  --color-outline: #737780;
  --color-outline-variant: #c3c6d0;
  --color-white: #ffffff;
}

@layer base {
  body {
    @apply bg-surface font-sans text-on-surface antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-headline;
  }
}

.glass-nav {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(195, 198, 208, 0.1);
}

.asymmetric-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
}

.technical-crosshair {
  position: relative;
}

.technical-crosshair::before,
.technical-crosshair::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(195, 198, 208, 0.3);
}

.technical-crosshair-tl::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.technical-crosshair-br::after { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }

/* Custom animations to replace motion/react */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-fade-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.8s ease-out forwards;
}

.animate-slide-right {
  animation: slideInRight 0.5s ease-out forwards;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

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