/**
 * Z-index scale for consistent layering
 */
export const zIndex = {
  base: 0,
  dropdown: 100,
  sticky: 200,
  fixed: 300,
  overlay: 400,
  modal: 500,
  popover: 600,
  toast: 700,
  tooltip: 800,
  notification: 900,
  max: 9999,
};

// CSS custom property values
export const zIndexVars = `
  --dees-z-base: ${zIndex.base};
  --dees-z-dropdown: ${zIndex.dropdown};
  --dees-z-sticky: ${zIndex.sticky};
  --dees-z-fixed: ${zIndex.fixed};
  --dees-z-overlay: ${zIndex.overlay};
  --dees-z-modal: ${zIndex.modal};
  --dees-z-popover: ${zIndex.popover};
  --dees-z-toast: ${zIndex.toast};
  --dees-z-tooltip: ${zIndex.tooltip};
  --dees-z-notification: ${zIndex.notification};
  --dees-z-max: ${zIndex.max};
`;