/* ==========================================
   CSS CUSTOM PROPERTIES - DESIGN SYSTEM
   Gestion des Effectifs Football
   ========================================== */

:root {
    /* ==========================================
       COLORS - GRADIENTS
       ========================================== */

    /* Primary Gradients */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);
    --gradient-orange: linear-gradient(135deg, #f97316 0%, #fb923c 100%);

    /* Role Gradients */
    --gradient-admin: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    --gradient-rt: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
    --gradient-coach: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);

    /* Semantic Gradients */
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #ec4899 100%);

    /* ==========================================
       COLORS - SOLID
       ========================================== */

    /* Blues */
    --blue-600: #2563eb;
    --blue-500: #3b82f6;

    /* Purples */
    --purple-600: #9333ea;
    --purple-500: #a855f7;

    /* Oranges */
    --orange-600: #ea580c;
    --orange-500: #f97316;
    --orange-400: #fb923c;

    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Neutrals - Slate Scale (neutres et professionnels) */
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    --white: #ffffff;

    /* Semantic Colors for backgrounds */
    --green-50: #f0fdf4;
    --green-200: #bbf7d0;
    --green-700: #15803d;

    /* Dark Mode Colors */
    --dark-bg: #676767;
    --dark-secondary: #5a5a5a;

    /* ==========================================
       TYPOGRAPHY
       ========================================== */

    /* Font Family */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

    /* Font Sizes */
    --text-6xl: 3.75rem;    /* 60px - Hero title */
    --text-5xl: 3rem;       /* 48px - Section titles */
    --text-4xl: 2.25rem;    /* 36px - Sub-sections */
    --text-3xl: 1.875rem;   /* 30px - Card titles */
    --text-2xl: 1.5rem;     /* 24px - Small headings */
    --text-xl: 1.25rem;     /* 20px - Large body */
    --text-lg: 1.125rem;    /* 18px - Body large */
    --text-base: 1rem;      /* 16px - Body */
    --text-sm: 0.875rem;    /* 14px - Small text */
    --text-xs: 0.75rem;     /* 12px - Tiny text */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* ==========================================
       SPACING
       ========================================== */

    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    --spacing-24: 6rem;     /* 96px */
    --spacing-32: 8rem;     /* 128px */

    /* ==========================================
       SHADOWS
       ========================================== */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Glow Shadows */
    --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.3);
    --shadow-glow-purple: 0 0 20px rgba(147, 51, 234, 0.3);
    --shadow-glow-orange: 0 0 20px rgba(249, 115, 22, 0.3);

    /* ==========================================
       BORDER RADIUS
       ========================================== */

    --rounded-sm: 0.125rem;  /* 2px */
    --rounded: 0.25rem;      /* 4px */
    --rounded-md: 0.375rem;  /* 6px */
    --rounded-lg: 0.5rem;    /* 8px */
    --rounded-xl: 0.75rem;   /* 12px */
    --rounded-2xl: 1rem;     /* 16px */
    --rounded-3xl: 1.5rem;   /* 24px */
    --rounded-full: 9999px;

    /* ==========================================
       TRANSITIONS
       ========================================== */

    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;

    /* ==========================================
       Z-INDEX SCALE
       ========================================== */

    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-overlay: 40;
    --z-modal: 50;

    /* ==========================================
       BREAKPOINTS (for reference only)
       Use in @media queries as pixel values
       ========================================== */

    /* --mobile: 640px; */
    /* --tablet: 768px; */
    /* --desktop: 1024px; */
    /* --wide: 1280px; */
    /* --ultrawide: 1536px; */
}