/* Couleurs principales reprises du site actuel */

:root {
    /* Noir du site (remplacer ici pour changer partout) */
    --color-black: #140B1B;
    --color-black-rgb: 20, 11, 27;

    --color-white: #ffffff;
    --color-lightgrey: #8d8e98;
    --color-darkpurple: #2C123B;
    --color-darkpurple-medium: #48265c;
    --color-lightpurple: #666a81;
    --gradient-pink: linear-gradient(30deg, #FF31D2, #FC9F63);
    --gradient-pink-text: linear-gradient(30deg, #ff69b4, #ffb347, #ffe066);

    /* Barre dégradée en haut de toutes les pages — modifier ici pour changer couleurs/hauteur */
    --top-bar-height: 5px;
    --top-bar-color-1: #5DFFEF;
    --top-bar-color-2: #5DBEFF;
    --top-bar-color-3: #FB00FF;
    --top-bar-color-4: #FFBD43;
    --top-bar-gradient: linear-gradient(
        to right,
        var(--top-bar-color-1),
        var(--top-bar-color-2),
        var(--top-bar-color-3),
        var(--top-bar-color-4)
    );
    /* Même dégradé avec angle 75deg (bordures, sections) */
    --top-bar-gradient-75deg: linear-gradient(
        75deg,
        var(--top-bar-color-1),
        var(--top-bar-color-2),
        var(--top-bar-color-3),
        var(--top-bar-color-4)
    );
}

.textcolor_white {
    color: var(--color-white);
}

.textcolor_lightgrey {
    color: var(--color-lightgrey);
}

.textcolor_darkpurple {
    color: var(--color-darkpurple);
}

.textcolor_darkpurple_medium {
    color: var(--color-darkpurple-medium);
}

.textcolor_lightpurple {
    color: var(--color-lightpurple);
}

.textcolor_black {
    color: var(--color-black);
}

.textcolor_gradient_pink {
    background: var(--gradient-pink-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.color_gradient_pink {
    background: var(--gradient-pink);
}