/*==============================================================
#
#  EcoClimPro V2
#  Variables CSS
#
==============================================================*/

:root{

    /*==========================================================
    # Couleurs principales
    ==========================================================*/

    --color-primary:#0A6CB0;
    --color-primary-dark:#084F82;
    --color-primary-light:#EAF5FC;

    --color-secondary:#28A745;
    --color-secondary-dark:#1F8738;
    --color-secondary-light:#EAF8EE;

    --color-accent:#19C37D;

    /*==========================================================
    # Couleurs neutres
    ==========================================================*/

    --color-white:#FFFFFF;

    --color-gray-50:#F8FAFC;
    --color-gray-100:#F1F5F9;
    --color-gray-200:#E2E8F0;
    --color-gray-300:#CBD5E1;
    --color-gray-400:#94A3B8;
    --color-gray-500:#64748B;
    --color-gray-600:#475569;
    --color-gray-700:#334155;
    --color-gray-800:#1E293B;
    --color-gray-900:#0F172A;

    --color-black:#000000;

    /*==========================================================
    # Couleurs fonctionnelles
    ==========================================================*/

    --color-success:#16A34A;
    --color-warning:#F59E0B;
    --color-danger:#DC2626;
    --color-info:#0284C7;

    /*==========================================================
    # Texte
    ==========================================================*/

    --text-color:var(--color-gray-800);

    --text-light:var(--color-gray-500);

    --heading-color:var(--color-gray-900);

    --link-color:var(--color-primary);

    --link-hover:var(--color-primary-dark);

    /*==========================================================
    # Fond
    ==========================================================*/

    --body-bg:#FFFFFF;

    --section-bg:#F8FAFC;

    --card-bg:#FFFFFF;

    --footer-bg:#0F172A;

    /*==========================================================
    # Typographie
    ==========================================================*/

    --font-primary:'Inter',sans-serif;

    --font-heading:'Poppins',sans-serif;

    --font-size-xs:.75rem;

    --font-size-sm:.875rem;

    --font-size-base:1rem;

    --font-size-lg:1.125rem;

    --font-size-xl:1.25rem;

    --font-size-2xl:1.5rem;

    --font-size-3xl:2rem;

    --font-size-4xl:2.75rem;

    --font-size-5xl:3.5rem;

    --line-height:1.7;

    --line-height-heading:1.2;

    /*==========================================================
    # Largeurs
    ==========================================================*/

    --container-width:1320px;

    --container-small:1080px;

    --container-padding:24px;

    /*==========================================================
    # Espacements
    ==========================================================*/

    --space-4:4px;
    --space-8:8px;
    --space-12:12px;
    --space-16:16px;
    --space-20:20px;
    --space-24:24px;
    --space-32:32px;
    --space-40:40px;
    --space-48:48px;
    --space-64:64px;
    --space-80:80px;
    --space-100:100px;
    --space-120:120px;

    /*==========================================================
    # Border Radius
    ==========================================================*/

    --radius-xs:4px;

    --radius-sm:8px;

    --radius-md:12px;

    --radius-lg:18px;

    --radius-xl:24px;

    --radius-full:999px;

    /*==========================================================
    # Ombres
    ==========================================================*/

    --shadow-xs:0 2px 4px rgba(0,0,0,.05);

    --shadow-sm:0 5px 15px rgba(0,0,0,.08);

    --shadow-md:0 12px 30px rgba(0,0,0,.12);

    --shadow-lg:0 20px 50px rgba(0,0,0,.18);

    /*==========================================================
    # Transitions
    ==========================================================*/

    --transition-fast:.2s ease;

    --transition:.3s ease;

    --transition-slow:.5s ease;

    /*==========================================================
    # Z-index
    ==========================================================*/

    --z-header:1000;

    --z-menu:1100;

    --z-overlay:1200;

    --z-modal:1300;

    --z-tooltip:1400;

    /*==========================================================
    # Header
    ==========================================================*/

    --header-height:92px;

    --topbar-height:42px;

    /*==========================================================
    # Boutons
    ==========================================================*/

    --button-height:54px;

    --button-padding:0 34px;

    --button-font-weight:600;

    /*==========================================================
    # Cartes
    ==========================================================*/

    --card-padding:32px;

    --card-gap:32px;

    /*==========================================================
    # Images
    ==========================================================*/

    --image-radius:18px;

}