/*
|--------------------------------------------------------------------------
| JEUDEFI — THÈME GLOBAL
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   VARIABLES CLAIRES
   ========================================================================== */

html[data-jd-theme="light"] {

    --jd-background: #f5f6f8;
    --jd-surface: #ffffff;
    --jd-surface-secondary: #f0f1f3;

    --jd-text: #171717;
    --jd-text-secondary: #62656b;

    --jd-border: #e1e3e7;

    --jd-input-background: #ffffff;
    --jd-input-text: #171717;

    --jd-shadow: rgba(0, 0, 0, 0.08);

    --jd-red: #e9252b;
    --jd-red-hover: #c91d23;

    --jd-success: #1f9d55;
    --jd-warning: #d88a00;
}


/* ==========================================================================
   VARIABLES SOMBRES
   ========================================================================== */

html[data-jd-theme="dark"] {

    --jd-background: #111214;
    --jd-surface: #1a1c1f;
    --jd-surface-secondary: #22252a;

    --jd-text: #f5f5f5;
    --jd-text-secondary: #b9bcc2;

    --jd-border: #303238;

    --jd-input-background: #24272c;
    --jd-input-text: #f5f5f5;

    --jd-shadow: rgba(0, 0, 0, 0.35);

    --jd-red: #e9252b;
    --jd-red-hover: #ff343a;

    --jd-success: #42c978;
    --jd-warning: #f0aa32;
}


/* ==========================================================================
   THÈME SYSTÈME
   ========================================================================== */

@media (prefers-color-scheme: dark) {

    html[data-jd-theme="system"] {

        --jd-background: #111214;
        --jd-surface: #1a1c1f;
        --jd-surface-secondary: #22252a;

        --jd-text: #f5f5f5;
        --jd-text-secondary: #b9bcc2;

        --jd-border: #303238;

        --jd-input-background: #24272c;
        --jd-input-text: #f5f5f5;

        --jd-shadow: rgba(0, 0, 0, 0.35);

        --jd-red: #e9252b;
        --jd-red-hover: #ff343a;

        --jd-success: #42c978;
        --jd-warning: #f0aa32;
    }
}

@media (prefers-color-scheme: light) {

    html[data-jd-theme="system"] {

        --jd-background: #f5f6f8;
        --jd-surface: #ffffff;
        --jd-surface-secondary: #f0f1f3;

        --jd-text: #171717;
        --jd-text-secondary: #62656b;

        --jd-border: #e1e3e7;

        --jd-input-background: #ffffff;
        --jd-input-text: #171717;

        --jd-shadow: rgba(0, 0, 0, 0.08);

        --jd-red: #e9252b;
        --jd-red-hover: #c91d23;

        --jd-success: #1f9d55;
        --jd-warning: #d88a00;
    }
}


/* ==========================================================================
   BASE DU SITE
   ========================================================================== */

html {
    background: var(--jd-background);
}

body {
    background-color: var(--jd-background);
    color: var(--jd-text);
}


/* ==========================================================================
   ÉLÉMENTS COMMUNS
   ========================================================================== */

.jd-card,
.card,
.section,
.panel,
.box,
.modal,
.popup,
.dropdown,
.menu,
.profile-card,
.settings-card {

    background-color: var(--jd-surface);
    color: var(--jd-text);
    border-color: var(--jd-border);
    box-shadow: 0 4px 18px var(--jd-shadow);
}


/* ==========================================================================
   TEXTES
   ========================================================================== */

.jd-text,
.text,
p,
label {

    color: var(--jd-text);
}

.jd-text-secondary,
.text-secondary,
small {

    color: var(--jd-text-secondary);
}


/* ==========================================================================
   CHAMPS
   ========================================================================== */

input,
textarea,
select {

    background-color: var(--jd-input-background);
    color: var(--jd-input-text);
    border-color: var(--jd-border);
}

input::placeholder,
textarea::placeholder {

    color: var(--jd-text-secondary);
}


/* ==========================================================================
   BOUTONS JEUDEFI
   ========================================================================== */

.jd-button,
.primary-button,
.save-button {

    background-color: var(--jd-red);
    color: #ffffff;
}

.jd-button:hover,
.primary-button:hover,
.save-button:hover {

    background-color: var(--jd-red-hover);
}


/* ==========================================================================
   LIENS
   ========================================================================== */

a {
    color: var(--jd-red);
}


/* ==========================================================================
   BORDURES
   ========================================================================== */

hr {
    border-color: var(--jd-border);
}


/* ==========================================================================
   TEXTE PLUS GRAND
   ========================================================================== */

html.jd-large-text {
    font-size: 110%;
}


/* ==========================================================================
   CONTRASTE ÉLEVÉ
   ========================================================================== */

html.jd-high-contrast {

    --jd-border: #000000;
}

html[data-jd-theme="dark"].jd-high-contrast {

    --jd-border: #ffffff;
}


/* ==========================================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================================== */

html.jd-reduce-animations *,
html.jd-reduce-animations *::before,
html.jd-reduce-animations *::after {

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}