/* ===== VARIABLES CSS - GREI Investment ===== */

:root {
    /* ===== PALETTE DE COULEURS ===== */
    
    /* Couleurs primaires */
    --primary-color: #2563eb;        /* Bleu moderne */
    --primary-dark: #1d4ed8;         /* Bleu foncé */
    --primary-light: #3b82f6;        /* Bleu clair */
    --primary-50: #eff6ff;           /* Bleu très clair */
    --primary-100: #dbeafe;          /* Bleu clair */
    --primary-200: #bfdbfe;          /* Bleu moyen */
    --primary-300: #93c5fd;          /* Bleu */
    --primary-400: #60a5fa;          /* Bleu */
    --primary-500: #3b82f6;          /* Bleu principal */
    --primary-600: #2563eb;          /* Bleu */
    --primary-700: #1d4ed8;          /* Bleu foncé */
    --primary-800: #1e40af;          /* Bleu très foncé */
    --primary-900: #1e3a8a;          /* Bleu le plus foncé */
    
    /* Couleurs secondaires */
    --secondary-color: #10b981;      /* Vert écologique */
    --secondary-dark: #059669;       /* Vert foncé */
    --secondary-light: #34d399;      /* Vert clair */
    --secondary-50: #ecfdf5;         /* Vert très clair */
    --secondary-100: #d1fae5;        /* Vert clair */
    --secondary-200: #a7f3d0;        /* Vert moyen */
    --secondary-300: #6ee7b7;        /* Vert */
    --secondary-400: #34d399;        /* Vert */
    --secondary-500: #10b981;        /* Vert principal */
    --secondary-600: #059669;        /* Vert */
    --secondary-700: #047857;        /* Vert foncé */
    --secondary-800: #065f46;        /* Vert très foncé */
    --secondary-900: #064e3b;        /* Vert le plus foncé */
    
    /* Couleurs d'accent */
    --accent-color: #f59e0b;         /* Orange accent */
    --accent-dark: #d97706;          /* Orange foncé */
    --accent-light: #fbbf24;         /* Orange clair */
    --accent-50: #fffbeb;            /* Orange très clair */
    --accent-100: #fef3c7;           /* Orange clair */
    --accent-200: #fde68a;           /* Orange moyen */
    --accent-300: #fcd34d;           /* Orange */
    --accent-400: #fbbf24;           /* Orange */
    --accent-500: #f59e0b;           /* Orange principal */
    --accent-600: #d97706;           /* Orange */
    --accent-700: #b45309;           /* Orange foncé */
    --accent-800: #92400e;           /* Orange très foncé */
    --accent-900: #78350f;           /* Orange le plus foncé */
    
    /* Couleurs neutres */
    --white: #ffffff;
    --black: #000000;
    
    /* Système 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;
    
    /* Couleurs sémantiques */
    --success-color: #10b981;        /* Vert succès */
    --warning-color: #f59e0b;        /* Orange avertissement */
    --error-color: #ef4444;          /* Rouge erreur */
    --info-color: #3b82f6;           /* Bleu information */
    
    /* ===== OMBRES ===== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* Ombres colorées */
    --shadow-primary: 0 4px 14px 0 rgb(37 99 235 / 0.25);
    --shadow-secondary: 0 4px 14px 0 rgb(16 185 129 / 0.25);
    --shadow-accent: 0 4px 14px 0 rgb(245 158 11 / 0.25);
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.375rem;           /* 6px */
    --radius: 0.5rem;                /* 8px */
    --radius-md: 0.75rem;            /* 12px */
    --radius-lg: 1rem;               /* 16px */
    --radius-xl: 1.5rem;             /* 24px */
    --radius-2xl: 2rem;              /* 32px */
    --radius-full: 9999px;           /* Cercle parfait */
    
    /* ===== TYPOGRAPHIE ===== */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Tailles de police */
    --text-xs: 0.75rem;              /* 12px */
    --text-sm: 0.875rem;             /* 14px */
    --text-base: 1rem;               /* 16px */
    --text-lg: 1.125rem;             /* 18px */
    --text-xl: 1.25rem;              /* 20px */
    --text-2xl: 1.5rem;              /* 24px */
    --text-3xl: 1.875rem;            /* 30px */
    --text-4xl: 2.25rem;             /* 36px */
    --text-5xl: 3rem;                /* 48px */
    --text-6xl: 3.75rem;             /* 60px */
    --text-7xl: 4.5rem;              /* 72px */
    --text-8xl: 6rem;                /* 96px */
    --text-9xl: 8rem;                /* 128px */
    
    /* Poids de police */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Hauteur de ligne */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* ===== ESPACEMENT ===== */
    --space-0: 0;
    --space-1: 0.25rem;              /* 4px */
    --space-2: 0.5rem;               /* 8px */
    --space-3: 0.75rem;              /* 12px */
    --space-4: 1rem;                 /* 16px */
    --space-5: 1.25rem;              /* 20px */
    --space-6: 1.5rem;               /* 24px */
    --space-8: 2rem;                 /* 32px */
    --space-10: 2.5rem;              /* 40px */
    --space-12: 3rem;                /* 48px */
    --space-16: 4rem;                /* 64px */
    --space-20: 5rem;                /* 80px */
    --space-24: 6rem;                /* 96px */
    --space-32: 8rem;                /* 128px */
    
    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    
    /* ===== BREAKPOINTS ===== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    --gradient-hero: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-dark: linear-gradient(135deg, var(--gray-800), var(--gray-900));
    
    /* ===== EFFETS ===== */
    --blur-sm: blur(4px);
    --blur: blur(8px);
    --blur-md: blur(12px);
    --blur-lg: blur(16px);
    --blur-xl: blur(24px);
    --blur-2xl: blur(40px);
    --blur-3xl: blur(64px);
    
    /* ===== ANIMATIONS ===== */
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    
    /* ===== CONFIGURATION SPÉCIFIQUE GREI ===== */
    --grei-brand-color: var(--primary-color);
    --grei-accent-color: var(--secondary-color);
    --grei-text-color: var(--gray-800);
    --grei-bg-color: var(--white);
    --grei-border-color: var(--gray-200);
    
    /* Couleurs spécifiques au domaine */
    --recycling-green: #059669;      /* Vert recyclage */
    --construction-blue: #1d4ed8;    /* Bleu construction */
    --innovation-purple: #7c3aed;    /* Violet innovation */
    --sustainability-teal: #0d9488;  /* Teal durabilité */
}

/* ===== THÈME SOMBRE (FUTUR) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Variables pour le thème sombre - à implémenter */
        --grei-bg-color: var(--gray-900);
        --grei-text-color: var(--gray-100);
        --grei-border-color: var(--gray-700);
    }
}

/* ===== UTILITAIRES CSS ===== */

/* Classes utilitaires pour les couleurs */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-error { color: var(--error-color) !important; }
.text-info { color: var(--info-color) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-error { background-color: var(--error-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

/* Classes utilitaires pour les gradients */
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-secondary { background: var(--gradient-secondary) !important; }
.bg-gradient-accent { background: var(--gradient-accent) !important; }
.bg-gradient-hero { background: var(--gradient-hero) !important; }
.bg-gradient-dark { background: var(--gradient-dark) !important; }

/* Classes utilitaires pour les ombres */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-secondary { box-shadow: var(--shadow-secondary) !important; }
.shadow-accent { box-shadow: var(--shadow-accent) !important; }

/* Classes utilitaires pour les transitions */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-normal { transition: all var(--transition-normal) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }
.transition-bounce { transition: all var(--transition-bounce) !important; }

/* Classes utilitaires pour les border radius */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }