/* Variables personnalisées - Palette de couleurs et surcharge Bulma */

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
    /* === PALETTE DE COULEURS PERSONNALISÉES === */
    
    /* Violets/Purples */
    --color-purple-100: #E6DEFF;  /* Violet très clair */
    --color-purple-200: #C4B5FD;  /* Violet clair */
    --color-purple-300: #8B7EC8;  /* Violet moyen */
    --color-purple-400: #4C3E7A;  /* Violet foncé */
    
    /* Roses/Pinks */
    --color-pink-100: #F8D7DA;    /* Rose très clair */
    --color-pink-200: #E991B6;    /* Rose clair */
    --color-pink-300: #B8709B;    /* Rose moyen */
    --color-pink-400: #8B4E7A;    /* Rose foncé */
    
    /* Verts/Greens */
    --color-green-100: #E8F2E8;   /* Vert très clair */
    --color-green-200: #A8C8A8;   /* Vert clair */
    --color-green-300: #7BA875;   /* Vert moyen */
    --color-green-400: #5A7A58;   /* Vert foncé */
    
    /* Oranges/Corails */
    --color-coral-100: #F5E6E0;   /* Corail très clair */
    --color-coral-200: #F5A286;   /* Corail clair */
    --color-coral-300: #E8734A;   /* Corail moyen */
    --color-coral-400: #B85A3E;   /* Corail foncé */
    
    /* === COULEURS PRINCIPALES DU THÈME === */
    --primary-color: var(--color-purple-300);
    --primary-color-light: var(--color-purple-200);
    --primary-color-dark: var(--color-purple-400);
    --primary-color-hover: var(--color-purple-400);
    
    --secondary-color: var(--color-pink-300);
    --secondary-color-light: var(--color-pink-200);
    --secondary-color-dark: var(--color-pink-400);
    --secondary-color-hover: var(--color-pink-400);
    
    --accent-color: var(--color-green-300);
    --accent-color-light: var(--color-green-200);
    --accent-color-dark: var(--color-green-400);
    
    --warm-color: var(--color-coral-300);
    --warm-color-light: var(--color-coral-200);
    --warm-color-dark: var(--color-coral-400);
    
    /* === VERSIONS RGB POUR TRANSPARENCES === */
    --primary-color-rgb: 139, 126, 200;     /* #8B7EC8 */
    --secondary-color-rgb: 233, 145, 182;   /* #E991B6 */
    --accent-color-rgb: 123, 168, 117;      /* #7BA875 */
    
    /* === VARIABLES D'ANIMATIONS === */
    --animation-duration: 0.6s;
    --animation-duration-fast: 0.4s;
    --animation-duration-slow: 0.8s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-delay: 0.1s;
    --animation-delay-long: 0.15s;
    --animation-distance: 30px;
    --animation-distance-small: 15px;
    
    /* === SURCHARGE DES VARIABLES BULMA === */
    --bulma-primary: var(--primary-color);
    --bulma-primary-light: var(--primary-color-light);
    --bulma-primary-dark: var(--primary-color-dark);
    
    --bulma-link: var(--primary-color);
    --bulma-link-hover: var(--primary-color-hover);
    
    --bulma-info: var(--color-purple-200);
    --bulma-success: var(--accent-color);
    --bulma-warning: var(--warm-color);
    
    /* === COULEURS NEUTRES === */
    --white: #ffffff;
    --light: #fafafa;
    --grey-lightest: #f5f5f5;
    --grey-lighter: #eeeeee;
    --grey-light: #dbdbdb;
    --grey: #b5b5b5;
    --grey-dark: #7a7a7a;
    --grey-darker: #4a4a4a;
    --dark: #363636;
    --black: #0a0a0a;
    
    /* === COULEURS DE TEXTE === */
    --text-color: var(--grey-darker);
    --text-color-light: var(--grey-dark);
    --text-color-muted: var(--grey);
    --text-on-primary: var(--white);
    --text-on-secondary: var(--white);
    
    /* === COULEURS DE FOND === */
    --background-color: var(--white);
    --background-light: var(--light);
    --background-soft: var(--color-purple-100);
    --background-warm: var(--color-coral-100);
    --background-fresh: var(--color-green-100);
    
    /* === BORDURES ET OMBRES === */
    --border-color: var(--grey-light);
    --border-color-light: var(--grey-lighter);
    --border-radius: 8px;
    --border-radius-small: 4px;
    --border-radius-large: 12px;
    
    /* === BORDER RADIUS PERSONNALISÉS POUR CARDS === */
    --card-border-radius: 15px 50px 20px 0px;
    --card-border-radius-soft: 10px 30px 15px 0px;
    --card-border-radius-subtle: 8px 20px 12px 0px;
    
    --box-shadow: 0 0.5em 1em -0.125em rgba(75, 62, 122, 0.1), 0 0px 0 1px rgba(75, 62, 122, 0.02);
    --box-shadow-hover: 0 0.75em 1.5em -0.125em rgba(75, 62, 122, 0.15), 0 0px 0 1px rgba(75, 62, 122, 0.05);
    
    /* === TEXT SHADOWS === */
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --text-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.2);
    --text-shadow-strong: 0 3px 6px rgba(0, 0, 0, 0.4);
    
    /* === EFFETS GLASSMORPHISME === */
    --glass-background: rgba(255, 255, 255, 0.15);
    --glass-background-strong: rgba(255, 255, 255, 0.35);
    --glass-background-subtle: rgba(255, 255, 255, 0.15);
    --glass-backdrop-filter: blur(10px);
    --glass-backdrop-filter-strong: blur(15px);
    --glass-backdrop-filter-subtle: blur(6px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
    --glass-border-strong: 1px solid rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.2);
    
    /* === ESPACEMENTS === */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 3rem;       /* 48px */
    --spacing-xxl: 4.5rem;    /* 72px */
    
    /* === TYPOGRAPHIE === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
    --font-family-heading: 'Quicksand', 'Inter', sans-serif;
    --font-family-display: 'Quicksand', sans-serif;
    --font-family-body: 'Inter', sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 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-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 2.50rem; 
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* === TRANSITIONS === */
    --transition-speed: 0.3s;
    --transition-speed-fast: 0.15s;
    --transition-speed-slow: 0.5s;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* === Z-INDEX === */
    --z-dropdown: 20;
    --z-sticky: 30;
    --z-fixed: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
}