/* ============================================
   UTILS.CSS - Variables et Utilitaires
   ============================================ */

/* ========== VARIABLES CSS ========== */
:root {
    /* Couleurs principales Helpify */
    --primary-color: #22c55e;        /* Vert Helpify */
    --primary-dark: #16a34a;         /* Vert foncé */
    --primary-light: #86efac;        /* Vert clair */
    --secondary-color: #0f766e;      /* Vert sarcelle */
    --accent-color: #f59e0b;         /* Orange accent */
    
    /* Couleurs de texte */
    --text-dark: #1e293b;            /* Noir/gris foncé */
    --text-light: #64748b;           /* Gris moyen */
    --text-white: #ffffff;
    
    /* Couleurs de fond */
    --bg-light: #f1f5f9;             /* Gris très clair */
    --bg-light-green: #ecfdf5;       /* Vert très clair */
    --bg-white: #ffffff;
    --bg-dark: #0f766e;              /* Vert sarcelle foncé */
    --bg-dark-green: #064e3b;        /* Vert très foncé */
    
    /* Espacements */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 2rem;      /* 32px */
    --spacing-lg: 3rem;      /* 48px */
    --spacing-xl: 4rem;      /* 64px */
    --spacing-2xl: 6rem;     /* 96px */
    
    /* Tailles de police */
    --font-xs: 0.875rem;     /* 14px */
    --font-sm: 1rem;         /* 16px */
    --font-md: 1.125rem;     /* 18px */
    --font-lg: 1.5rem;       /* 24px */
    --font-xl: 2rem;         /* 32px */
    --font-2xl: 2.5rem;      /* 40px */
    --font-3xl: 3rem;        /* 48px */
    --font-4xl: 3.5rem;      /* 56px */
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Ombres */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* ========== CLASSES UTILITAIRES ========== */

/* Marges */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }

/* Paddings */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }

/* Texte */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-bold { font-weight: bold; }
.text-uppercase { text-transform: uppercase; }

/* Couleurs de texte */
.text-primary { color: var(--primary-color); }
.text-dark { color: var(--text-dark); }
.text-light { color: var(--text-light); }
.text-green { color: var(--primary-color); }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

/* Flex utilities */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}