/* Vanilla CSS translation of Next.js globals.css tokens */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.205 0.05 240);
  --card: oklch(0.98 0.01 240);
  --card-foreground: oklch(0.205 0.05 240);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.205 0.05 240);
  --primary: oklch(0.205 0.05 240);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.35 0.15 270);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.85 0.02 240);
  --muted-foreground: oklch(0.45 0.03 240);
  --accent: oklch(0.95 0.05 80);
  --accent-foreground: oklch(0.205 0.05 240);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0.01 240);
  --input: oklch(0.98 0.005 240);
  --ring: oklch(0.35 0.15 270 / 0.3);
  --radius: 0.75rem;
}

.dark {
  --background: oklch(0.08 0.02 240);
  --foreground: oklch(0.92 0.01 240);
  --card: oklch(0.12 0.02 240);
  --card-foreground: oklch(0.92 0.01 240);
  --popover: oklch(0.12 0.02 240);
  --popover-foreground: oklch(0.92 0.01 240);
  --primary: oklch(0.92 0.01 240);
  --primary-foreground: oklch(0.08 0.02 240);
  --secondary: oklch(0.45 0.18 270);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.15 0.02 240);
  --muted-foreground: oklch(0.7 0.01 240);
  --accent: oklch(0.9 0.08 80);
  --accent-foreground: oklch(0.08 0.02 240);
  --destructive: oklch(0.6 0.25 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.2 0.02 240);
  --input: oklch(0.15 0.02 240);
  --ring: oklch(0.45 0.18 270 / 0.4);
}

/* Base custom styles to simplify tailwind translations when CDN falls short */
html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

/* Modals */
.modal-overlay {
  background-color: rgba(10, 17, 40, 0.82);
  backdrop-filter: blur(8px);
}

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

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