/**
 * Design Tokens
 * Centralized design system constants for consistent UI/UX
 */

export const designTokens = {
  // Breakpoints (in pixels)
  breakpoints: {
    xs: 320,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1536,
    '3xl': 1920,
  },

  // Sidebar dimensions
  sidebar: {
    collapsed: 64,
    expanded: 256,
    mobile: 320,
  },

  // Z-index scale
  zIndex: {
    base: 0,
    dropdown: 10,
    sticky: 20,
    overlay: 40,      // Overlay below sidebar
    sidebar: 50,      // Sidebar above overlay
    header: 60,       // Header above sidebar
    modal: 70,        // Modal above everything
    toast: 80,        // Toast at the top
  },

  // Animation durations (in milliseconds)
  animation: {
    fast: 150,
    normal: 300,
    slow: 500,
  },

  // Spacing scale (in pixels)
  spacing: {
    mobile: 16,
    tablet: 24,
    desktop: 32,
    wide: 40,
  },

  // Touch target minimum size
  touchTarget: {
    min: 44,
  },

  // Container max widths
  container: {
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1536,
  },
} as const;

export type DesignTokens = typeof designTokens;