/**
 * Design System Tokens
 * Shared design tokens across all platforms
 * 
 * SLEEK DARK GAMING THEME
 * Inspired by: BitChat, Root, Discord Dark, Telegram
 */

export const colors = {
  // Brand colors (Cyan primary - modern gaming)
  primary: {
    50: '#ecfeff',
    100: '#cffafe',
    200: '#a5f3fc',
    300: '#67e8f9',
    400: '#22d3ee',
    500: '#00d9ff',   // Primary cyan
    600: '#00b8d9',
    700: '#0097b3',
    800: '#007a8f',
    900: '#006073',
  },
  
  // Accent colors (Neon green gaming)
  accent: {
    50: '#f0fdf4',
    100: '#dcfce7',
    200: '#bbf7d0',
    300: '#86efac',
    400: '#4ade80',
    500: '#00ff88',   // Neon green
    600: '#00e070',
    700: '#00c05d',
    800: '#009f4a',
    900: '#00803b',
  },
  
  // Secondary accent (Purple for premium)
  secondary: {
    50: '#faf5ff',
    100: '#f3e8ff',
    200: '#e9d5ff',
    300: '#d8b4fe',
    400: '#c084fc',
    500: '#a855f7',   // Premium purple
    600: '#9333ea',
    700: '#7e22ce',
    800: '#6b21a8',
    900: '#581c87',
  },
  
  // Neutral colors (OLED-friendly blacks)
  gray: {
    50: '#fafafa',
    100: '#f5f5f5',
    200: '#e5e5e5',
    300: '#d4d4d4',
    400: '#a3a3a3',
    500: '#737373',
    600: '#525252',
    700: '#404040',
    800: '#262626',
    900: '#171717',
    950: '#0a0a0a',   // Pure black for OLED
  },
  
  // Semantic colors
  success: '#10b981',   // Green
  warning: '#f59e0b',   // Orange
  error: '#ef4444',     // Red
  info: '#00d9ff',      // Cyan (matches primary)
  
  // Background (OLED-optimized)
  background: {
    primary: '#000000',     // Pure black for OLED battery saving
    secondary: '#0f0f0f',   // Slightly elevated
    tertiary: '#1a1a1a',    // Cards
    elevated: '#262626',    // Modals/overlays
  },
  
  // Text (High contrast for readability)
  text: {
    primary: '#ffffff',     // White
    secondary: '#b0b0b0',   // Light gray
    tertiary: '#707070',    // Medium gray
    muted: '#505050',       // Dark gray
    disabled: '#3a3a3a',    // Very dark gray
  },
  
  // Special effects
  effects: {
    glass: 'rgba(20, 20, 20, 0.7)',            // Glassmorphism background
    glassBorder: 'rgba(255, 255, 255, 0.1)',   // Glass border
    glow: 'rgba(0, 217, 255, 0.3)',            // Cyan glow
    glowGreen: 'rgba(0, 255, 136, 0.3)',       // Green glow
    glowPurple: 'rgba(168, 85, 247, 0.3)',     // Purple glow
    overlay: 'rgba(0, 0, 0, 0.8)',             // Dark overlay
    overlayLight: 'rgba(0, 0, 0, 0.5)',        // Lighter overlay
  },
  
  // Status indicators
  status: {
    online: '#3ba55c',      // Discord green
    idle: '#faa61a',        // Yellow
    dnd: '#ed4245',         // Red
    offline: '#747f8d',     // Gray
  },
};

export const spacing = {
  0: '0',
  1: '0.25rem',    // 4px
  2: '0.5rem',     // 8px
  3: '0.75rem',    // 12px
  4: '1rem',       // 16px
  5: '1.25rem',    // 20px
  6: '1.5rem',     // 24px
  8: '2rem',       // 32px
  10: '2.5rem',    // 40px
  12: '3rem',      // 48px - Touch target minimum
  14: '3.5rem',    // 56px - Bottom nav height
  16: '4rem',      // 64px
  20: '5rem',      // 80px
  24: '6rem',      // 96px
};

export const typography = {
  fontFamily: {
    // Use native system fonts for best mobile performance
    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
    mono: 'ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace',
  },
  
  fontSize: {
    xs: '0.75rem',      // 12px - Captions, timestamps
    sm: '0.875rem',     // 14px - Labels, secondary text
    base: '1rem',       // 16px - Body text (mobile readable)
    lg: '1.125rem',     // 18px - Emphasized text
    xl: '1.25rem',      // 20px - Subheadings
    '2xl': '1.5rem',    // 24px - Section headers
    '3xl': '1.75rem',   // 28px - Screen titles
    '4xl': '2rem',      // 32px - Hero text
    '5xl': '2.5rem',    // 40px - Large hero
  },
  
  fontWeight: {
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
  
  lineHeight: {
    none: 1,
    tight: 1.25,
    snug: 1.375,
    normal: 1.5,      // Default for readability
    relaxed: 1.625,
    loose: 2,
  },
};

export const borderRadius = {
  none: '0',
  sm: '0.375rem',   // 6px
  base: '0.5rem',   // 8px
  md: '0.75rem',    // 12px
  lg: '1rem',       // 16px - Message bubbles
  xl: '1.125rem',   // 18px - Message bubbles rounded
  '2xl': '1.5rem',  // 24px - Cards
  full: '9999px',   // Pills
};

export const shadows = {
  // Subtle shadows for dark theme
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.3)',
  base: '0 2px 4px 0 rgba(0, 0, 0, 0.4)',
  md: '0 4px 8px -2px rgba(0, 0, 0, 0.5)',
  lg: '0 8px 16px -4px rgba(0, 0, 0, 0.6)',
  xl: '0 16px 32px -8px rgba(0, 0, 0, 0.7)',
  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.8)',
  
  // Glow effects for gaming aesthetic
  glowCyan: '0 0 20px rgba(0, 217, 255, 0.4)',
  glowCyanStrong: '0 0 30px rgba(0, 217, 255, 0.6)',
  glowGreen: '0 0 20px rgba(0, 255, 136, 0.4)',
  glowPurple: '0 0 20px rgba(168, 85, 247, 0.4)',
  glowSubtle: '0 0 10px rgba(255, 255, 255, 0.1)',
};

export const breakpoints = {
  // Mobile-first breakpoints
  xs: '375px',   // Small phones
  sm: '640px',   // Large phones
  md: '768px',   // Tablets
  lg: '1024px',  // Small laptops
  xl: '1280px',  // Desktop
  '2xl': '1536px', // Large desktop
};

export const zIndex = {
  base: 0,
  dropdown: 1000,
  sticky: 1100,
  fixed: 1200,
  modalBackdrop: 1300,
  modal: 1400,
  popover: 1500,
  tooltip: 1600,
  toast: 1700,
};

export const transitions = {
  fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
  base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
  slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
  slower: '500ms cubic-bezier(0.4, 0, 0.2, 1)',
  
  // Easing functions
  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
  easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
  spring: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
};

// Mobile-specific tokens
export const mobile = {
  touchTarget: {
    minimum: '44px',      // iOS HIG minimum
    comfortable: '48px',  // Material Design
    large: '56px',        // Bottom nav, FABs
  },
  
  safeArea: {
    top: 'env(safe-area-inset-top)',
    bottom: 'env(safe-area-inset-bottom)',
    left: 'env(safe-area-inset-left)',
    right: 'env(safe-area-inset-right)',
  },
  
  statusBar: {
    height: '44px',      // iOS status bar
    heightAndroid: '24px',
  },
  
  navbar: {
    height: '56px',      // Standard mobile nav
    heightLarge: '64px', // Large title nav
  },
  
  tabBar: {
    height: '56px',      // Bottom tab bar
    heightSafe: 'calc(56px + env(safe-area-inset-bottom))',
  },
};

// Glassmorphism effect tokens
export const glass = {
  blur: '20px',
  blurStrong: '30px',
  blurSubtle: '10px',
  
  background: {
    light: 'rgba(255, 255, 255, 0.05)',
    medium: 'rgba(255, 255, 255, 0.1)',
    dark: 'rgba(0, 0, 0, 0.3)',
    darker: 'rgba(0, 0, 0, 0.5)',
  },
  
  border: 'rgba(255, 255, 255, 0.1)',
  borderBright: 'rgba(255, 255, 255, 0.2)',
};