/**
 * Naery - Variables CSS
 * This file centralizes all CSS variables for the site
 */

/*--------------------------------------------------
 # Google Fonts Import
--------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/*--------------------------------------------------
 # CSS Variables
--------------------------------------------------*/
:root {
    /*--------------------------------------------------
     # Colors
     --------------------------------------------------*/
    /* Primary colors */
    --color-primary: #7b1fa2;
    --color-primary-light: #ae52d4;
    --color-primary-dark: #4527a0;
    
    /* Secondary colors */
    --color-secondary: #4527a0;
    --color-secondary-light: #7953d2;
    --color-secondary-dark: #301b70;
    
    /* Gray shades */
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e9e9e9;
    --color-gray-300: #d9d9d9;
    --color-gray-400: #b0b0b0;
    --color-gray-500: #909090;
    --color-gray-600: #666666;
    --color-gray-700: #444444;
    --color-gray-800: #333333;
    --color-gray-900: #111111;
    
    /* Couleurs su00e9mantiques */
    --color-text: #333333;
    --color-text-light: #777777;
    --color-background: #ffffff;
    --color-background-light: #f9f9f9;
    
    /* Couleurs de gradient */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-hero: linear-gradient(to left, #e835d1 10%, #cc32c0 20%, rgba(165, 40, 175, 1) 35%, rgba(140, 50, 185, 1) 50%, rgba(110, 60, 195, 1) 75%, #303db5 100%);
    
    /* Typographie */
    --font-primary: 'Nunito Sans', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md: 1.125rem;    /* 18px */
    --font-size-lg: 1.25rem;     /* 20px */
    --font-size-xl: 1.5rem;      /* 24px */
    --font-size-2xl: 1.875rem;   /* 30px */
    --font-size-3xl: 2.25rem;    /* 36px */
    --font-size-4xl: 3rem;       /* 48px */
    --font-size-5xl: 3.75rem;    /* 60px */
    
    /* Espacement */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 15px 25px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    
    /* Variables spu00e9cifiques pour la timeline du projet */
    --timeline-purple: var(--color-primary);
    --timeline-grey: var(--color-gray-300);
    --timeline-node-size: 48px;
    --timeline-bar-height: 10px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index */
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-fixed: 300;
    --z-index-modal: 400;
    --z-index-popover: 500;
    --z-index-tooltip: 600;
}