/**
 * Advanced Shadow System — Colored Shadows
 *
 * Brand-colored shadow presets using oklch theme variables.
 */

/* ==========================================================================
   Brand (Primary Color)
   ========================================================================== */

.shadow-fx-brand {
    box-shadow:
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(14px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 30%, transparent),
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(6px * var(--shadow-fx-scale, 1)) calc(-2px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 15%, transparent);
}

.shadow-fx-sm.shadow-fx-brand {
    box-shadow:
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(8px * var(--shadow-fx-scale, 1)) calc(-2px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 25%, transparent),
        0 calc(1px * var(--shadow-fx-scale, 1)) calc(3px * var(--shadow-fx-scale, 1)) calc(-1px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 10%, transparent);
}

.shadow-fx-lg.shadow-fx-brand {
    box-shadow:
        0 calc(8px * var(--shadow-fx-scale, 1)) calc(25px * var(--shadow-fx-scale, 1)) calc(-5px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 35%, transparent),
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(10px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 20%, transparent);
}

.shadow-fx-hover.shadow-fx-brand::after {
    box-shadow:
        0 calc(12px * var(--shadow-fx-scale, 1)) calc(35px * var(--shadow-fx-scale, 1)) calc(-5px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 40%, transparent),
        0 calc(6px * var(--shadow-fx-scale, 1)) calc(15px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-primary) 25%, transparent);
}

/* ==========================================================================
   Brand Secondary
   ========================================================================== */

.shadow-fx-brand-secondary {
    box-shadow:
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(14px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-secondary) 30%, transparent),
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(6px * var(--shadow-fx-scale, 1)) calc(-2px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-secondary) 15%, transparent);
}

.shadow-fx-sm.shadow-fx-brand-secondary {
    box-shadow:
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(8px * var(--shadow-fx-scale, 1)) calc(-2px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-secondary) 25%, transparent),
        0 calc(1px * var(--shadow-fx-scale, 1)) calc(3px * var(--shadow-fx-scale, 1)) calc(-1px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-secondary) 10%, transparent);
}

.shadow-fx-lg.shadow-fx-brand-secondary {
    box-shadow:
        0 calc(8px * var(--shadow-fx-scale, 1)) calc(25px * var(--shadow-fx-scale, 1)) calc(-5px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-secondary) 35%, transparent),
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(10px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-secondary) 20%, transparent);
}

.shadow-fx-hover.shadow-fx-brand-secondary::after {
    box-shadow:
        0 calc(12px * var(--shadow-fx-scale, 1)) calc(35px * var(--shadow-fx-scale, 1)) calc(-5px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-secondary) 40%, transparent),
        0 calc(6px * var(--shadow-fx-scale, 1)) calc(15px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-secondary) 25%, transparent);
}

/* ==========================================================================
   Brand Accent
   ========================================================================== */

.shadow-fx-brand-accent {
    box-shadow:
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(14px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 30%, transparent),
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(6px * var(--shadow-fx-scale, 1)) calc(-2px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 15%, transparent);
}

.shadow-fx-sm.shadow-fx-brand-accent {
    box-shadow:
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(8px * var(--shadow-fx-scale, 1)) calc(-2px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 25%, transparent),
        0 calc(1px * var(--shadow-fx-scale, 1)) calc(3px * var(--shadow-fx-scale, 1)) calc(-1px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 10%, transparent);
}

.shadow-fx-lg.shadow-fx-brand-accent {
    box-shadow:
        0 calc(8px * var(--shadow-fx-scale, 1)) calc(25px * var(--shadow-fx-scale, 1)) calc(-5px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 35%, transparent),
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(10px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 20%, transparent);
}

.shadow-fx-hover.shadow-fx-brand-accent::after {
    box-shadow:
        0 calc(12px * var(--shadow-fx-scale, 1)) calc(35px * var(--shadow-fx-scale, 1)) calc(-5px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 40%, transparent),
        0 calc(6px * var(--shadow-fx-scale, 1)) calc(15px * var(--shadow-fx-scale, 1)) calc(-3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-accent) 25%, transparent);
}

/* ==========================================================================
   Elevation Stripe — refined multi-layer shadow
   ========================================================================== */

.shadow-fx-elevation-stripe {
    box-shadow:
        0 calc(1px * var(--shadow-fx-scale, 1)) calc(2px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 6%, transparent),
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(4px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 6%, transparent),
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(8px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

.shadow-fx-sm.shadow-fx-elevation-stripe {
    box-shadow:
        0 calc(1px * var(--shadow-fx-scale, 1)) calc(1px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 4%, transparent),
        0 calc(1px * var(--shadow-fx-scale, 1)) calc(3px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 4%, transparent);
}

.shadow-fx-lg.shadow-fx-elevation-stripe {
    box-shadow:
        0 calc(1px * var(--shadow-fx-scale, 1)) calc(2px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 6%, transparent),
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(4px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 6%, transparent),
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(8px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 6%, transparent),
        0 calc(8px * var(--shadow-fx-scale, 1)) calc(16px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 6%, transparent);
}

.shadow-fx-hover.shadow-fx-elevation-stripe::after {
    box-shadow:
        0 calc(2px * var(--shadow-fx-scale, 1)) calc(4px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 8%, transparent),
        0 calc(4px * var(--shadow-fx-scale, 1)) calc(8px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 8%, transparent),
        0 calc(8px * var(--shadow-fx-scale, 1)) calc(16px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 8%, transparent),
        0 calc(16px * var(--shadow-fx-scale, 1)) calc(32px * var(--shadow-fx-scale, 1)) color-mix(in oklch, var(--color-base-content) 6%, transparent);
}