/* ====================== */
/* BOX-SHADOW SYSTEM     */
/* ====================== */
:root {
    /* Базовые тени (настроите под ваш дизайн) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Акцентные тени (например, для кнопок) */
    --shadow-primary: 0 4px 6px rgba(59, 130, 246, 0.3);
    --shadow-danger: 0 4px 6px rgba(220, 38, 38, 0.3);
}

/* ---------------------- */
/* Утилитарные классы     */
/* ---------------------- */
.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }
.shadow-lg    { box-shadow: var(--shadow-lg); }
.shadow-xl    { box-shadow: var(--shadow-xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none  { box-shadow: none; }

/* Акцентные тени */
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-danger  { box-shadow: var(--shadow-danger); }

/* ---------------------- */
/* Ховер-эффекты         */
/* ---------------------- */
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
.focus\:shadow-md:focus { box-shadow: var(--shadow-md); }

/* ---------------------- */
/* Адаптивность          */
/* ---------------------- */
@media (max-width: 768px) {
    .mobile\:shadow-sm { box-shadow: var(--shadow-sm); }
}