/* ==========================================
   VARIABLES.CSS - Variables globales
   Utilisées dans TOUS les CSS du projet
   ========================================== */

:root {
    /* === COULEURS PRINCIPALES === */
    --primary-color: #6b7280;          /* Gris moyen */
    --primary-hover: #4b5563;          /* Gris foncé */
    --primary-light: #9ca3af;          /* Gris clair */
    --primary-lighter: #d1d5db;        /* Gris très clair */
    --primary-dark: #374151;           /* Gris très foncé */

    /* === COULEURS SECONDAIRES (ROUGE ATRADIUS) === */
    --secondary-color: #C8102E;        /* Rouge Atradius (logo) */
    --secondary-hover: #A00D25;        /* Rouge foncé */
    --secondary-light: #E63946;        /* Rouge clair */
    --secondary-dark: #7f1d1d;         /* Rouge très foncé */
    --secondary-darker: #991B1B ;         /* Rouge très foncé */

    /* === COULEURS D'ACCENT === */
    --accent-success: #48bb78;         /* Vert succès */
    --accent-warning: #ed8936;         /* Orange warning */
    --accent-error: #e53e3e;           /* Rouge erreur */
    --accent-info: #4299e1;            /* Bleu info */

    /* === NUANCES DE GRIS === */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* === FOND ET SURFACES === */
    --bg-white: #ffffff;
    --bg-light: #f9fafb;
    --bg-gray: #f3f4f6;

    /* === TEXTE === */
    --text-dark: #1f2937;              /* Texte principal */
    --text-normal: #4b5563;            /* Texte secondaire */
    --text-light: #6b7280;             /* Texte tertiaire */
    --text-muted: #9ca3af;             /* Texte discret */
    --text-white: #ffffff;             /* Texte blanc */

    /* === BORDURES === */
    --border-light: #e5e7eb;           /* Bordure claire */
    --border-normal: #d1d5db;          /* Bordure normale */
    --border-dark: #9ca3af;            /* Bordure foncée */

    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    /* === OMBRES === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px 0 rgba(0, 0, 0, 0.15);

    /* === ESPACEMENTS === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-m: 12px;
    --spacing-md: 16px;
    --spacing-l: 24px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* === TYPOGRAPHIE === */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-main: Verdana, Arial, Helvetica, sans-serif; var(--font-size-xs); font-weight: normal; color: #000000;
    --font-family-sidebar: system-ui;
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.85rem;    /* 13px */
    --font-size-m: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;

    /* === TRANSITIONS === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* === Z-INDEX === */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal-backdrop: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;

    /* === STATUS BADGES === */
    --badge-active-bg: #dcfce7;
    --badge-active-text: #166534;
    --badge-active-border: #bbf7d0;
    --badge-inactive-bg: #fee2e2;
    --badge-inactive-text: #991b1b;
    --badge-inactive-border: #fecaca;

    /* === ALERTS === */
    --alert-info-bg: #e0f2fe;
    --alert-info-border: #0284c7;
    --alert-info-text: #075985;
}