/*
 * Variables CSS centralisees - charte graphique Frame Up Productions.
 * Toute couleur utilisee dans les composants du theme enfant DOIT passer
 * par une de ces variables : aucun code hexadecimal en dur ailleurs.
 */
:root {
    /* Couleurs de la charte graphique */
    --frameup-color-bg: #1a2333; /* marine profond - fond principal */
    --frameup-color-bg-rgb: 26, 35, 51;
    --frameup-color-accent: #2c74e4; /* bleu electrique - accent */
    --frameup-color-accent-rgb: 44, 116, 228;
    --frameup-color-text: #ffffff; /* texte principal */
    --frameup-color-text-secondary: #c7cdd9; /* texte secondaire gris clair */
    --frameup-color-danger: #e4432c; /* rouge - etats indisponible/erreur */

    /* Tons derives du marine/bleu, necessaires pour les etats d'interface
       (cartes, boutons desactives, superpositions) mais toujours issus
       de la meme famille de couleurs que la charte graphique. */
    --frameup-color-bg-elevated: #232e46; /* cartes / blocs sur fond marine */
    --frameup-color-bg-elevated-2: #2b3752; /* niveau au-dessus, hover */
    --frameup-color-border: rgba(255, 255, 255, 0.12);
    --frameup-color-disabled-bg: #3a4256;
    --frameup-color-disabled-text: #8890a0;
    --frameup-color-overlay: rgba(var(--frameup-color-bg-rgb), 0.55);
    --frameup-color-overlay-strong: rgba(var(--frameup-color-bg-rgb), 0.85);

    /* Rythme / forme communs aux composants de la page d'accueil */
    --frameup-radius-sm: 6px;
    --frameup-radius-md: 12px;
    --frameup-radius-lg: 20px;
    --frameup-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    --frameup-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
    --frameup-container-width: 1200px;
    --frameup-gutter: clamp(1.25rem, 4vw, 3rem);
    --frameup-section-spacing: clamp(3rem, 7vw, 6.5rem);
    --frameup-transition: 0.25s ease;
}