/**
 * CSS Custom Filters
 * 
 * A comprehensive collection of modern utility classes and variables 
 * for CSS filters and backdrop-filters.
 */

:root {
    /* Subtle Utility Defaults */
    --filter-blur-soft: blur(4px);
    --filter-blur-medium: blur(8px);
    --filter-blur-heavy: blur(12px);

    --filter-brightness-dim: brightness(0.85);
    --filter-brightness-bright: brightness(1.15);

    --filter-contrast-high: contrast(1.2);
    --filter-contrast-low: contrast(0.8);

    --filter-grayscale-subtle: grayscale(50%);
    --filter-grayscale-full: grayscale(100%);

    --filter-sepia-vintage: sepia(0.4);

    --filter-saturate-vibrant: saturate(1.5);

    --filter-hue-rotate-alt: hue-rotate(90deg);

    --filter-invert-full: invert(1);

    --filter-opacity-low: opacity(0.2);
    --filter-opacity-medium: opacity(0.5);
    --filter-opacity-high: opacity(0.8);
}

/* -------------------------------------------------------------------------- */
/* Utility Classes: Standard Filters
/* -------------------------------------------------------------------------- */

.filter-none {
    filter: none;
}

.filter-blur {
    filter: var(--filter-blur-soft);
}

.filter-blur-md {
    filter: var(--filter-blur-medium);
}

.filter-blur-lg {
    filter: var(--filter-blur-heavy);
}

.filter-brightness-dim {
    filter: var(--filter-brightness-dim);
}

.filter-brightness-bright {
    filter: var(--filter-brightness-bright);
}

.filter-contrast {
    filter: var(--filter-contrast-high);
}

.filter-grayscale {
    filter: var(--filter-grayscale-full);
}

.filter-grayscale-subtle {
    filter: var(--filter-grayscale-subtle);
}

.filter-sepia {
    filter: var(--filter-sepia-vintage);
}

.filter-saturate {
    filter: var(--filter-saturate-vibrant);
}

.filter-hue {
    filter: var(--filter-hue-rotate-alt);
}

.filter-invert {
    filter: var(--filter-invert-full);
}

.filter-opacity-xs {
    filter: var(--filter-opacity-low);
}

.filter-opacity-md {
    filter: var(--filter-opacity-medium);
}

.filter-opacity-lg {
    filter: var(--filter-opacity-high);
}

/* Combined common combinations */
.filter-glass-effect {
    filter: brightness(1.1) contrast(1.1);
}

/* -------------------------------------------------------------------------- */
/* Utility Classes: Backdrop Filters (Modern Glassmorphism)
/* -------------------------------------------------------------------------- */

.backdrop-blur {
    backdrop-filter: var(--filter-blur-soft);
    -webkit-backdrop-filter: var(--filter-blur-soft);
}

.backdrop-blur-md {
    backdrop-filter: var(--filter-blur-medium);
    -webkit-backdrop-filter: var(--filter-blur-medium);
}

.backdrop-blur-lg {
    backdrop-filter: var(--filter-blur-heavy);
    -webkit-backdrop-filter: var(--filter-blur-heavy);
}

.backdrop-grayscale {
    backdrop-filter: grayscale(100%);
    -webkit-backdrop-filter: grayscale(100%);
}

/* Specialized Backdrop Combinations */
.glass-light {
    backdrop-filter: blur(10px) brightness(1.2);
    -webkit-backdrop-filter: blur(10px) brightness(1.2);
}

.glass-dark {
    backdrop-filter: blur(10px) brightness(0.8);
    -webkit-backdrop-filter: blur(10px) brightness(0.8);
}