/* ===================================================
   VISION IMPACT GROUP - Variables CSS
   =================================================== */

:root {
    /* Couleurs principales */
    --primary:        #174FA2;
    --primary-dark:   #0f3a7a;
    --primary-light:  #2563c4;
    --secondary:      #F26722;
    --secondary-dark: #d4551a;
    --secondary-light:#f5813e;

    /* Couleurs neutres */
    --dark:           #1a1a2e;
    --dark-2:         #16213e;
    --dark-3:         #0f3460;
    --gray-900:       #212529;
    --gray-800:       #343a40;
    --gray-700:       #495057;
    --gray-600:       #6c757d;
    --gray-500:       #adb5bd;
    --gray-400:       #ced4da;
    --gray-300:       #dee2e6;
    --gray-200:       #e9ecef;
    --gray-100:       #f8f9fa;
    --white:          #ffffff;

    /* Couleurs sémantiques */
    --success:        #28a745;
    --warning:        #ffc107;
    --danger:         #dc3545;
    --info:           #17a2b8;

    /* Typographie */
    --font-primary:   'Inter', 'Segoe UI', sans-serif;
    --font-heading:   'Poppins', 'Inter', sans-serif;
    --font-mono:      'Courier New', monospace;

    --text-xs:        0.75rem;
    --text-sm:        0.875rem;
    --text-base:      1rem;
    --text-lg:        1.125rem;
    --text-xl:        1.25rem;
    --text-2xl:       1.5rem;
    --text-3xl:       1.875rem;
    --text-4xl:       2.25rem;
    --text-5xl:       3rem;
    --text-6xl:       3.75rem;

    --fw-light:       300;
    --fw-normal:      400;
    --fw-medium:      500;
    --fw-semibold:    600;
    --fw-bold:        700;
    --fw-extrabold:   800;

    /* Espacements */
    --space-1:        0.25rem;
    --space-2:        0.5rem;
    --space-3:        0.75rem;
    --space-4:        1rem;
    --space-5:        1.25rem;
    --space-6:        1.5rem;
    --space-8:        2rem;
    --space-10:       2.5rem;
    --space-12:       3rem;
    --space-16:       4rem;
    --space-20:       5rem;
    --space-24:       6rem;

    /* Bordures */
    --radius-sm:      4px;
    --radius:         8px;
    --radius-md:      12px;
    --radius-lg:      16px;
    --radius-xl:      24px;
    --radius-2xl:     32px;
    --radius-full:    9999px;

    /* Ombres */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
    --shadow:         0 4px 15px rgba(0,0,0,0.1);
    --shadow-md:      0 8px 25px rgba(0,0,0,0.12);
    --shadow-lg:      0 15px 40px rgba(0,0,0,0.15);
    --shadow-xl:      0 25px 60px rgba(0,0,0,0.2);
    --shadow-primary: 0 8px 25px rgba(23,79,162,0.3);
    --shadow-secondary:0 8px 25px rgba(242,103,34,0.3);

    /* Transitions */
    --transition-fast:  all 0.15s ease;
    --transition:       all 0.3s ease;
    --transition-slow:  all 0.5s ease;
    --transition-cubic: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index */
    --z-dropdown:     1000;
    --z-sticky:       1020;
    --z-fixed:        1030;
    --z-modal-bg:     1040;
    --z-modal:        1050;
    --z-popover:      1060;
    --z-tooltip:      1070;
    --z-loader:       9999;

    /* Navbar */
    --navbar-height:      70px;
    --topbar-height:      40px;
    --total-header-height:110px;

    /* Section */
    --section-padding:    80px 0;
    --section-padding-sm: 50px 0;
}

/* Dark mode (optionnel) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-body:    #0f0f1a;
        --text-body:  #e2e8f0;
    }
}