/* Glassmorphism theme — generated by shadcn-extras (Tailwind v4 format) */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

@layer base {
  :root {
    --background: hsl(230 60% 95%);
    --foreground: hsl(235 40% 15%);
    --card: hsl(0 0% 100% / 0.55);
    --card-foreground: hsl(235 40% 15%);
    --popover: hsl(0 0% 100% / 0.75);
    --popover-foreground: hsl(235 40% 15%);
    --primary: hsl(245 75% 58%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(0 0% 100% / 0.45);
    --secondary-foreground: hsl(235 40% 20%);
    --muted: hsl(235 40% 90% / 0.6);
    --muted-foreground: hsl(235 20% 42%);
    --accent: hsl(280 70% 62%);
    --accent-foreground: hsl(0 0% 100%);
    --destructive: hsl(0 75% 58%);
    --destructive-foreground: hsl(0 0% 100%);
    --border: hsl(0 0% 100% / 0.6);
    --input: hsl(235 30% 70% / 0.5);
    --ring: hsl(245 75% 58%);
    --chart-1: hsl(245 75% 58%);
    --chart-2: hsl(280 70% 62%);
    --chart-3: hsl(200 80% 55%);
    --chart-4: hsl(330 75% 62%);
    --chart-5: hsl(170 60% 45%);
    --radius: 1rem;
    --font-sans: ui-sans-serif, system-ui, sans-serif;
    --font-heading: ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --shadow: 0 8px 32px hsl(235 60% 40% / 0.12);
  }

  .dark {
    --background: hsl(240 35% 10%);
    --foreground: hsl(230 40% 94%);
    --card: hsl(240 40% 22% / 0.45);
    --card-foreground: hsl(230 40% 94%);
    --popover: hsl(240 40% 16% / 0.85);
    --popover-foreground: hsl(230 40% 94%);
    --primary: hsl(248 90% 72%);
    --primary-foreground: hsl(240 35% 10%);
    --secondary: hsl(240 35% 30% / 0.5);
    --secondary-foreground: hsl(230 40% 94%);
    --muted: hsl(240 30% 25% / 0.55);
    --muted-foreground: hsl(232 25% 70%);
    --accent: hsl(282 80% 72%);
    --accent-foreground: hsl(240 35% 10%);
    --destructive: hsl(0 80% 65%);
    --destructive-foreground: hsl(240 35% 10%);
    --border: hsl(235 40% 70% / 0.25);
    --input: hsl(235 40% 70% / 0.3);
    --ring: hsl(248 90% 72%);
    --chart-1: hsl(248 90% 72%);
    --chart-2: hsl(282 80% 72%);
    --chart-3: hsl(200 85% 65%);
    --chart-4: hsl(330 80% 70%);
    --chart-5: hsl(170 65% 55%);
    --shadow: 0 8px 32px hsl(240 60% 3% / 0.5);
  }
}

@layer base {
  body {
    font-family: var(--font-sans);
  }
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
  }
}

/* Theme effects (components need shadcn's data-slot attributes) */
body { background-image: linear-gradient(135deg, hsl(230 80% 90% / 0.9), hsl(280 70% 90% / 0.7), hsl(200 85% 88% / 0.9)); }
.dark body { background-image: linear-gradient(135deg, hsl(245 45% 16% / 0.9), hsl(285 45% 14% / 0.8), hsl(210 50% 14% / 0.9)); }
body [data-slot='card'], body [data-slot='dialog-content'] { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow, none); }

Paste this into your project's globals.css (replace your existing :root and .dark token blocks). The @import lines load the theme fonts from Google Fonts — or swap them for next/font if you prefer self-hosting.