:root {
    /* Default Colors */
        /* Black */
        --neutral-900: #171717;
        --neutral-800: #262626;
        --neutral-700: #404040;

        /* Black (transparency) */
        --neutral-900-trans: rgba(23, 23, 23, 0.9);
        --neutral-800-trans: rgba(38, 38, 38, 0.9);
        --neutral-700-trans: rgba(64, 64, 64, 0.9);
    
        /* White */
        --neutral-300: #d4d4d4;
        --neutral-200: #e5e5e5;
        --neutral-100: #f5f5f5;

        /* White (transparency) */
        --neutral-300-trans: rgba(212, 212, 212, 0.9);
        --neutral-200-trans: rgba(229, 229, 229, 0.9);
        --neutral-100-trans: rgba(245, 245, 245, 0.9);
    
        /* Système */
        --white: #ffffff;
        --black: #000000;
    
        /* Couleur principale */
        --main-100: #3ff38f;
        --main-200: #31f286;
        --main-300: #22f17e;
        --main-400: #13f075;
        --main-500: #0fe66e;
        --main-600: #0ed867;
        --main-700: #0dc960;
        --main-800: #0cbb5a;
        --main-900: #0bad53;
    
        /* Accents */
            /* Vert */
            --green-200: #d3fabf;
            --green-300: #c8f9af;
            --green-500: #0fe66e;
            --green-600: #0ed867;
            --green-800: #115055;
            --green-900: #0e4347;
        
            /* Rose */
            --pink-200: #fcc0f9;
            --pink-300: #fbb1f7;
            --pink-500: #fa5ee9;
            --pink-600: #f94de7;
            --pink-800: #44174f;
            --pink-900: #3a1443;
        
            /* Rouge */
            --red-200: #f7d1b6;
            --red-300: #f5c8a8;
            --red-500: #fa6033;
            --red-600: #fa5424;
            --red-800: #5d1928;
            --red-900: #4f1522;
        
            /* Bleu */
            --blue-200: #b7e7fb;
            --blue-300: #a8e2fa;
            --blue-500: #463bfa;
            --blue-600: #3a2efa;
            --blue-800: #112e50;
            --blue-900: #0e2744;
  
    /* Colors */
        /* Thème clair */
        --light-main: var(--main-500);
        --light-main-light: var(--main-300);
        --light-main-dark: var(--main-800);

            /* Forground */
            --light-fg-1: var(--neutral-900);
            --light-fg-2: var(--neutral-800);
            --light-fg-3: var(--neutral-700);
            --light-fg-contrast: var(--neutral-800);
    
            /* Background */
            --light-bg-1: var(--neutral-200);
            --light-bg-2: var(--neutral-100);
            --light-bg-3: var(--neutral-300);
    
            /* Background (transparency) */
            --light-bg-trans-1: var(--neutral-200-trans);
            --light-bg-trans-2: var(--neutral-100-trans);
            --light-bg-trans-3: var(--neutral-300-trans);
    
            /* Accent */
                /* Vert */
                --light-accent-green: var(--green-500);
                --light-accent-green-light: var(--green-200);
                --light-accent-green-dark: var(--green-800);
            
                /* Rose */
                --light-accent-pink: var(--pink-500);
                --light-accent-pink-light: var(--pink-200);
                --light-accent-pink-dark: var(--pink-800);
            
                /* Rouge */
                --light-accent-red: var(--red-500);
                --light-accent-red-light: var(--red-200);
                --light-accent-red-dark: var(--red-800);
            
                /* Bleu */
                --light-accent-blue: var(--blue-500);
                --light-accent-blue-light: var(--blue-200);
                --light-accent-blue-dark: var(--blue-800);
  
        /* Thème sombre */
        --dark-main: var(--main-600);
        --dark-main-light: var(--main-400);
        --dark-main-dark: var(--main-900);

            /* Forground */
            --dark-fg-1: var(--neutral-100);
            --dark-fg-2: var(--neutral-200);
            --dark-fg-3: var(--neutral-300);
            --dark-fg-contrast: var(--neutral-800);

            /* Background */
            --dark-bg-1: var(--neutral-800);
            --dark-bg-2: var(--neutral-700);
            --dark-bg-3: var(--neutral-900);

            /* Background (transparency) */
            --dark-bg-trans-1: var(--neutral-800-trans);
            --dark-bg-trans-2: var(--neutral-700-trans);
            --dark-bg-trans-3: var(--neutral-900);

            /* Accent */
                /* Vert */
                --dark-accent-green: var(--green-600);
                --dark-accent-green-light: var(--green-300);
                --dark-accent-green-dark: var(--green-900);

                /* Rose */
                --dark-accent-pink: var(--pink-600);
                --dark-accent-pink-light: var(--pink-300);
                --dark-accent-pink-dark: var(--pink-900);

                /* Rouge */
                --dark-accent-red: var(--red-600);
                --dark-accent-red-light: var(--red-300);
                --dark-accent-red-dark: var(--red-900);

                /* Bleu */
                --dark-accent-blue: var(--blue-600);
                --dark-accent-blue-light: var(--blue-300);
                --dark-accent-blue-dark: var(--blue-900);
}

/* Détection automatique du mode clair/sombre */
@media (prefers-color-scheme: dark) {
    :root {
        --main: var(--dark-main);
        --main-light: var(--dark-main-light);
        --main-dark: var(--dark-main-dark);

        /* Forground */
        --fg-1: var(--dark-fg-1);
        --fg-2: var(--dark-fg-2);
        --fg-3: var(--dark-fg-3);
        --fg-contrast: var(--dark-fg-contrast);

        /* Background */
        --bg-1: var(--dark-bg-1);
        --bg-2: var(--dark-bg-2);
        --bg-3: var(--dark-bg-3);

        /* Background (transparency) */
        --bg-trans-1: var(--dark-bg-trans-1);
        --bg-trans-2: var(--dark-bg-trans-2);
        --bg-trans-3: var(--dark-bg-trans-3);

        /* Accent */
        --accent-green: var(--dark-accent-green);
        --accent-green-light: var(--dark-accent-green-light);
        --accent-green-dark: var(--dark-accent-green-dark);

        --accent-pink: var(--dark-accent-pink);
        --accent-pink-light: var(--dark-accent-pink-light);
        --accent-pink-dark: var(--dark-accent-pink-dark);

        --accent-red: var(--dark-accent-red);
        --accent-red-light: var(--dark-accent-red-light);
        --accent-red-dark: var(--dark-accent-red-dark);

        --accent-blue: var(--dark-accent-blue);
        --accent-blue-light: var(--dark-accent-blue-light);
        --accent-blue-dark: var(--dark-accent-blue-dark);
    }
}

/* Mode clair par défaut */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
    :root {
        --main: var(--light-main);
        --main-light: var(--light-main-light);
        --main-dark: var(--light-main-dark);

        /* Forground */
        --fg-1: var(--light-fg-1);
        --fg-2: var(--light-fg-2);
        --fg-3: var(--light-fg-3);
        --fg-contrast: var(--light-fg-contrast);

        /* Background */
        --bg-1: var(--light-bg-1);
        --bg-2: var(--light-bg-2);
        --bg-3: var(--light-bg-3);

        /* Background (transparency) */
        --bg-trans-1: var(--light-bg-trans-1);
        --bg-trans-2: var(--light-bg-trans-2);
        --bg-trans-3: var(--light-bg-trans-3);

        /* Accent */
        --accent-green: var(--light-accent-green);
        --accent-green-light: var(--light-accent-green-light);
        --accent-green-dark: var(--light-accent-green-dark);

        --accent-pink: var(--light-accent-pink);
        --accent-pink-light: var(--light-accent-pink-light);
        --accent-pink-dark: var(--light-accent-pink-dark);

        --accent-red: var(--light-accent-red);
        --accent-red-light: var(--light-accent-red-light);
        --accent-red-dark: var(--light-accent-red-dark);

        --accent-blue: var(--light-accent-blue);
        --accent-blue-light: var(--light-accent-blue-light);
        --accent-blue-dark: var(--light-accent-blue-dark);
    }
}

/* Dark mode forcé */
.dark-mode {
    --main: var(--dark-main);
    --main-light: var(--dark-main-light);
    --main-dark: var(--dark-main-dark);

    /* Forground */
    --fg-1: var(--dark-fg-1);
    --fg-2: var(--dark-fg-2);
    --fg-3: var(--dark-fg-3);
    --fg-contrast: var(--dark-fg-contrast);

    /* Background */
    --bg-1: var(--dark-bg-1);
    --bg-2: var(--dark-bg-2);
    --bg-3: var(--dark-bg-3);

    /* Background (transparency) */
    --bg-trans-1: var(--dark-bg-trans-1);
    --bg-trans-2: var(--dark-bg-trans-2);
    --bg-trans-3: var(--dark-bg-trans-3);

    /* Accent */
    --accent-green: var(--dark-accent-green);
    --accent-green-light: var(--dark-accent-green-light);
    --accent-green-dark: var(--dark-accent-green-dark);

    --accent-pink: var(--dark-accent-pink);
    --accent-pink-light: var(--dark-accent-pink-light);
    --accent-pink-dark: var(--dark-accent-pink-dark);

    --accent-red: var(--dark-accent-red);
    --accent-red-light: var(--dark-accent-red-light);
    --accent-red-dark: var(--dark-accent-red-dark);

    --accent-blue: var(--dark-accent-blue);
    --accent-blue-light: var(--dark-accent-blue-light);
    --accent-blue-dark: var(--dark-accent-blue-dark);
}