/// Design Tokens - Espacements
/// 
/// Système d'espacement cohérent basé sur une grille de 4px
/// Optimisé pour la lisibilité et l'harmonie visuelle
library spacing_tokens;

/// Tokens d'espacement - Système de grille moderne
class SpacingTokens {
  SpacingTokens._();

  // ═══════════════════════════════════════════════════════════════════════════
  // ESPACEMENT DE BASE - Grille 4px
  // ═══════════════════════════════════════════════════════════════════════════
  
  /// Unité de base (4px) - Fondation du système
  static const double baseUnit = 4.0;
  
  /// Espacement minimal (2px) - Détails fins
  static const double xs = baseUnit * 0.5; // 2px
  
  /// Espacement très petit (4px) - Éléments adjacents
  static const double sm = baseUnit * 1; // 4px
  
  /// Espacement petit (8px) - Espacement interne léger
  static const double md = baseUnit * 2; // 8px
  
  /// Espacement moyen (12px) - Espacement standard
  static const double lg = baseUnit * 3; // 12px
  
  /// Espacement large (16px) - Séparation de composants
  static const double xl = baseUnit * 4; // 16px
  
  /// Espacement très large (20px) - Séparation importante
  static const double xxl = baseUnit * 5; // 20px
  
  /// Espacement extra large (24px) - Sections principales
  static const double xxxl = baseUnit * 6; // 24px
  
  /// Espacement massif (32px) - Séparation majeure
  static const double huge = baseUnit * 8; // 32px
  
  /// Espacement géant (48px) - Espacement héroïque
  static const double giant = baseUnit * 12; // 48px

  // ═══════════════════════════════════════════════════════════════════════════
  // ESPACEMENTS SPÉCIALISÉS - Composants spécifiques
  // ═══════════════════════════════════════════════════════════════════════════
  
  /// Padding des conteneurs
  static const double containerPaddingSmall = lg; // 12px
  static const double containerPaddingMedium = xl; // 16px
  static const double containerPaddingLarge = xxxl; // 24px
  
  /// Marges des cartes
  static const double cardMargin = xl; // 16px
  static const double cardPadding = xl; // 16px
  static const double cardPaddingLarge = xxxl; // 24px
  
  /// Espacement des listes
  static const double listItemSpacing = md; // 8px
  static const double listSectionSpacing = xxxl; // 24px
  
  /// Espacement des boutons
  static const double buttonPaddingHorizontal = xl; // 16px
  static const double buttonPaddingVertical = lg; // 12px
  static const double buttonSpacing = md; // 8px
  
  /// Espacement des formulaires
  static const double formFieldSpacing = xl; // 16px
  static const double formSectionSpacing = xxxl; // 24px
  static const double formPadding = xl; // 16px
  
  /// Espacement de navigation
  static const double navigationPadding = xl; // 16px
  static const double navigationItemSpacing = md; // 8px
  static const double navigationSectionSpacing = xxxl; // 24px
  
  /// Espacement des en-têtes
  static const double headerPadding = xl; // 16px
  static const double headerHeight = 56.0; // Hauteur standard
  static const double headerElevation = 4.0; // Élévation
  
  /// Espacement des onglets
  static const double tabPadding = xl; // 16px
  static const double tabHeight = 48.0; // Hauteur standard
  
  /// Espacement des dialogues
  static const double dialogPadding = xxxl; // 24px
  static const double dialogMargin = xl; // 16px
  
  /// Espacement des snackbars
  static const double snackbarMargin = xl; // 16px
  static const double snackbarPadding = xl; // 16px

  // ═══════════════════════════════════════════════════════════════════════════
  // RAYONS DE BORDURE - Système cohérent
  // ═══════════════════════════════════════════════════════════════════════════
  
  /// Rayon minimal (2px) - Détails subtils
  static const double radiusXs = 2.0;
  
  /// Rayon petit (4px) - Éléments fins
  static const double radiusSm = 4.0;
  
  /// Rayon moyen (8px) - Standard
  static const double radiusMd = 8.0;
  
  /// Rayon large (12px) - Cartes et composants
  static const double radiusLg = 12.0;
  
  /// Rayon très large (16px) - Conteneurs principaux
  static const double radiusXl = 16.0;
  
  /// Rayon extra large (20px) - Éléments héroïques
  static const double radiusXxl = 20.0;
  
  /// Rayon circulaire (999px) - Boutons ronds
  static const double radiusCircular = 999.0;

  // ═══════════════════════════════════════════════════════════════════════════
  // ÉLÉVATIONS - Système d'ombres
  // ═══════════════════════════════════════════════════════════════════════════
  
  /// Élévation minimale
  static const double elevationXs = 1.0;
  
  /// Élévation petite
  static const double elevationSm = 2.0;
  
  /// Élévation moyenne
  static const double elevationMd = 4.0;
  
  /// Élévation large
  static const double elevationLg = 8.0;
  
  /// Élévation très large
  static const double elevationXl = 12.0;
  
  /// Élévation maximale
  static const double elevationMax = 24.0;

  // ═══════════════════════════════════════════════════════════════════════════
  // DIMENSIONS FIXES - Composants standardisés
  // ═══════════════════════════════════════════════════════════════════════════
  
  /// Hauteurs de boutons
  static const double buttonHeightSmall = 32.0;
  static const double buttonHeightMedium = 40.0;
  static const double buttonHeightLarge = 48.0;
  
  /// Hauteurs d'éléments de liste
  static const double listItemHeightSmall = 48.0;
  static const double listItemHeightMedium = 56.0;
  static const double listItemHeightLarge = 72.0;
  
  /// Largeurs minimales
  static const double minTouchTarget = 44.0; // Cible tactile minimale
  static const double minButtonWidth = 64.0; // Largeur minimale bouton
  
  /// Largeurs maximales
  static const double maxContentWidth = 600.0; // Largeur max contenu
  static const double maxDialogWidth = 400.0; // Largeur max dialogue

  // ═══════════════════════════════════════════════════════════════════════════
  // MÉTHODES UTILITAIRES
  // ═══════════════════════════════════════════════════════════════════════════
  
  /// Calcule un espacement basé sur l'unité de base
  static double spacing(double multiplier) {
    return baseUnit * multiplier;
  }
  
  /// Obtient un espacement responsive basé sur la largeur d'écran
  static double responsiveSpacing(double screenWidth) {
    if (screenWidth < 600) {
      return xl; // Mobile
    } else if (screenWidth < 1200) {
      return xxxl; // Tablette
    } else {
      return huge; // Desktop
    }
  }
  
  /// Obtient un padding responsive
  static double responsivePadding(double screenWidth) {
    if (screenWidth < 600) {
      return xl; // 16px mobile
    } else if (screenWidth < 1200) {
      return xxxl; // 24px tablette
    } else {
      return huge; // 32px desktop
    }
  }
}
