:root {
    /* Variables pour le thème clair */
    --color-1: #000;
    --color-2: #888;

    /* body */
    --color-body: #f7f7f7;
    --color-nav: rgba(230, 230, 230, 0.8);
    --color-bloc: #fff;
    --color-bloc2: #f7f7f7;

    /* colors */
    --color-purple: #7a4add;
    --color-yellow: #c6e83a;
    --color-green: #00ba7c;
    --color-red: #e73b3b;
    --color-blue: #1877f2;
    --color-pink: #FF385C;
    --color-orange: #f68d51;
    --color-cyan: #a6dbe4;
    --color-gold: #c5a764;
    --color-grey: #ccc;
    --color-pink2: #fc5271;

    /* greys */
    --color-background: #f1f1f1;
    --color-background-light: #f7f7f7;
    --color-border: #e5e5e5;
    --color-border-dark: #ddd;

    /* black & white */
    --color-black: #222;
    --color-white: #fff;
    --color-black100: #000;
    --color-placeholder: #888;

    /* transparent */
    --color-white-transparent: rgba(250, 250, 250, 0.1);
    --color-black-transparent: rgba(0, 0, 0, 0.3);
    --color-black-transparent2: rgba(0, 0, 0, 0.7);
    --color-black-transparent3: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 100%);
    --color-white-transparent2: rgba(250, 250, 250, 0.9);

    /* shadow */
    --color-shadow: 0 5px 10px rgba(0,0,0,0.1);
    --color-shadow-search: 10px 0 10px rgba(0, 0, 0, 0.1);
    --color-shadow-soft: -20px 6px 50px rgba(0, 0, 0, 0.3);
    --color-shadow-soft2: 6px 20px 50px rgba(0, 0, 0, 0.2);

    /* popup */
    --color-background-popup: rgba(0, 0, 0, 0.5);

    /* corner */
    --color-corner: linear-gradient(20deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.5) 100%);
    --color-corner-black: linear-gradient(20deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3) 100%);

    /* stroke */
    --color-stroke: url(../images/on.svg);
    --color-stroke-yellow: url(../images/on-yellow.svg);

    /* padding */
    --color-padding-header: 0 100px 0 100px;
    --color-padding-footer: 20px 100px 20px 100px;
    --color-padding-banner: 50px 100px 0 100px;
    --color-padding-section: 100px 100px 0 100px;
    --color-padding-icones: 0 100px 0 100px;
    --color-padding-filters: 20px 100px 0 100px;
    --color-padding-explore: 0 0 0 100px;

    --color-solana: linear-gradient(35deg, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%);
    --color-apple: linear-gradient(90deg, #0894FF, #C959DD 34%, #FF2E54 68%, #FF9004);
    --color-apple2: linear-gradient(-108deg, #1877f2 60%, #1FA2FF);
    --color-gradient: linear-gradient(108deg,#0894FF,#C959DD 34%,#FF2E54 68%,#FF9004);

    --color-gold2: linear-gradient(0deg, #ffac33, #ffd700);
}

/* Variables pour le thème sombre */
@media (prefers-color-scheme: dark) {
    :root {
        --color-1: #fff;
        --color-2: #777;

        /* body */
        --color-body: #080808;
        --color-nav: rgba(50, 50, 50, 0.8);
        --color-bloc: #171717;
        --color-bloc2: #333;

        /* colors */
        --color-purple: #9c6bff;
        --color-yellow: #c6e83a;
        --color-green: #018b5d;
        --color-red: #e73b3b;
        --color-blue: #1877f2;
        --color-pink: #ff517d;
        --color-orange: #f78c60;
        --color-cyan: #87cbd3;
        --color-gold: #b3965c;
        --color-grey: #888;
        --color-pink2: #f96b84;

        /* greys */
        --color-background: #1e1e1e;
        --color-background-light: #2c2c2c;
        --color-border: #3d3d3d;
        --color-border-dark: #555;

        /* black & white */
        --color-black: #000;
        --color-white: #fff;
        --color-black100: #fff;
        --color-placeholder: #bbb;

        /* transparent */
        --color-white-transparent: rgba(20, 20, 20, 0.1);
        --color-black-transparent: rgba(255, 255, 255, 0.3);
        --color-black-transparent2: rgba(255, 255, 255, 0.7);
        --color-black-transparent3: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0) 100%);
        --color-white-transparent2: rgba(20, 20, 20, 0.9);

        --color-modal: rgba(255,255,255,0.6);

        /* shadow */
        --color-shadow: 0 5px 10px rgba(0,0,0,0.7);
        --color-shadow-search: 10px 0 10px rgba(255, 255, 255, 0.1);
        --color-shadow-soft: -20px 6px 50px rgba(255, 255, 255, 0.3);
        --color-shadow-soft2: 6px 20px 50px rgba(255, 255, 255, 0.2);

        /* popup */
        --color-background-popup: rgba(255, 255, 255, 0.5);

        /* corner */
        --color-corner: linear-gradient(20deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
        --color-corner-black: linear-gradient(20deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.3) 100%);
    }
}