@import url("https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/base.css");
/* No tw-animate-css CDN, using Animate.css and custom keyframes instead */

:root {
  --background: oklch(0.1 0 0); /* Deep space black */
  --foreground: oklch(0.9 0.15 85); /* Golden text */
  --card: oklch(0.15 0 0); /* Dark card backgrounds */
  --card-foreground: oklch(0.9 0.15 85); /* Golden text on cards */
  --popover: oklch(0.15 0 0);
  --popover-foreground: oklch(0.9 0.15 85);
  --primary: oklch(0.9 0.15 85); /* Saturn gold */
  --primary-foreground: oklch(0.1 0 0); /* Black text on gold */
  --secondary: oklch(0.25 0.1 280); /* Deep indigo */
  --secondary-foreground: oklch(0.9 0 0); /* White text on indigo */
  --muted: oklch(0.25 0.1 280); /* Indigo for muted elements */
  --muted-foreground: oklch(0.8 0 0); /* Light text on muted */
  --accent: oklch(0.6 0.2 300); /* Purple accent */
  --accent-foreground: oklch(0.9 0 0); /* White text on purple */
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.25 0.1 280); /* Indigo borders */
  --input: oklch(0.2 0 0); /* Dark input backgrounds */
  --ring: oklch(0.9 0.15 85); /* Golden focus rings */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.5rem; /* Rounded corners for cosmic feel */
  --sidebar: oklch(0.15 0 0);
  --sidebar-foreground: oklch(0.9 0.15 85);
  --sidebar-primary: oklch(0.9 0.15 85);
  --sidebar-primary-foreground: oklch(0.1 0 0);
  --sidebar-accent: oklch(0.25 0.1 280);
  --sidebar-accent-foreground: oklch(0.9 0 0);
  --sidebar-border: oklch(0.25 0.1 280);
  --sidebar-ring: oklch(0.9 0.15 85);
}

.dark {
  --background: oklch(0.05 0 0); /* Even deeper space */
  --foreground: oklch(0.95 0.15 85); /* Brighter gold */
  --card: oklch(0.1 0 0);
  --card-foreground: oklch(0.95 0.15 85);
  --popover: oklch(0.1 0 0);
  --popover-foreground: oklch(0.95 0.15 85);
  --primary: oklch(0.95 0.15 85);
  --primary-foreground: oklch(0.05 0 0);
  --secondary: oklch(0.2 0.1 280);
  --secondary-foreground: oklch(0.95 0 0);
  --muted: oklch(0.2 0.1 280);
  --muted-foreground: oklch(0.8 0 0);
  --accent: oklch(0.65 0.2 300);
  --accent-foreground: oklch(0.95 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.2 0.1 280);
  --input: oklch(0.15 0 0);
  --ring: oklch(0.95 0.15 85);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.1 0 0);
  --sidebar-foreground: oklch(0.95 0.15 85);
  --sidebar-primary: oklch(0.95 0.15 85);
  --sidebar-primary-foreground: oklch(0.05 0 0);
  --sidebar-accent: oklch(0.2 0.1 280);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(0.2 0.1 280);
  --sidebar-ring: oklch(0.95 0.15 85);
}

/* Tailwind doesn't support custom property theming directly, so we use them in inline style or custom CSS */

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  transition: background 0.4s, color 0.4s;
}
.bg-background { background: var(--background) !important; }
.text-foreground { color: var(--foreground) !important; }
.bg-card { background: var(--card) !important; }
.text-card-foreground { color: var(--card-foreground) !important; }
.bg-primary { background: var(--primary) !important; }
.text-primary-foreground { color: var(--primary-foreground) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.text-accent { color: var(--accent) !important; }

.border-border { border-color: var(--border) !important; }
.outline-ring\/50 { outline-color: color-mix(in oklab, var(--ring) 50%, transparent) !important; }

/* Animations */
@keyframes float {
  0%,100% { transform: translateY(0px) rotate(0deg);}
  50% { transform: translateY(-10px) rotate(180deg);}
}
@keyframes ring-rotate {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 20px oklch(0.9 0.15 85 / 0.5);}
  50% { box-shadow: 0 0 40px oklch(0.9 0.15 85 / 0.8), 0 0 60px oklch(0.6 0.2 300 / 0.4);}
}
@keyframes choice-select {
  0% { transform: scale(1);}
  50% { transform: scale(1.1);}
  100% { transform: scale(1.05);}
}
.animate-float { animation: float 6s ease-in-out infinite;}
.animate-ring-rotate { animation: ring-rotate 20s linear infinite;}
.animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite;}
.animate-choice-select { animation: choice-select 0.3s ease-out;}

/* Galaxy background gradient */
.galaxy-bg {
  background: radial-gradient(ellipse at center, oklch(0.15 0.1 280) 0%, oklch(0.1 0 0) 50%, oklch(0.05 0 0) 100%);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.galaxy-bg::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(2px 2px at 20px 30px, oklch(0.9 0.15 85), transparent),
    radial-gradient(2px 2px at 40px 70px, oklch(0.8 0 0), transparent),
    radial-gradient(1px 1px at 90px 40px, oklch(0.9 0.15 85), transparent),
    radial-gradient(1px 1px at 130px 80px, oklch(0.8 0 0), transparent),
    radial-gradient(2px 2px at 160px 30px, oklch(0.9 0.15 85), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: float 20s linear infinite;
}

.rounded-xl { border-radius: var(--radius, 0.5rem); }
.shadow-lg { box-shadow: 0 8px 32px 0 oklch(0.1 0 0 / 0.5);}