:root {
    /* Couleurs principales */
    --primary-yellow: #FCCF05;
    --primary-black: #000000;
    --primary-purple: #6B4E9D;
    --white: #ffffff;
    
    /* Variations */
    --yellow-hover: #e3b800;
    --purple-hover: #583d7f;
    --gray-light: #f5f5f5;
    --gray-medium: #e0e0e0;
    --gray-dark: #333333;
    --error-color: #dc3545;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.85);

    /* Espacements */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Typographie */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Rayons */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 50px;

    /* Ombres */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25);
}