@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* ─── Core UI (shadcn/radix) — Stardust Theme ─── */
  --background: 224 48% 9%;
  --foreground: 210 40% 98%;
  --card: 219 39% 14%;
  --card-foreground: 210 40% 98%;
  --popover: 219 39% 14%;
  --popover-foreground: 210 40% 98%;
  --primary: 199 89% 48%;
  --primary-foreground: 224 48% 9%;
  --secondary: 27 96% 61%;
  --secondary-foreground: 224 48% 9%;
  --muted: 219 30% 18%;
  --muted-foreground: 215 20% 65%;
  --accent: 199 89% 48%;
  --accent-foreground: 224 48% 9%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 219 30% 18%;
  --input: 219 30% 18%;
  --ring: 199 89% 48%;
  --radius: 0.5rem;

  /* ─── White-Label Brand Colors (HSL) — Stardust ─── */
  --brand-primary: 199 93% 60%;
  --brand-primary-deep: 199 89% 48%;
  --brand-primary-light: 199 95% 74%;
  --brand-secondary: 31 97% 72%;
  --brand-secondary-deep: 27 96% 61%;
  --brand-secondary-light: 31 98% 83%;
  --brand-bg-deep: 224 48% 9%;
  --brand-bg-elevated: 219 46% 12%;
  --brand-bg-surface: 219 39% 14%;

  /* ─── White-Label Brand Colors (HEX) — Stardust ─── */
  --brand-primary-hex: #38BDF8;
  --brand-primary-deep-hex: #0EA5E9;
  --brand-primary-light-hex: #7DD3FC;
  --brand-secondary-hex: #FDBA74;
  --brand-secondary-deep-hex: #FB923C;
  --brand-secondary-light-hex: #FED7AA;
  --brand-bg-deep-hex: #0C1222;
  --brand-bg-elevated-hex: #111B2E;
  --brand-bg-surface-hex: #162032;

  /* ─── White-Label Brand Colors (RGB) — Stardust ─── */
  --brand-primary-rgb: 56, 189, 248;
  --brand-secondary-rgb: 253, 186, 116;
  --brand-bg-deep-rgb: 12, 18, 34;
}

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

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "rlig" 1, "calt" 1;
}

html {
  scroll-behavior: smooth;
}

[data-hydration-error] {
  display: none !important;
}

.glass-card {
  background: rgba(var(--brand-bg-deep-rgb), 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glow-cyan,
.glow-brand-primary {
  box-shadow: 0 0 30px rgba(var(--brand-primary-rgb), 0.3);
}

.glow-purple,
.glow-brand-secondary {
  box-shadow: 0 0 30px rgba(var(--brand-secondary-rgb), 0.3);
}

.gradient-text {
  background: linear-gradient(135deg, var(--brand-primary-hex) 0%, var(--brand-secondary-hex) 50%, var(--brand-primary-hex) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-gradient {
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--brand-secondary-rgb), 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 50%, rgba(var(--brand-primary-rgb), 0.1) 0%, transparent 40%),
              radial-gradient(ellipse at 20% 80%, rgba(var(--brand-secondary-rgb), 0.1) 0%, transparent 40%);
}

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

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

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Hide scrollbar for category filters */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}