// ============================================================================
// Shadow Mixins and Utilities
// Box shadows for elevation and depth
// ============================================================================

// Mixin: No shadow
@mixin shadow--none {
    box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -webkit-box-shadow: none;
}

// Mixin: Elevation shadows
@mixin shadow--sm {
    box-shadow: 0 q(1) q(2) 0 rgba(0, 0, 0, 0.05);
}

@mixin shadow--md {
    box-shadow:
        0 q(4) q(6) q(-1) rgba(0, 0, 0, 0.1),
        0 q(2) q(4) q(-2) rgba(0, 0, 0, 0.1);
}

@mixin shadow--lg {
    box-shadow:
        0 q(10) q(15) q(-3) rgba(0, 0, 0, 0.1),
        0 q(4) q(6) q(-4) rgba(0, 0, 0, 0.1);
}

@mixin shadow--xl {
    box-shadow:
        0 q(20) q(25) q(-5) rgba(0, 0, 0, 0.1),
        0 q(8) q(10) q(-6) rgba(0, 0, 0, 0.1);
}

@mixin shadow--2xl {
    box-shadow: 0 q(25) q(50) q(-12) rgba(0, 0, 0, 0.25);
}

// Mixin: Inset shadow
@mixin shadow--inset {
    box-shadow: inset 0 q(2) q(4) 0 rgba(0, 0, 0, 0.05);
}

// Mixin: Directional shadows
@mixin shadow--top {
    box-shadow: 0 q(-4) q(6) q(-1) rgba(0, 0, 0, 0.1);
}

@mixin shadow--bottom {
    box-shadow: 0 q(4) q(6) q(-1) rgba(0, 0, 0, 0.1);
}

@mixin shadow--left {
    box-shadow: q(-4) 0 q(6) q(-1) rgba(0, 0, 0, 0.1);
}

@mixin shadow--right {
    box-shadow: q(4) 0 q(6) q(-1) rgba(0, 0, 0, 0.1);
}

// Mixin: Text shadows
@mixin text_shadow--none {
    text-shadow: none;
}

@mixin text_shadow--sm {
    text-shadow: 0 q(1) q(2) rgba(0, 0, 0, 0.1);
}

@mixin text_shadow--md {
    text-shadow: 0 q(2) q(4) rgba(0, 0, 0, 0.1);
}

@mixin text_shadow--lg {
    text-shadow:
        0 q(4) q(8) rgba(0, 0, 0, 0.12),
        0 q(2) q(4) rgba(0, 0, 0, 0.08);
}