/**
 * Design tokens — couleurs, espacements, couches, durées d’animation.
 * Importé en premier (via app.css).
 */
:root {
    --body-background-color: #0a1015;
    --header-background-color: #000000;
    --primary-background-color: #0f1825;
    --secondary-background-color: #1a2d3d;
    --primary-border-color: #e8a020;
    --secondary-border-color: #2a4050;
    --primary-accent-color: #e8a020;
    --metadata-color: #4ab8c8;
    --primary-text-color: #c8c8c8;
    --secondary-text-color: #8a9ab0;
    --success-color: #4ac88a;
    --danger-color: #c84a4a;

    --content-max-width: 1200px;
    --main-padding-x: 25px;
    --main-padding-y: 15px;

    /* Breakpoints (réutilisés dans les media queries) */
    --bp-md: 700px;
    --bp-sm: 600px;

    /* Z-index — player (ordre lecture : poster < contrôles < loading/erreur) */
    --z-player-poster: 2;
    --z-player-controls: 3;
    --z-player-overlays: 4;

    /* Focus clavier — remplace outline: none sans rien mettre à la place */
    --focus-ring-color: var(--primary-accent-color);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* Animations (durées réduites automatiquement si prefers-reduced-motion) */
    --duration-instant: 0.1s;
    --duration-fast: 0.12s;
    --duration-short: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.25s;
    --easing-default: ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0.01ms;
        --duration-fast: 0.01ms;
        --duration-short: 0.01ms;
        --duration-normal: 0.01ms;
        --duration-slow: 0.01ms;
    }
}