@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* Canvas — deep navy */
  --color-canvas: oklch(0.07 0.015 250);
  --color-surface: oklch(0.11 0.02 245 / 0.6);
  --color-surface-hover: oklch(0.15 0.02 245 / 0.7);

  /* Glass */
  --color-glass-bg: oklch(1 0 0 / 0.04);
  --color-glass-border: oklch(1 0 0 / 0.08);
  --glass-shadow: 0 8px 32px oklch(0 0 0 / 0.4);

  /* Primary — teal-cyan */
  --color-primary: oklch(0.62 0.17 215);
  --color-primary-glow: oklch(0.62 0.17 215 / 0.4);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-border: oklch(1 0 0 / 0.06);
  --color-border-glow: oklch(0.62 0.17 215 / 0.3);

  /* Accents */
  --color-accent-purple: oklch(0.65 0.2 280);
  --color-accent-amber: oklch(0.7 0.17 75);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-success: oklch(0.6 0.18 160);

  /* Text */
  --color-text-primary: oklch(0.93 0.01 245);
  --color-text-secondary: oklch(0.55 0.02 245);
  --color-text-mono: oklch(0.62 0.17 215);

  /* Legacy overrides for shadcn compatibility */
  --color-background: var(--color-canvas);
  --color-foreground: var(--color-text-primary);
  --color-card: var(--color-surface);
  --color-card-foreground: var(--color-text-primary);
  --color-muted: oklch(0.17 0.015 245);
  --color-muted-foreground: var(--color-text-secondary);
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);

  /* Radius */
  --radius-card: 16px;
  --radius-panel: 12px;
  --radius-control: 8px;
  --radius-pill: 9999px;
  --radius: 0.625rem; /* shadcn compat */

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

@layer utilities {
  .glass {
    background: var(--color-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-glass-border);
    box-shadow: var(--glass-shadow);
  }
  .glass-elevated {
    background: var(--color-glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--color-border-glow);
    box-shadow: 0 8px 32px oklch(0 0 0 / 0.5), 0 0 20px var(--color-primary-glow);
  }
  .glass-intense {
    background: oklch(1 0 0 / 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid oklch(1 0 0 / 0.12);
  }
}

@layer base {
  * { @apply border-border; }
  body {
    @apply bg-canvas text-text-primary font-sans antialiased;
    background-image:
      radial-gradient(circle, oklch(1 0 0 / 0.025) 1px, transparent 1px),
      radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.62 0.17 215 / 0.06), transparent),
      radial-gradient(ellipse 50% 40% at 80% 80%, oklch(0.65 0.2 280 / 0.04), transparent);
    background-size: 24px 24px, 100% 100%, 100% 100%;
  }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.1); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.2); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in-up { animation: fade-in-up 0.3s ease-out forwards; }
.animate-pulse-ring { animation: pulse-ring 1.5s ease-out infinite; }
.animate-shimmer { background: linear-gradient(90deg, transparent, oklch(0.62 0.17 215 / 0.08), transparent); background-size: 200% 100%; animation: shimmer 1.5s infinite; }