/* ==========================================================================
   Shadows & Elevation - Wholesum Design System
   Standardized elevation levels and interactive shadow utilities.
   Version: 1.0 | Phase 6 of CSS Unification
   ========================================================================== */

/* ===== ELEVATION SYSTEM ===== */
/* Subtle depth — dividers, input focus */
.elevation-xs { box-shadow: var(--shadow-xs); }

/* Cards, buttons, interactive elements */
.elevation-sm { box-shadow: var(--shadow-sm); }

/* Dropdowns, tooltips */
.elevation-md { box-shadow: var(--shadow-md); }

/* Modals, floating elements */
.elevation-lg { box-shadow: var(--shadow-lg); }

/* Top-level overlays */
.elevation-xl { box-shadow: var(--shadow-xl); }

/* Maximum emphasis */
.elevation-2xl { box-shadow: var(--shadow-2xl); }

.elevation-none { box-shadow: none; }


/* ===== SEMANTIC ELEVATION ===== */
/* Use these for specific UI patterns */

.elevation-hover { box-shadow: var(--shadow-hover); }
.elevation-dropdown { box-shadow: var(--shadow-dropdown); }
.elevation-modal { box-shadow: var(--shadow-modal); }
.elevation-drawer { box-shadow: var(--shadow-drawer); }


/* ===== INTERACTIVE SHADOWS ===== */
/* Hover effect — lift card with shadow */
.hover-elevation {
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hover-elevation:hover {
  box-shadow: var(--shadow-hover);
}

.hover-elevation-lg:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}


/* ===== FOCUS SHADOW (accessibility) ===== */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}