{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:component",
  "title": "Button",
  "description": "Displays a button or a component that looks like a button with glassy variants.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": "lib/utils.ts"
    },
    {
      "path": "lib/glass-utils.ts",
      "content": "/**\n * Glassmorphism customization utilities\n * Allows users to customize color, transparency, blur, and outline for glass effects\n */\n\nexport interface GlassCustomization {\n  /**\n   * Background color for the glass effect (e.g., \"rgba(255, 255, 255, 0.1)\" or \"#ffffff\")\n   * Default: uses CSS variable --glass-bg\n   */\n  color?: string\n  \n  /**\n   * Transparency/opacity for the background (0-1)\n   * If provided, will override the alpha channel in color\n   */\n  transparency?: number\n  \n  /**\n   * Blur amount in pixels\n   * Default: uses CSS variable --blur (20px)\n   */\n  blur?: number | string\n  \n  /**\n   * Border/outline color (e.g., \"rgba(255, 255, 255, 0.25)\" or \"#ffffff\")\n   * Default: uses CSS variable --glass-border\n   */\n  outline?: string\n  \n  /**\n   * Border/outline width in pixels\n   * Default: 1px\n   */\n  outlineWidth?: number | string\n  \n  /**\n   * Shadow for the glass effect\n   * Default: uses CSS variable --glass-shadow\n   */\n  shadow?: string\n  \n  /**\n   * Inner glow color and intensity (e.g., \"rgba(255, 255, 255, 0.2)\")\n   * Creates an inset shadow for a glowing effect inside the element\n   */\n  innerGlow?: string\n  \n  /**\n   * Inner glow blur/spread radius in pixels\n   * Default: 20px\n   */\n  innerGlowBlur?: number | string\n}\n\n/**\n * Converts glass customization props to CSS style object\n */\nexport function getGlassStyles(customization?: GlassCustomization): React.CSSProperties {\n  if (!customization) return {}\n  \n  const styles: React.CSSProperties = {}\n  \n  // Handle background color and transparency\n  if (customization.color || customization.transparency !== undefined) {\n    let bgColor = customization.color || 'rgba(255, 255, 255, 0.1)'\n    \n    // If transparency is provided, adjust the alpha channel\n    if (customization.transparency !== undefined) {\n      // Extract RGB from color string if it's rgba/rgb\n      const rgbaMatch = bgColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*[\\d.]+)?\\)/)\n      if (rgbaMatch) {\n        const [, r, g, b] = rgbaMatch\n        bgColor = `rgba(${r}, ${g}, ${b}, ${customization.transparency})`\n      } else if (bgColor.startsWith('#')) {\n        // Convert hex to rgba\n        const hex = bgColor.replace('#', '')\n        const r = parseInt(hex.substring(0, 2), 16)\n        const g = parseInt(hex.substring(2, 4), 16)\n        const b = parseInt(hex.substring(4, 6), 16)\n        bgColor = `rgba(${r}, ${g}, ${b}, ${customization.transparency})`\n      } else {\n        // Fallback: append transparency\n        bgColor = `${bgColor}${customization.transparency}`\n      }\n    }\n    \n    styles.backgroundColor = bgColor\n  }\n  \n  // Handle blur\n  if (customization.blur !== undefined) {\n    const blurValue = typeof customization.blur === 'number' \n      ? `${customization.blur}px` \n      : customization.blur\n    styles.backdropFilter = `blur(${blurValue})`\n    styles.WebkitBackdropFilter = `blur(${blurValue})` // Safari support\n  }\n  \n  // Handle outline/border - always apply border for glassmorphism effect\n  if (customization.outline !== undefined) {\n    const width = customization.outlineWidth || '1px'\n    styles.borderColor = customization.outline\n    styles.borderWidth = typeof width === 'number' ? `${width}px` : width\n    styles.borderStyle = 'solid'\n  } else if (!customization.outline && (customization.color || customization.transparency !== undefined || customization.blur !== undefined)) {\n    // Apply default border if glass customization is provided but outline is not\n    styles.borderColor = 'rgba(255, 255, 255, 0.3)'\n    styles.borderWidth = '1px'\n    styles.borderStyle = 'solid'\n  }\n  \n  // Handle shadow and inner glow - combine both if provided\n  const shadows: string[] = []\n  \n  // Add outer shadow\n  if (customization.shadow !== undefined) {\n    shadows.push(customization.shadow)\n  } else if (customization.color || customization.transparency !== undefined || customization.blur !== undefined) {\n    // Apply default glass shadow for depth\n    shadows.push('0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05)')\n  }\n  \n  // Add inner glow as inset shadow\n  if (customization.innerGlow !== undefined) {\n    const glowBlur = customization.innerGlowBlur !== undefined \n      ? (typeof customization.innerGlowBlur === 'number' ? `${customization.innerGlowBlur}px` : customization.innerGlowBlur)\n      : '20px'\n    shadows.push(`inset 0 0 ${glowBlur} ${customization.innerGlow}`)\n  }\n  \n  if (shadows.length > 0) {\n    styles.boxShadow = shadows.join(', ')\n  }\n  \n  return styles\n}\n\n/**\n * Generates CSS custom properties for glass customization\n * Useful for components that need to pass styles to child elements\n */\nexport function getGlassCSSVars(customization?: GlassCustomization): Record<string, string> {\n  if (!customization) return {}\n  \n  const vars: Record<string, string> = {}\n  \n  if (customization.color || customization.transparency !== undefined) {\n    let bgColor = customization.color || 'rgba(255, 255, 255, 0.1)'\n    \n    if (customization.transparency !== undefined) {\n      const rgbaMatch = bgColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*[\\d.]+)?\\)/)\n      if (rgbaMatch) {\n        const [, r, g, b] = rgbaMatch\n        bgColor = `rgba(${r}, ${g}, ${b}, ${customization.transparency})`\n      } else if (bgColor.startsWith('#')) {\n        const hex = bgColor.replace('#', '')\n        const r = parseInt(hex.substring(0, 2), 16)\n        const g = parseInt(hex.substring(2, 4), 16)\n        const b = parseInt(hex.substring(4, 6), 16)\n        bgColor = `rgba(${r}, ${g}, ${b}, ${customization.transparency})`\n      }\n    }\n    \n    vars['--glass-bg-custom'] = bgColor\n  }\n  \n  if (customization.blur !== undefined) {\n    const blurValue = typeof customization.blur === 'number' \n      ? `${customization.blur}px` \n      : customization.blur\n    vars['--blur-custom'] = blurValue\n  }\n  \n  if (customization.outline !== undefined) {\n    vars['--glass-border-custom'] = customization.outline\n  }\n  \n  if (customization.outlineWidth !== undefined) {\n    const width = typeof customization.outlineWidth === 'number' \n      ? `${customization.outlineWidth}px` \n      : customization.outlineWidth\n    vars['--glass-border-width-custom'] = width\n  }\n  \n  if (customization.shadow !== undefined) {\n    vars['--glass-shadow-custom'] = customization.shadow\n  }\n  \n  if (customization.innerGlow !== undefined) {\n    vars['--glass-inner-glow-custom'] = customization.innerGlow\n  }\n  \n  if (customization.innerGlowBlur !== undefined) {\n    const blurValue = typeof customization.innerGlowBlur === 'number' \n      ? `${customization.innerGlowBlur}px` \n      : customization.innerGlowBlur\n    vars['--glass-inner-glow-blur-custom'] = blurValue\n  }\n  \n  return vars\n}\n\n",
      "type": "registry:lib",
      "target": "lib/glass-utils.ts"
    },
    {
      "path": "lib/hover-effects.ts",
      "content": "import { cva } from \"class-variance-authority\"\n\n/**\n * Shared hover effect variants for all Glass UI components\n * \n * Effects:\n * - none: No hover effect\n * - glow: Purple glow shadow that intensifies on hover\n * - shimmer: Moving shimmer effect across the component\n * - ripple: Ripple effect that scales outward on hover\n * - lift: Subtle lift effect with shadow increase\n * - scale: Scale up slightly on hover\n */\nexport const hoverEffects = cva(\n  \"transition-all duration-300\",\n  {\n    variants: {\n      hover: {\n        none: \"\",\n        glow: \"shadow-lg shadow-purple-500/50 hover:shadow-xl hover:shadow-purple-500/70\",\n        shimmer: \"relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent hover:before:translate-x-full before:transition-transform before:duration-1000\",\n        ripple: \"relative overflow-hidden after:absolute after:inset-0 after:scale-0 after:rounded-full after:bg-white/30 after:transition-transform after:duration-500 hover:after:scale-150\",\n        lift: \"hover:-translate-y-1 hover:shadow-lg\",\n        scale: \"hover:scale-105\",\n      },\n    },\n    defaultVariants: {\n      hover: \"none\",\n    },\n  }\n)\n\nexport type HoverEffect = \"none\" | \"glow\" | \"shimmer\" | \"ripple\" | \"lift\" | \"scale\"\n\n",
      "type": "registry:lib",
      "target": "lib/hover-effects.ts"
    },
    {
      "path": "app/globals.css",
      "content": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --font-sans: var(--font-geist-sans);\n  --font-mono: var(--font-geist-mono);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar: var(--sidebar);\n  --color-chart-5: var(--chart-5);\n  --color-chart-4: var(--chart-4);\n  --color-chart-3: var(--chart-3);\n  --color-chart-2: var(--chart-2);\n  --color-chart-1: var(--chart-1);\n  --color-ring: var(--ring);\n  --color-input: var(--input);\n  --color-border: var(--border);\n  --color-destructive: var(--destructive);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-accent: var(--accent);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-muted: var(--muted);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-secondary: var(--secondary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-primary: var(--primary);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-popover: var(--popover);\n  --color-card-foreground: var(--card-foreground);\n  --color-card: var(--card);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --shadow-glass: var(--glass-shadow);\n}\n\n:root {\n  --radius: 0.625rem;\n  /* Base colors - Light mode with dark text */\n  --background: transparent;\n  --foreground: oklch(0.15 0 0); /* Near black - dark text for light mode */\n  --card: transparent;\n  --card-foreground: oklch(0.15 0 0); /* Near black - dark text */\n  --popover: transparent;\n  --popover-foreground: oklch(0.15 0 0); /* Near black - dark text */\n  \n  /* Primary colors - Light mode */\n  --primary: oklch(0.5 0.2 250); /* Blue */\n  --primary-foreground: oklch(0.98 0 0); /* White text on primary */\n  \n  /* Secondary colors - Light mode */\n  --secondary: oklch(0.96 0 0); /* Very light gray */\n  --secondary-foreground: oklch(0.15 0 0); /* Dark text */\n  \n  /* Muted colors - Light mode */\n  --muted: oklch(0.85 0 0); /* Dark gray - darker shade to avoid glass effect override */\n  --muted-foreground: oklch(0.1 0 0); /* Medium gray text */\n  \n  /* Accent colors - Light mode */\n  --accent: oklch(0.96 0 0); /* Very light gray */\n  --accent-foreground: oklch(0.15 0 0); /* Dark text */\n  \n  /* Destructive colors - WCAG AA compliant (4.5:1 contrast) */\n  --destructive: oklch(0.55 0.22 25); /* Red - 4.5:1 with white */\n  --destructive-foreground: oklch(0.98 0 0); /* White text on red */\n  \n  /* Border and input - WCAG AA compliant (3:1 for UI components) */\n  --border: oklch(0.88 0 0); /* Light gray - 3:1 contrast */\n  --input: oklch(0.88 0 0); /* Light gray - 3:1 contrast */\n  --ring: oklch(0.5 0.2 250); /* Blue ring - 3:1 contrast */\n  \n  /* Chart colors - WCAG AA compliant */\n  --chart-1: oklch(0.6 0.2 250); /* Blue */\n  --chart-2: oklch(0.55 0.15 150); /* Green */\n  --chart-3: oklch(0.5 0.2 50); /* Yellow */\n  --chart-4: oklch(0.65 0.2 300); /* Purple */\n  --chart-5: oklch(0.6 0.2 20); /* Orange */\n  \n  /* Sidebar colors - Light mode */\n  --sidebar: oklch(0.98 0 0); /* Near white */\n  --sidebar-foreground: oklch(0.15 0 0); /* Dark text */\n  --sidebar-primary: oklch(0.5 0.2 250); /* Blue */\n  --sidebar-primary-foreground: oklch(0.98 0 0); /* White text on primary */\n  --sidebar-accent: oklch(0.96 0 0); /* Very light gray */\n  --sidebar-accent-foreground: oklch(0.15 0 0); /* Dark text */\n  --sidebar-border: oklch(0.88 0 0); /* Light gray - 3:1 contrast */\n  --sidebar-ring: oklch(0.5 0.2 250); /* Blue ring - 3:1 contrast */\n\n  /* Apple-standard glassmorphism - Very subtle and refined */\n  /* Low opacity for Apple's standard glass effect */\n  --glass-bg: linear-gradient(135deg, \n    rgba(255, 255, 255, 0.15) 0%, \n    rgba(255, 255, 255, 0.12) 25%,\n    rgba(240, 248, 255, 0.13) 50%,\n    rgba(255, 255, 255, 0.11) 75%,\n    rgba(230, 240, 255, 0.12) 100%\n  );\n  /* Very subtle white border - Apple standard */\n  --glass-border: rgba(255, 255, 255, 0.12);\n  /* Minimal shadows with subtle inner glow - Apple standard */\n  --glass-shadow: \n    0 4px 16px rgba(0, 0, 0, 0.08),\n    0 1px 4px rgba(0, 0, 0, 0.04),\n    0 0 0 0.5px rgba(255, 255, 255, 0.08) inset,\n    0 0 12px rgba(255, 255, 255, 0.1) inset;\n  --glass-shadow-lg: \n    0 8px 32px rgba(0, 0, 0, 0.1),\n    0 2px 8px rgba(0, 0, 0, 0.06),\n    0 0 0 0.5px rgba(255, 255, 255, 0.1) inset,\n    0 0 20px rgba(255, 255, 255, 0.12) inset;\n  --glass-shadow-sm: \n    0 2px 8px rgba(0, 0, 0, 0.06),\n    0 1px 2px rgba(0, 0, 0, 0.03),\n    0 0 0 0.5px rgba(255, 255, 255, 0.06) inset,\n    0 0 8px rgba(255, 255, 255, 0.08) inset;\n  --gradient: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);\n  /* Apple-standard blur values - moderate blur */\n  --blur: 10px;\n  --blur-sm: 10px;\n  --blur-lg: 10px;\n  \n  /* Frosted glass variant - Enhanced opacity and stronger blur */\n  --glass-frosted-bg: linear-gradient(135deg, \n    rgba(255, 255, 255, 0.25) 0%, \n    rgba(255, 255, 255, 0.22) 25%,\n    rgba(240, 248, 255, 0.23) 50%,\n    rgba(255, 255, 255, 0.21) 75%,\n    rgba(230, 240, 255, 0.22) 100%\n  );\n  --glass-frosted-border: rgba(255, 255, 255, 0.3);\n  --glass-frosted-shadow: \n    0 8px 32px rgba(0, 0, 0, 0.12),\n    0 2px 8px rgba(0, 0, 0, 0.08),\n    0 0 0 0.5px rgba(255, 255, 255, 0.15) inset,\n    0 0 20px rgba(255, 255, 255, 0.18) inset;\n  --blur-frosted: 25px;\n  \n  /* Fluted glass variant - Vertical ridges pattern */\n  --glass-fluted-pattern: repeating-linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0.08) 0px,\n    rgba(255, 255, 255, 0.15) 4px,\n    rgba(255, 255, 255, 0.08) 8px,\n    rgba(255, 255, 255, 0.02) 10px,\n    rgba(255, 255, 255, 0.08) 12px\n  );\n  \n  /* Crystal glass variant - Clear glass with highlights and glow */\n  --glass-crystal-bg: rgba(255, 255, 255, 0.3);\n  --glass-crystal-border: rgba(255, 255, 255, 0.3);\n  --glass-crystal-shadow: \n    0 0 20px rgba(0, 0, 0, 0.2),\n    0 0 30px rgba(255, 255, 255, 0.1);\n  --glass-crystal-shadow-hover: \n    0 0 25px rgba(0, 0, 0, 0.3),\n    0 0 35px rgba(255, 255, 255, 0.15);\n  --blur-crystal: 2px;\n}\n\n.dark {\n  /* Apple-standard glassmorphism for dark mode - Very subtle and refined */\n  /* Very low opacity for Apple's standard glass effect in dark mode */\n  --glass-bg: linear-gradient(135deg, \n    rgba(255, 255, 255, 0.08) 0%, \n    rgba(255, 255, 255, 0.06) 25%,\n    rgba(240, 248, 255, 0.07) 50%,\n    rgba(255, 255, 255, 0.05) 75%,\n    rgba(230, 240, 255, 0.06) 100%\n  );\n  /* Very subtle white border - Apple standard */\n  --glass-border: rgba(255, 255, 255, 0.15);\n  /* Minimal shadows with subtle inner glow - Apple standard for dark mode */\n  --glass-shadow: \n    0 4px 16px rgba(0, 0, 0, 0.3),\n    0 1px 4px rgba(0, 0, 0, 0.15),\n    0 0 0 0.5px rgba(255, 255, 255, 0.12) inset,\n    0 0 12px rgba(255, 255, 255, 0.15) inset;\n  --glass-shadow-lg: \n    0 8px 32px rgba(0, 0, 0, 0.4),\n    0 2px 8px rgba(0, 0, 0, 0.2),\n    0 0 0 0.5px rgba(255, 255, 255, 0.15) inset,\n    0 0 20px rgba(255, 255, 255, 0.18) inset;\n  --glass-shadow-sm: \n    0 2px 8px rgba(0, 0, 0, 0.25),\n    0 1px 2px rgba(0, 0, 0, 0.12),\n    0 0 0 0.5px rgba(255, 255, 255, 0.1) inset,\n    0 0 8px rgba(255, 255, 255, 0.12) inset;\n  \n  /* Frosted glass variant - Enhanced opacity and stronger blur for dark mode */\n  --glass-frosted-bg: linear-gradient(135deg, \n    rgba(255, 255, 255, 0.15) 0%, \n    rgba(255, 255, 255, 0.12) 25%,\n    rgba(240, 248, 255, 0.13) 50%,\n    rgba(255, 255, 255, 0.11) 75%,\n    rgba(230, 240, 255, 0.12) 100%\n  );\n  --glass-frosted-border: rgba(255, 255, 255, 0.25);\n  --glass-frosted-shadow: \n    0 8px 32px rgba(0, 0, 0, 0.5),\n    0 2px 8px rgba(0, 0, 0, 0.3),\n    0 0 0 0.5px rgba(255, 255, 255, 0.2) inset,\n    0 0 20px rgba(255, 255, 255, 0.22) inset;\n  \n  /* Fluted glass variant - Vertical ridges pattern for dark mode */\n  --glass-fluted-pattern: repeating-linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0.05) 0px,\n    rgba(255, 255, 255, 0.12) 4px,\n    rgba(255, 255, 255, 0.05) 8px,\n    rgba(255, 255, 255, 0.01) 10px,\n    rgba(255, 255, 255, 0.05) 12px\n  );\n  \n  /* Crystal glass variant - Clear glass with highlights and glow for dark mode */\n  --glass-crystal-bg: rgba(255, 255, 255, 0.1);\n  --glass-crystal-border: rgba(255, 255, 255, 0.3);\n  --glass-crystal-shadow: \n    0 0 20px rgba(0, 0, 0, 0.4),\n    0 0 30px rgba(255, 255, 255, 0.15);\n  --glass-crystal-shadow-hover: \n    0 0 25px rgba(0, 0, 0, 0.5),\n    0 0 35px rgba(255, 255, 255, 0.2);\n  \n  /* Base colors - Apple-style white text */\n  --background: transparent;\n  --foreground: oklch(1 0 0); /* White - Apple-style */\n  --card: transparent;\n  --card-foreground: oklch(1 0 0); /* White - Apple-style */\n  --popover: transparent;\n  --popover-foreground: oklch(1 0 0); /* White - Apple-style */\n  \n  /* Primary colors - Apple-style white text */\n  --primary: oklch(0.7 0.15 250); /* Light blue */\n  --primary-foreground: oklch(1 0 0); /* White - Apple-style */\n  \n  /* Secondary colors - Apple-style white text */\n  --secondary: oklch(0.25 0 0); /* Dark gray */\n  --secondary-foreground: oklch(1 0 0); /* White - Apple-style */\n  \n  /* Muted colors - Apple-style white text */\n  --muted: oklch(0.18 0 0); /* Darker gray - darker shade to avoid glass effect override */\n  --muted-foreground: oklch(1 0 0); /* White - Apple-style */\n  \n  /* Accent colors - Apple-style white text */\n  --accent: oklch(0.25 0 0); /* Dark gray */\n  --accent-foreground: oklch(1 0 0); /* White - Apple-style */\n  \n  /* Destructive colors - WCAG AA compliant (4.5:1 contrast) */\n  --destructive: oklch(0.65 0.22 25); /* Light red - 4.5:1 with dark background */\n  --destructive-foreground: oklch(0.12 0 0); /* Near black text on red */\n  \n  /* Border and input - WCAG AA compliant (3:1 for UI components) */\n  --border: oklch(0.3 0 0); /* Medium gray - 3:1 contrast */\n  --input: oklch(0.25 0 0); /* Dark gray - 3:1 contrast */\n  --ring: oklch(0.6 0.2 250); /* Light blue ring - 3:1 contrast */\n  \n  /* Chart colors - WCAG AA compliant */\n  --chart-1: oklch(0.65 0.2 250); /* Light blue */\n  --chart-2: oklch(0.7 0.15 150); /* Light green */\n  --chart-3: oklch(0.75 0.2 50); /* Light yellow */\n  --chart-4: oklch(0.7 0.2 300); /* Light purple */\n  --chart-5: oklch(0.68 0.2 20); /* Light orange */\n  \n  /* Sidebar colors - Apple-style white text */\n  --sidebar: oklch(0.18 0 0); /* Dark gray */\n  --sidebar-foreground: oklch(1 0 0); /* White - Apple-style */\n  --sidebar-primary: oklch(0.7 0.15 250); /* Light blue */\n  --sidebar-primary-foreground: oklch(1 0 0); /* White - Apple-style */\n  --sidebar-accent: oklch(0.25 0 0); /* Dark gray */\n  --sidebar-accent-foreground: oklch(1 0 0); /* White - Apple-style */\n  --sidebar-border: oklch(0.3 0 0); /* Medium gray - 3:1 contrast */\n  --sidebar-ring: oklch(0.6 0.2 250); /* Light blue ring - 3:1 contrast */\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\nbody {\n  @apply text-foreground;\n  background-color: transparent;\n  }\n}\n\n@layer utilities {\n  /* Apple-standard glass utility - Very subtle and refined */\n  /* This creates Apple's standard glassmorphism with moderate blur */\n  .glass-bg {\n    /* Low opacity gradient background - Apple standard */\n    background-image: var(--glass-bg);\n    background-color: transparent;\n    /* Moderate backdrop blur - Apple standard (20px) */\n    backdrop-filter: blur(var(--blur)) saturate(180%);\n    -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);\n    /* Very subtle white border - Apple standard */\n    border: 0.5px solid var(--glass-border);\n    /* Minimal shadow with subtle inner glow - Apple standard */\n    box-shadow: var(--glass-shadow);\n  }\n  \n  /* Frosted glass utility - Enhanced blur and higher opacity */\n  .glass-frosted {\n    background-image: var(--glass-frosted-bg) !important;\n    background-color: transparent !important;\n    /* Stronger backdrop blur for frosted effect */\n    backdrop-filter: blur(var(--blur-frosted)) saturate(200%) !important;\n    -webkit-backdrop-filter: blur(var(--blur-frosted)) saturate(200%) !important;\n    /* More pronounced border */\n    border: 0.5px solid var(--glass-frosted-border) !important;\n    /* Enhanced shadow for depth */\n    box-shadow: var(--glass-frosted-shadow) !important;\n  }\n  \n  /* Fluted glass utility - Vertical ridges with glass effect */\n  .glass-fluted {\n    /* Base glass background combined with fluted pattern */\n    background-image: var(--glass-fluted-pattern), var(--glass-bg) !important;\n    background-color: transparent !important;\n    /* Moderate backdrop blur like standard glass */\n    backdrop-filter: blur(var(--blur)) saturate(180%) !important;\n    -webkit-backdrop-filter: blur(var(--blur)) saturate(180%) !important;\n    /* Standard glass border */\n    border: 0.5px solid var(--glass-border) !important;\n    /* Standard glass shadow */\n    box-shadow: var(--glass-shadow) !important;\n  }\n  \n  /* Crystal glass utility - Clear glass with highlights and glow */\n  .glass-crystal {\n    position: relative;\n    background-color: var(--glass-crystal-bg) !important;\n    /* Minimal backdrop blur for clarity */\n    backdrop-filter: blur(var(--blur-crystal)) !important;\n    -webkit-backdrop-filter: blur(var(--blur-crystal)) !important;\n    border: 1px solid var(--glass-crystal-border) !important;\n    box-shadow: var(--glass-crystal-shadow) !important;\n    transition: all 0.3s ease !important;\n    /* Top highlight gradient */\n    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), transparent 50%) !important;\n    background-size: 200% 200% !important;\n  }\n  \n  .glass-crystal::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);\n    opacity: 0.7;\n    pointer-events: none;\n    height: 30%;\n  }\n  \n  .glass-crystal::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.2), transparent 70%);\n    opacity: 0.8;\n    pointer-events: none;\n  }\n  \n  .glass-crystal:hover {\n    box-shadow: var(--glass-crystal-shadow-hover) !important;\n    background-position: 100% 100% !important;\n  }\n\n  /* Ensure react-day-picker doesn't override glass effect */\n  .glass-bg[class*=\"rdp\"] {\n    background-color: transparent !important;\n  }\n  \n  .glass-bg .rdp {\n    background-color: transparent !important;\n  }\n  \n  .glass-bg .rdp-month {\n    background-color: transparent !important;\n  }\n}\n\n@keyframes shimmer {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Sonner Toast Notifications - Glass Effect Overrides */\n[data-sonner-toast] {\n  background: var(--glass-bg) !important;\n  backdrop-filter: blur(var(--blur)) !important;\n  -webkit-backdrop-filter: blur(var(--blur)) !important;\n  border: 1px solid var(--glass-border) !important;\n  box-shadow: var(--glass-shadow-lg) !important;\n  color: var(--foreground) !important;\n}\n\n[data-sonner-toast][data-type=\"success\"] {\n  border-color: rgba(34, 197, 94, 0.3) !important;\n}\n\n[data-sonner-toast][data-type=\"error\"] {\n  border-color: rgba(239, 68, 68, 0.3) !important;\n}\n\n[data-sonner-toast][data-type=\"warning\"] {\n  border-color: rgba(234, 179, 8, 0.3) !important;\n}\n\n[data-sonner-toast][data-type=\"info\"] {\n  border-color: rgba(59, 130, 246, 0.3) !important;\n}\n\n/* Toast description text */\n[data-sonner-toast] [data-description] {\n  color: var(--muted-foreground) !important;\n}\n\n/* Toast action buttons - Glass styled */\n[data-sonner-toast] [data-button] {\n  background: var(--glass-bg) !important;\n  backdrop-filter: blur(var(--blur-sm)) !important;\n  -webkit-backdrop-filter: blur(var(--blur-sm)) !important;\n  border: 1px solid var(--glass-border) !important;\n  color: var(--foreground) !important;\n  transition: opacity 0.2s ease !important;\n}\n\n[data-sonner-toast] [data-button]:hover {\n  opacity: 0.9 !important;\n}\n\n/* Toast cancel button */\n[data-sonner-toast] [data-cancel] {\n  background: var(--glass-bg) !important;\n  backdrop-filter: blur(var(--blur-sm)) !important;\n  -webkit-backdrop-filter: blur(var(--blur-sm)) !important;\n  border: 1px solid var(--glass-border) !important;\n  color: var(--muted-foreground) !important;\n}\n\n[data-sonner-toast] [data-cancel]:hover {\n  opacity: 0.9 !important;\n}\n\n/* Toast close button */\n[data-sonner-toast] [data-close-button] {\n  background: var(--glass-bg) !important;\n  backdrop-filter: blur(var(--blur-sm)) !important;\n  -webkit-backdrop-filter: blur(var(--blur-sm)) !important;\n  border: 1px solid var(--glass-border) !important;\n  color: var(--foreground) !important;\n}\n\n[data-sonner-toast] [data-close-button]:hover {\n  opacity: 0.9 !important;\n}",
      "type": "registry:style",
      "target": "app/globals.css"
    },
    {
      "path": "components/ui/glass/button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button as BaseButton } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport type { GlassCustomization } from \"@/lib/glass-utils\"\nimport { hoverEffects, type HoverEffect } from \"@/lib/hover-effects\"\n\nexport interface ButtonProps\n  extends Omit<React.ComponentProps<typeof BaseButton>, \"glass\"> {\n  effect?: HoverEffect\n  glass?: GlassCustomization\n}\n\n/**\n * Glass UI Button - A beautifully designed button component with glassy effects\n * Built on top of the base Button component with enhanced visual effects\n * \n * @example\n * ```tsx\n * <Button \n *   glass={{\n *     color: \"rgba(59, 130, 246, 0.2)\",\n *     blur: 25,\n *     outline: \"rgba(59, 130, 246, 0.4)\"\n *   }}\n * >\n *   Click me\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(({ className, effect = \"glow\", variant = \"glass\", glass, ...props }, ref) => {\n  return (\n    <BaseButton\n      ref={ref}\n      variant={variant}\n      glass={glass}\n      className={cn(\n        \"relative overflow-hidden\",\n        hoverEffects({ hover: effect }),\n        className\n      )}\n      {...props}\n    />\n  )\n})\nButton.displayName = \"Button\"\n\n",
      "type": "registry:component",
      "target": "components/ui/glass/button.tsx"
    }
  ]
}