// Effects — opacity, shadows, rings, filters, backdrop

// Opacity
.opacity-0 { opacity: 0 }
.opacity-5 { opacity: 0.05 }
.opacity-10 { opacity: 0.1 }
.opacity-20 { opacity: 0.2 }
.opacity-25 { opacity: 0.25 }
.opacity-30 { opacity: 0.3 }
.opacity-40 { opacity: 0.4 }
.opacity-50 { opacity: 0.5 }
.opacity-60 { opacity: 0.6 }
.opacity-70 { opacity: 0.7 }
.opacity-75 { opacity: 0.75 }
.opacity-80 { opacity: 0.8 }
.opacity-90 { opacity: 0.9 }
.opacity-100 { opacity: 1 }

// Shadows
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) }
.shadow-none { box-shadow: none }

// Focus rings
.ring-0 { box-shadow: 0 0 0 0px var(--ring) }
.ring-1 { box-shadow: 0 0 0 1px var(--ring) }
.ring-2 { box-shadow: 0 0 0 2px var(--ring) }
.ring-4 { box-shadow: 0 0 0 4px var(--ring) }
.ring-primary { --ring: var(--primary) }
.ring-accent { --ring: var(--accent) }
.ring-destructive { --ring: var(--destructive) }
.ring-ring { --ring: var(--ring) }
.ring-inset { --tw-ring-inset: inset }
.ring-offset-2 { --tw-ring-offset-width: 2px }
.ring-offset-background { --tw-ring-offset-color: var(--background) }

// Backdrop filters
.backdrop-blur-none { backdrop-filter: none }
.backdrop-blur-sm { backdrop-filter: blur(4px) }
.backdrop-blur { backdrop-filter: blur(8px) }
.backdrop-blur-md { backdrop-filter: blur(12px) }
.backdrop-blur-lg { backdrop-filter: blur(16px) }
.backdrop-blur-xl { backdrop-filter: blur(24px) }
.backdrop-blur-2xl { backdrop-filter: blur(40px) }
.backdrop-blur-3xl { backdrop-filter: blur(64px) }

// Filters
.blur-none { filter: none }
.blur-sm { filter: blur(4px) }
.blur { filter: blur(8px) }
.blur-md { filter: blur(12px) }
.blur-lg { filter: blur(16px) }
.grayscale { filter: grayscale(100%) }
.grayscale-0 { filter: grayscale(0) }
.invert { filter: invert(100%) }
.invert-0 { filter: invert(0) }