:root {
  /* ── Colors (HSL values) ── */
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;
  --primary: 46 100% 55%;
  --primary-foreground: 222 47% 11%;
  --secondary: 222 35% 14%;
  --secondary-foreground: 210 40% 98%;
  --accent: 46 100% 55%;
  --accent-foreground: 222 47% 11%;
  --muted: 222 28% 16%;
  --muted-foreground: 215 18% 70%;
  --destructive: 0 84% 60%;
  --border: 222 22% 22%;
  --ring: 46 100% 55%;
  --card: 222 35% 12%;
  --card-foreground: 210 40% 98%;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px 0 hsl(var(--foreground) / 0.06);
  --shadow-md: 0 8px 18px -10px hsl(var(--foreground) / 0.18), 0 2px 6px -3px hsl(var(--foreground) / 0.08);
  --shadow-lg: 0 18px 40px -18px hsl(var(--foreground) / 0.22), 0 10px 18px -14px hsl(var(--foreground) / 0.12);
  --shadow-elegant: 0 18px 60px -22px hsl(var(--primary) / 0.45);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.75));
  --gradient-subtle: linear-gradient(135deg, hsl(var(--background)), hsl(var(--secondary)));
  --gradient-honey: radial-gradient(1200px 600px at 20% -10%, hsl(var(--primary) / 0.22), transparent 60%), radial-gradient(900px 500px at 90% 10%, hsl(var(--primary) / 0.12), transparent 55%), linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));

  /* ── Transitions ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Border Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dark, [data-theme="dark"] {
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  background: var(--gradient-honey);
}

::selection { background: hsl(var(--primary) / 0.35); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Subtle animated grid */
.bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(to right, hsl(var(--border) / 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--border) / 0.35) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(600px 400px at 30% 10%, black 40%, transparent 70%);
}

/* Honeycomb pattern */
.honeycomb {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    radial-gradient(circle at 10px 10px, hsl(var(--primary) / 0.22) 2px, transparent 3px),
    radial-gradient(circle at 32px 32px, hsl(var(--primary) / 0.16) 2px, transparent 3px);
  background-size: 44px 44px;
  filter: blur(0.2px);
  mask-image: radial-gradient(700px 500px at 70% 0%, black 35%, transparent 70%);
}

/* Card styling helpers */
.card {
  background: linear-gradient(180deg, hsl(var(--card) / 0.92), hsl(var(--card) / 0.78));
  border: 1px solid hsl(var(--border) / 0.9);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
}

.pill {
  border-radius: var(--radius-full);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.6);
}

.btn {
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast), filter var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-elegant);
  border: 1px solid hsl(var(--primary) / 0.35);
}
.btn-primary:hover { filter: brightness(1.05); }

.btn-ghost {
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}
.btn-ghost:hover { background: hsl(var(--muted) / 0.55); }

.input {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.35);
  color: hsl(var(--foreground));
  padding: 0.75rem 0.9rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 4px hsl(var(--ring) / 0.18);
  outline: none;
  background: hsl(var(--background) / 0.5);
}

.mono {
  font-family: var(--font-mono);
}

/* Console */
.console {
  background: linear-gradient(180deg, hsl(var(--background) / 0.65), hsl(var(--background) / 0.35));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, hsl(var(--primary) / 0.08), transparent);
  transform: translateY(-100%);
  animation: scan 3.2s linear infinite;
  opacity: 0.8;
}
@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Bumblebee SVG subtle float */
.floaty {
  animation: floaty 4.5s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted) / 0.35), hsl(var(--muted) / 0.7), hsl(var(--muted) / 0.35));
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}

/* Responsive enhancements */
@media (min-width: 768px) {
  .bg-grid { opacity: 0.45; }
}