/* ===========================================
   Visual Effects — Applied via CSS custom properties
   Controlled by theme picker sliders
   =========================================== */

:root {
    --fx-frost: 15;  /* Frosted glow intensity (0-100) */
}

/* === Frosted Glow Effect ===
   Combines:
   - backdrop-filter blur for frosted glass
   - Colored glow (box-shadow) using theme primary
   - Luminous top-border highlight
   - Slightly translucent background
*/

/* Cards */
.project-card,
.overview-card,
.content-card,
.section-card,
.detail-card,
.stat-card,
.key-stat,
.chart-card,
.incident-card,
.user-header-card,
.content-section {
    --_frost: var(--fx-frost, 0);
    transition:
        box-shadow 0.3s ease,
        backdrop-filter 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

/* Frost > 0: apply the effect */
@supports (backdrop-filter: blur(1px)) {
    .project-card,
    .overview-card,
    .content-card,
    .section-card,
    .detail-card,
    .stat-card,
    .key-stat,
    .chart-card,
    .incident-card,
    .user-header-card,
    .content-section {
        backdrop-filter: blur(calc(var(--_frost) * 0.12px));
        background-color: color-mix(
            in srgb,
            var(--c-bg),
            transparent calc(var(--_frost) * 0.35%)
        );
        box-shadow:
            /* Outer glow using primary color */
            0 0 calc(var(--_frost) * 0.3px) calc(var(--_frost) * 0.05px)
                color-mix(in srgb, var(--c-primary), transparent calc(100% - var(--_frost) * 0.6%)),
            /* Soft spread glow */
            0 0 calc(var(--_frost) * 0.6px) calc(var(--_frost) * 0.15px)
                color-mix(in srgb, var(--c-primary), transparent calc(100% - var(--_frost) * 0.3%)),
            /* Keep existing shadow */
            var(--shadow-sm);
        border-color: color-mix(
            in srgb,
            var(--c-primary),
            var(--border-light) calc(100% - var(--_frost) * 0.4%)
        );
    }

    /* Slightly brighter glow on hover */
    .project-card:hover,
    .content-card:hover,
    .stat-card:hover,
    .key-stat:hover,
    .content-section:hover {
        box-shadow:
            0 0 calc(var(--_frost) * 0.45px) calc(var(--_frost) * 0.08px)
                color-mix(in srgb, var(--c-primary), transparent calc(100% - var(--_frost) * 0.7%)),
            0 0 calc(var(--_frost) * 0.8px) calc(var(--_frost) * 0.2px)
                color-mix(in srgb, var(--c-primary), transparent calc(100% - var(--_frost) * 0.4%)),
            var(--shadow-md);
    }
}

/* Buttons */
.btn-primary,
.btn-add,
.btn-save,
.header-project-btn,
.sidebar-project-btn {
    --_frost: var(--fx-frost, 0);
    transition:
        box-shadow 0.3s ease,
        filter 0.3s ease;
    box-shadow:
        0 0 calc(var(--_frost) * 0.25px) calc(var(--_frost) * 0.04px)
            color-mix(in srgb, var(--c-primary), transparent calc(100% - var(--_frost) * 0.5%));
    filter: brightness(calc(1 + var(--_frost) * 0.001));
}