/* Material Design 3 Elevation System */
/* Elevation levels from 0 (no shadow) to 5 (highest) */

:root {
  /* ============================================
     Elevation Tokens
     ============================================ */

  /* Level 0 - No elevation */
  --md-sys-elevation-level0: none;

  /* Level 1 - Minimal elevation (cards at rest) */
  --md-sys-elevation-level1:
    0px 1px 2px 0px rgba(0, 0, 0, 0.05),
    0px 1px 3px 1px rgba(0, 0, 0, 0.05);

  /* Level 2 - Low elevation (raised cards, buttons) */
  --md-sys-elevation-level2:
    0px 1px 2px 0px rgba(0, 0, 0, 0.05),
    0px 2px 6px 2px rgba(0, 0, 0, 0.08);

  /* Level 3 - Medium elevation (dialogs, menus) */
  --md-sys-elevation-level3:
    0px 4px 8px 3px rgba(0, 0, 0, 0.08),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);

  /* Level 4 - High elevation (navigation drawer) */
  --md-sys-elevation-level4:
    0px 6px 10px 4px rgba(0, 0, 0, 0.08),
    0px 2px 3px 0px rgba(0, 0, 0, 0.12);

  /* Level 5 - Highest elevation (modal dialogs) */
  --md-sys-elevation-level5:
    0px 8px 12px 6px rgba(0, 0, 0, 0.08),
    0px 4px 4px 0px rgba(0, 0, 0, 0.12);

  /* ============================================
     Legacy Shadow Mappings
     ============================================ */
  --shadow-sm: var(--md-sys-elevation-level1);
  --shadow-md: var(--md-sys-elevation-level3);
  --shadow-lg: var(--md-sys-elevation-level5);
}

/* ============================================
   Utility Classes
   ============================================ */

.elevation-0 {
  box-shadow: var(--md-sys-elevation-level0);
}

.elevation-1 {
  box-shadow: var(--md-sys-elevation-level1);
}

.elevation-2 {
  box-shadow: var(--md-sys-elevation-level2);
}

.elevation-3 {
  box-shadow: var(--md-sys-elevation-level3);
}

.elevation-4 {
  box-shadow: var(--md-sys-elevation-level4);
}

.elevation-5 {
  box-shadow: var(--md-sys-elevation-level5);
}

/* ============================================
   Component-Specific Elevations
   ============================================ */

/* Cards at rest */
.md-card {
  box-shadow: var(--md-sys-elevation-level1);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-card:hover {
  box-shadow: var(--md-sys-elevation-level2);
}

/* Buttons */
.md-button-filled {
  box-shadow: var(--md-sys-elevation-level0);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-button-filled:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.md-button-filled:active {
  box-shadow: var(--md-sys-elevation-level0);
}

/* Floating Action Button */
.md-fab {
  box-shadow: var(--md-sys-elevation-level3);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-fab:hover {
  box-shadow: var(--md-sys-elevation-level4);
}

.md-fab:active {
  box-shadow: var(--md-sys-elevation-level3);
}

/* App Bar / Header */
.md-app-bar {
  box-shadow: var(--md-sys-elevation-level2);
}

/* Navigation Drawer */
.md-navigation-drawer {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-navigation-drawer.modal {
  box-shadow: var(--md-sys-elevation-level1);
}

/* Dialog */
.md-dialog {
  box-shadow: var(--md-sys-elevation-level3);
}

/* Menu / Dropdown */
.md-menu,
.md-dropdown {
  box-shadow: var(--md-sys-elevation-level2);
}

/* Modal */
.md-modal {
  box-shadow: var(--md-sys-elevation-level5);
}