/**
 * Semantic Z-Index Utilities
 * 
 * Provides consistent layering across the application.
 * These classes match the tokens defined in tailwind.config.cjs
 * 
 * Layer hierarchy (low to high):
 * base < overlay < system < modal < toast < header < dropdown
 */

/* Base layer - default content */
.z-base {
  z-index: 0 !important;
}

/* Overlay layer - fullscreen overlays like My Training */
.z-overlay {
  z-index: 100 !important;
}

/* System layer - system modals like Tutorial */
.z-system {
  z-index: 120 !important;
}

/* Modal layer - content modals (Lesson, Editor, Pickers) */
.z-modal {
  z-index: 140 !important;
}

/* Toast layer - notifications (should have pointer-events: none on container) */
.z-toast {
  z-index: 160 !important;
}

/* Header layer - navigation bar always visible */
.z-header {
  z-index: 200 !important;
}

/* Dropdown layer - highest, for header dropdowns */
.z-dropdown {
  z-index: 220 !important;
}

/* Legacy support - maintain existing numeric z-index for backward compatibility */
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }