/* ========================================
   PADEL MVP - DESIGN SYSTEM
   Système de design cohérent et accessible
   Version 1.0 - Octobre 2025
   ======================================== */

:root {
  /* ========================================
     COULEURS PAR INTENTION (Intent-based)
     ======================================== */
  
  /* === ACTIONS PRIMAIRES (CTA) === */
  /* Utilisation: Publier, Valider, Enregistrer, Lancer */
  --action-primary: #6D8B66;
  --action-primary-hover: #5A7355;
  --action-primary-active: #4A6045;
  --action-primary-text: #FFFFFF;
  --action-primary-focus: rgba(109, 139, 102, 0.3);
  
  /* === ACTIONS SECONDAIRES === */
  /* Utilisation: Voir détails, Modifier, Actions moins importantes */
  --action-secondary: #F3E9D2;
  --action-secondary-hover: #E5D8BE;
  --action-secondary-active: #D7C7AA;
  --action-secondary-text: #13402B;
  --action-secondary-focus: rgba(243, 233, 210, 0.5);
  
  /* === ACTIONS TERTIAIRES (Outline) === */
  /* Utilisation: Annuler, Retour, Actions mineures */
  --action-tertiary-bg: transparent;
  --action-tertiary-border: #D1D5DB;
  --action-tertiary-hover-bg: #F9FAFB;
  --action-tertiary-hover-border: #9CA3AF;
  --action-tertiary-text: #4B5563;
  --action-tertiary-focus: rgba(209, 213, 219, 0.3);
  
  /* === ACTIONS DESTRUCTIVES === */
  /* Utilisation: Supprimer, Retirer, Annuler définitivement */
  --action-danger: #DC2626;
  --action-danger-hover: #B91C1C;
  --action-danger-active: #991B1B;
  --action-danger-text: #FFFFFF;
  --action-danger-focus: rgba(220, 38, 38, 0.3);
  
  /* === ACTIONS DE SUCCÈS === */
  /* Utilisation: Approuver, Confirmer, Promouvoir */
  --action-success: #059669;
  --action-success-hover: #047857;
  --action-success-active: #065F46;
  --action-success-text: #FFFFFF;
  --action-success-focus: rgba(5, 150, 105, 0.3);
  
  /* === ACTIONS D'AVERTISSEMENT === */
  /* Utilisation: Mettre en attente, Alertes */
  --action-warning: #D97706;
  --action-warning-hover: #B45309;
  --action-warning-active: #92400E;
  --action-warning-text: #FFFFFF;
  --action-warning-focus: rgba(217, 119, 6, 0.3);
  
  /* === NAVIGATION === */
  /* Utilisation: Onglets, liens, menu */
  --nav-default: #6B7280;
  --nav-hover: #A3BF8F;
  --nav-active: #13402B;
  --nav-active-bg: #F7F9F5;
  --nav-indicator: #A3BF8F;
  
  /* ========================================
     BADGES & STATUTS
     ======================================== */
  
  --badge-success-bg: #10B981;
  --badge-success-text: #FFFFFF;
  
  --badge-warning-bg: #F59E0B;
  --badge-warning-text: #FFFFFF;
  
  --badge-info-bg: #3B82F6;
  --badge-info-text: #FFFFFF;
  
  --badge-neutral-bg: #6B7280;
  --badge-neutral-text: #FFFFFF;
  
  --badge-danger-bg: #EF4444;
  --badge-danger-text: #FFFFFF;
  
  /* ========================================
     TAILLES & ESPACEMENTS
     ======================================== */
  
  /* Boutons - Min touch target 44x44px (WCAG) */
  --btn-padding-sm: 6px 12px;      /* ~32px hauteur */
  --btn-padding-md: 10px 16px;     /* ~40px hauteur */
  --btn-padding-lg: 12px 24px;     /* ~48px hauteur */
  
  --btn-font-sm: 13px;
  --btn-font-md: 15px;
  --btn-font-lg: 16px;
  
  --btn-radius: 8px;
  
  /* Espacements */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  
  /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */
  
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  
  /* ========================================
     OMBRES
     ======================================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(19, 64, 43, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(19, 64, 43, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(19, 64, 43, 0.1);
  --shadow-focus: 0 0 0 3px;
}

/* ========================================
   CLASSES UTILITAIRES - BOUTONS
   ======================================== */

/* === BOUTON PRIMAIRE === */
.btn-action-primary {
  background-color: var(--action-primary);
  color: var(--action-primary-text);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 40px;
}

.btn-action-primary:hover {
  background-color: var(--action-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-action-primary:active {
  background-color: var(--action-primary-active);
  transform: translateY(0);
}

.btn-action-primary:focus {
  outline: none;
  box-shadow: var(--shadow-focus) var(--action-primary-focus);
}

.btn-action-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* === BOUTON SECONDAIRE === */
.btn-action-secondary {
  background-color: var(--action-secondary);
  color: var(--action-secondary-text);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 40px;
}

.btn-action-secondary:hover {
  background-color: var(--action-secondary-hover);
  box-shadow: var(--shadow-sm);
}

.btn-action-secondary:active {
  background-color: var(--action-secondary-active);
}

.btn-action-secondary:focus {
  outline: none;
  box-shadow: var(--shadow-focus) var(--action-secondary-focus);
}

.btn-action-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === BOUTON TERTIAIRE (Outline) === */
.btn-action-tertiary {
  background-color: var(--action-tertiary-bg);
  color: var(--action-tertiary-text);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: 2px solid var(--action-tertiary-border);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 40px;
}

.btn-action-tertiary:hover {
  background-color: var(--action-tertiary-hover-bg);
  border-color: var(--action-tertiary-hover-border);
}

.btn-action-tertiary:focus {
  outline: none;
  box-shadow: var(--shadow-focus) var(--action-tertiary-focus);
}

.btn-action-tertiary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === BOUTON DANGER === */
.btn-action-danger {
  background-color: var(--action-danger);
  color: var(--action-danger-text);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 40px;
}

.btn-action-danger:hover {
  background-color: var(--action-danger-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-action-danger:active {
  background-color: var(--action-danger-active);
  transform: translateY(0);
}

.btn-action-danger:focus {
  outline: none;
  box-shadow: var(--shadow-focus) var(--action-danger-focus);
}

.btn-action-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* === BOUTON SUCCESS === */
.btn-action-success {
  background-color: var(--action-success);
  color: var(--action-success-text);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 40px;
}

.btn-action-success:hover {
  background-color: var(--action-success-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-action-success:active {
  background-color: var(--action-success-active);
  transform: translateY(0);
}

.btn-action-success:focus {
  outline: none;
  box-shadow: var(--shadow-focus) var(--action-success-focus);
}

.btn-action-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* === BOUTON WARNING === */
.btn-action-warning {
  background-color: var(--action-warning);
  color: var(--action-warning-text);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 40px;
}

.btn-action-warning:hover {
  background-color: var(--action-warning-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-action-warning:active {
  background-color: var(--action-warning-active);
  transform: translateY(0);
}

.btn-action-warning:focus {
  outline: none;
  box-shadow: var(--shadow-focus) var(--action-warning-focus);
}

.btn-action-warning:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* === BOUTON NAVIGATION === */
.btn-nav {
  background-color: transparent;
  color: var(--nav-default);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.btn-nav:hover {
  color: var(--nav-hover);
  background-color: var(--nav-active-bg);
}

.btn-nav.active {
  color: var(--nav-active);
  background-color: var(--nav-active-bg);
}

/* ========================================
   TAILLES DE BOUTONS
   ======================================== */

.btn-sm {
  padding: var(--btn-padding-sm);
  font-size: var(--btn-font-sm);
  min-height: 32px;
}

.btn-lg {
  padding: var(--btn-padding-lg);
  font-size: var(--btn-font-lg);
  min-height: 48px;
}

/* ========================================
   CLASSES UTILITAIRES - BADGES
   ======================================== */

.badge-ds {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.badge-padel-success {
  background-color: var(--badge-success-bg);
  color: var(--badge-success-text);
}

.badge-padel-warning {
  background-color: var(--badge-warning-bg);
  color: var(--badge-warning-text);
}

.badge-padel-info {
  background-color: var(--badge-info-bg);
  color: var(--badge-info-text);
}

.badge-padel-secondary {
  background-color: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

.badge-padel-error {
  background-color: var(--badge-danger-bg);
  color: var(--badge-danger-text);
}

/* ========================================
   NAVIGATION (Tabs, Links)
   ======================================== */

.nav-tab {
  padding: 16px 24px;
  border: none;
  background: transparent;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--nav-default);
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-tab:hover {
  color: var(--nav-hover);
  background-color: var(--nav-active-bg);
}

.nav-tab.active {
  color: var(--nav-active);
  border-bottom-color: var(--nav-indicator);
  background-color: var(--nav-active-bg);
}

/* ========================================
   UTILITAIRES GÉNÉRAUX
   ======================================== */

.focus-ring:focus {
  outline: none;
  box-shadow: var(--shadow-focus) var(--action-primary-focus);
}

.transition-standard {
  transition: all var(--transition-normal);
}

/* ========================================
   DOCUMENTATION & EXEMPLES
   ======================================== */

/*
GUIDE D'UTILISATION :

1. BOUTONS D'ACTION :
   - btn-action-primary    → Publier, Valider, Enregistrer
   - btn-action-secondary  → Voir détails, Modifier
   - btn-action-tertiary   → Annuler, Retour
   - btn-action-danger     → Supprimer, Retirer
   - btn-action-success    → Approuver, Confirmer
   - btn-action-warning    → Mettre en attente

2. BOUTONS DE NAVIGATION :
   - btn-nav               → Onglets, liens menu
   - nav-tab               → Onglets avec indicateur

3. TAILLES :
   - btn-sm   → Petit (32px min)
   - (default) → Moyen (40px min)
   - btn-lg   → Grand (48px min)

4. BADGES :
   - badge-ds-success  → Confirmé
   - badge-ds-warning  → En attente
   - badge-ds-info     → Information
   - badge-ds-neutral  → Par défaut
   - badge-ds-danger   → Erreur

EXEMPLE HTML :
<button class="btn-action-primary">🚀 Publier</button>
<button class="btn-action-secondary">📝 Modifier</button>
<button class="btn-action-tertiary">← Retour</button>
<button class="btn-action-danger btn-sm">🗑️ Supprimer</button>
<span class="badge-ds badge-ds-success">Confirmé</span>
*/