/* Palette QuizSante */
:root {
    /* Couleurs principales */
    --quiz-red: #EF476F;
    --quiz-blue: #118AB2;
    --quiz-green: #059669;
    --quiz-yellow: #D4981F;
    --quiz-purple: #7B2CBF;
    --quiz-orange: #E07B3A;

    /* Couleurs sombres des boutons (pour texte/hover) */
    --quiz-red-dark: #C03858;
    --quiz-blue-dark: #0E6E8E;
    --quiz-green-dark: #047854;
    --quiz-yellow-dark: #B07E19;

    /* Couleurs de l'app */
    --app-primary: var(--quiz-purple);
    --app-primary-dark: #6322A0;
    --app-accent: var(--quiz-yellow);

    /* Backgrounds */
    --bg-main: #f8f9fa;
    --bg-card: #ffffff;
    --bg-header: var(--quiz-purple);
    --bg-question: #3B1578;
    --bg-overlay: rgba(0, 0, 0, 0.6);

    /* Texte */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-dark: #ffffff;
    --text-on-color: #ffffff;

    /* Bordures */
    --border-color: #e2e8f0;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.2);

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

    /* Layout */
    --header-height: 48px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Timer */
    --timer-color: var(--quiz-green);
    --timer-warning: var(--quiz-yellow);
    --timer-danger: var(--quiz-red);

    /* Z-index */
    --z-modal: 1000;
    --z-toast: 1100;
    --z-confetti: 900;
}

/* Dark mode */
[data-theme="dark"] {
    --bg-main: #1a1a2e;
    --bg-card: #16213e;
    --bg-question: #0f0e17;
    --bg-overlay: rgba(0, 0, 0, 0.75);

    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-color: #334155;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5);
}