/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Variables SCSS
 * ═══════════════════════════════════════════════════════════
 * Toutes les variables de design système Lions.dev
 * Basé sur la Charte Graphique Lions.dev v1.0.0
 *
 * Version: 1.0.0
 * Date: 1er Janvier 2026
 * Author: Lions Development Team
 * ═══════════════════════════════════════════════════════════
 */

// ============================================
// 🎨 PALETTE DE COULEURS LIONS.DEV
// ============================================

// 🔵 Lions Blue (Couleur signature)
$lions-blue-50:  #E8F4FD !default;
$lions-blue-100: #C3E2FA !default;
$lions-blue-200: #9BCEF7 !default;
$lions-blue-300: #72BAF4 !default;
$lions-blue-400: #50AAF1 !default;
$lions-blue-500: #2D9BEF !default;  // Base - Lions Blue
$lions-blue-600: #2889D6 !default;
$lions-blue-700: #2275BC !default;
$lions-blue-800: #1C61A3 !default;
$lions-blue-900: #164D89 !default;

// 🟠 Lions Gold (Couleur d'accentuation)
$lions-gold-50:  #FFF9E6 !default;
$lions-gold-100: #FFEFB3 !default;
$lions-gold-200: #FFE580 !default;
$lions-gold-300: #FFDB4D !default;
$lions-gold-400: #FFD11A !default;
$lions-gold-500: #FFC700 !default;  // Base - Lions Gold
$lions-gold-600: #E6B300 !default;
$lions-gold-700: #CC9F00 !default;
$lions-gold-800: #B38B00 !default;
$lions-gold-900: #997700 !default;

// ✅ Success (Vert Lions)
$lions-success-50:  #E8F8F0 !default;
$lions-success-100: #C3ECD5 !default;
$lions-success-200: #9CE0BA !default;
$lions-success-300: #74D39F !default;
$lions-success-400: #4DC784 !default;
$lions-success-500: #22BB69 !default;  // Base
$lions-success-600: #1FA85F !default;
$lions-success-700: #1B9555 !default;
$lions-success-800: #18824B !default;
$lions-success-900: #146F41 !default;

// ⚠️ Warning (Orange Lions)
$lions-warning-50:  #FFF3E0 !default;
$lions-warning-100: #FFE0B3 !default;
$lions-warning-200: #FFCC80 !default;
$lions-warning-300: #FFB84D !default;
$lions-warning-400: #FFA826 !default;
$lions-warning-500: #FF9800 !default;  // Base
$lions-warning-600: #F08A00 !default;
$lions-warning-700: #E07B00 !default;
$lions-warning-800: #D16D00 !default;
$lions-warning-900: #C15E00 !default;

// ❌ Danger (Rouge Lions)
$lions-danger-50:  #FEEBEE !default;
$lions-danger-100: #FCCDD2 !default;
$lions-danger-200: #FAA6AF !default;
$lions-danger-300: #F87F8C !default;
$lions-danger-400: #F65870 !default;
$lions-danger-500: #F44336 !default;  // Base
$lions-danger-600: #E93D31 !default;
$lions-danger-700: #DD342C !default;
$lions-danger-800: #D22C27 !default;
$lions-danger-900: #C41F1E !default;

// ℹ️ Info (Cyan Lions)
$lions-info-50:  #E0F7FA !default;
$lions-info-100: #B3EBF3 !default;
$lions-info-200: #80DEEB !default;
$lions-info-300: #4DD1E3 !default;
$lions-info-400: #26C6DC !default;
$lions-info-500: #00BCD4 !default;  // Base
$lions-info-600: #00AAC1 !default;
$lions-info-700: #0098AE !default;
$lions-info-800: #00869B !default;
$lions-info-900: #007488 !default;

// 🎨 Surface (Neutral)
$lions-white:    #FFFFFF !default;
$lions-gray-50:  #FAFBFC !default;
$lions-gray-100: #F4F6F8 !default;
$lions-gray-200: #E8ECEF !default;
$lions-gray-300: #D2D9DF !default;
$lions-gray-400: #B0B9C2 !default;
$lions-gray-500: #8995A1 !default;  // Base
$lions-gray-600: #68737F !default;
$lions-gray-700: #4F5861 !default;
$lions-gray-800: #363E46 !default;
$lions-gray-900: #1F252B !default;
$lions-black:    #0A0D0F !default;

// Text colors
$lions-text-primary:   $lions-gray-900 !default;
$lions-text-secondary: $lions-gray-600 !default;
$lions-text-disabled:  $lions-gray-400 !default;
$lions-text-inverse:   $lions-white !default;

// ============================================
// 🔤 TYPOGRAPHIE
// ============================================

// Font families
$lions-font-family-primary:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
$lions-font-family-headings: 'Inter', system-ui, -apple-system, sans-serif !default;
$lions-font-family-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace !default;

// Font sizes (Ratio 1.250 - Major Third)
$lions-font-xs:   0.750rem !default;  // 12px
$lions-font-sm:   0.875rem !default;  // 14px
$lions-font-base: 1.000rem !default;  // 16px (base)
$lions-font-lg:   1.125rem !default;  // 18px
$lions-font-xl:   1.250rem !default;  // 20px
$lions-font-2xl:  1.563rem !default;  // 25px
$lions-font-3xl:  1.953rem !default;  // 31px
$lions-font-4xl:  2.441rem !default;  // 39px
$lions-font-5xl:  3.052rem !default;  // 49px

// Font weights
$lions-font-light:     300 !default;
$lions-font-regular:   400 !default;
$lions-font-medium:    500 !default;
$lions-font-semibold:  600 !default;
$lions-font-bold:      700 !default;
$lions-font-extrabold: 800 !default;
$lions-font-black:     900 !default;

// Line heights
$lions-line-height-tight:   1.25 !default;
$lions-line-height-normal:  1.5 !default;
$lions-line-height-relaxed: 1.75 !default;
$lions-line-height-loose:   2.0 !default;

// ============================================
// 📏 ESPACEMENTS (Système 4px)
// ============================================

$lions-spacing-0:   0 !default;
$lions-spacing-1:   0.25rem !default;  // 4px
$lions-spacing-2:   0.5rem !default;   // 8px
$lions-spacing-3:   0.75rem !default;  // 12px
$lions-spacing-4:   1rem !default;     // 16px (base)
$lions-spacing-5:   1.25rem !default;  // 20px
$lions-spacing-6:   1.5rem !default;   // 24px
$lions-spacing-8:   2rem !default;     // 32px
$lions-spacing-10:  2.5rem !default;   // 40px
$lions-spacing-12:  3rem !default;     // 48px
$lions-spacing-16:  4rem !default;     // 64px
$lions-spacing-20:  5rem !default;     // 80px
$lions-spacing-24:  6rem !default;     // 96px

// ============================================
// 🔲 COMPOSANTS - DIMENSIONS
// ============================================

// Boutons
$lions-button-height-sm:      2rem !default;     // 32px
$lions-button-height-base:    2.5rem !default;   // 40px
$lions-button-height-lg:      3rem !default;     // 48px
$lions-button-padding-x-sm:   0.75rem !default;  // 12px
$lions-button-padding-x-base: 1rem !default;     // 16px
$lions-button-padding-x-lg:   1.5rem !default;   // 24px
$lions-button-border-radius:  0.5rem !default;   // 8px
$lions-button-border-width:   2px !default;

// Champs de formulaire
$lions-input-height-sm:      2rem !default;     // 32px
$lions-input-height-base:    2.75rem !default;  // 44px
$lions-input-height-lg:      3.25rem !default;  // 52px
$lions-input-padding-x:      1rem !default;     // 16px
$lions-input-padding-y:      0.75rem !default;  // 12px
$lions-input-border-radius:  0.5rem !default;   // 8px
$lions-input-border-width:   1px !default;

// Cards & Panels
$lions-card-padding:        $lions-spacing-6 !default;  // 24px
$lions-card-border-radius:  0.75rem !default;           // 12px
$lions-card-border-width:   1px !default;

// Tables
$lions-table-row-padding:   $lions-spacing-4 !default;  // 16px
$lions-table-header-height: 3rem !default;              // 48px
$lions-table-row-height:    2.75rem !default;           // 44px

// ============================================
// 🌈 ANIMATIONS & TRANSITIONS
// ============================================

// Durées
$lions-transition-fast:  150ms !default;
$lions-transition-base:  250ms !default;
$lions-transition-slow:  350ms !default;

// Easing functions
$lions-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1) !default;
$lions-ease-out:     cubic-bezier(0.0, 0, 0.2, 1) !default;
$lions-ease-in:      cubic-bezier(0.4, 0, 1, 1) !default;
$lions-ease-smooth:  cubic-bezier(0.25, 0.1, 0.25, 1) !default;

// ============================================
// 🎯 OMBRES (Elevation System)
// ============================================

$lions-shadow-xs:   0 1px 2px 0 rgba($lions-black, 0.05) !default;
$lions-shadow-sm:   0 1px 3px 0 rgba($lions-black, 0.1), 0 1px 2px 0 rgba($lions-black, 0.06) !default;
$lions-shadow-base: 0 4px 6px -1px rgba($lions-black, 0.1), 0 2px 4px -1px rgba($lions-black, 0.06) !default;
$lions-shadow-md:   0 10px 15px -3px rgba($lions-black, 0.1), 0 4px 6px -2px rgba($lions-black, 0.05) !default;
$lions-shadow-lg:   0 20px 25px -5px rgba($lions-black, 0.1), 0 10px 10px -5px rgba($lions-black, 0.04) !default;
$lions-shadow-xl:   0 25px 50px -12px rgba($lions-black, 0.25) !default;
$lions-shadow-2xl:  0 30px 60px -15px rgba($lions-black, 0.3) !default;

// Shadows colorées
$lions-shadow-blue:  0 4px 16px rgba($lions-blue-500, 0.25) !default;
$lions-shadow-gold:  0 4px 16px rgba($lions-gold-500, 0.25) !default;

// ============================================
// 🔄 BREAKPOINTS (Mobile-First)
// ============================================

$lions-breakpoint-xs:  0 !default;
$lions-breakpoint-sm:  576px !default;
$lions-breakpoint-md:  768px !default;
$lions-breakpoint-lg:  1024px !default;
$lions-breakpoint-xl:  1280px !default;
$lions-breakpoint-2xl: 1536px !default;

// ============================================
// 🎨 Z-INDEX LAYERS
// ============================================

$lions-z-dropdown:   1000 !default;
$lions-z-sticky:     1020 !default;
$lions-z-fixed:      1030 !default;
$lions-z-modal-backdrop: 1040 !default;
$lions-z-modal:      1050 !default;
$lions-z-popover:    1060 !default;
$lions-z-tooltip:    1070 !default;

// ============================================
// 🔲 BORDER RADIUS
// ============================================

$lions-radius-none:   0 !default;
$lions-radius-sm:     0.25rem !default;   // 4px
$lions-radius-base:   0.5rem !default;    // 8px
$lions-radius-md:     0.75rem !default;   // 12px
$lions-radius-lg:     1rem !default;      // 16px
$lions-radius-xl:     1.5rem !default;    // 24px
$lions-radius-2xl:    2rem !default;      // 32px
$lions-radius-full:   9999px !default;    // Pill shape

// ============================================
// 📐 GRID SYSTEM
// ============================================

$lions-grid-columns:      12 !default;
$lions-grid-gutter-width: $lions-spacing-6 !default;  // 24px
$lions-container-max-width-sm:  540px !default;
$lions-container-max-width-md:  720px !default;
$lions-container-max-width-lg:  960px !default;
$lions-container-max-width-xl:  1140px !default;
$lions-container-max-width-2xl: 1320px !default;
