html[data-theme='dark']{

    --primary-color:hsl(0, 85%, 60%);
    --primary-color-70:hsla(0, 85%, 60%, .7); /* Home Concerts cancelled */
    --primary-color-25:hsla(0, 85%, 60%, .25); /* app-bootsrap.css .btn:focus */
    --primary-color-light:hsl(0, 85%, 80%);
    --primary-color-light-80: hsla(0, 85%, 80%, 0.8); /* Contactmessages/add.css border form */
	--primary-color-dark:hsl(0, 85%, 40%);

    --purple-color: hsl(328, 65%, 35%);

    --body-bg-color-hsl: var(--hue), 12%, 14%;
    --body-bg-color: hsl(var(--body-bg-color-hsl));
    --body-color: hsl(var(--hue), 50%, 92%);
    --body-color-2: hsl(var(--hue), 25%, 63%); /* Posts/view.css share, copyright */
    --body-color-3: hsl(var(--hue), 25%, 40%); /* Posts/view.css share title, publicité */

    --body-secondary-bg-color: hsl(var(--hue), 12%, 20%);
    --body-secondary-color: hsl(var(--hue), 17%, 75%);
    --body-secondary-color-2: hsl(var(--hue), 48%, 60%);
    --body-secondary-color-3: hsl(var(--hue), 12%, 45%); /* Posts/view.css */

    --header-bg-color-hsl: var(--hue), 12%, 8%;
    --header-bg-color: hsl(var(--header-bg-color-hsl));
    --header-color: hsl(var(--hue), 50%, 85%);
    --header-menu-bg-color-hsl: var(--hue), 12%, 11%;
    --header-menu-bg-color: hsl(var(--header-menu-bg-color-hsl));
    --header-menu-border-color:hsl(var(--hue), 12%, 19%);
    --header-menu-color: hsl(var(--hue), 80%, 92%);
    --header-menu-color-2: hsl(var(--hue), 25%, 62%); /* icons */
    --header-menu-color-3: hsl(var(--hue), 15%, 30%); /* header.css social btn */
    
    --sidebar-bg-color: var(--body-secondary-bg-color); 
    --sidebar-color: var(--body-secondary-color); /* #a89984 */
    --sidebar-border-color: var(--body-secondary-color-3);
    --sidebar-color-2: var(--body-secondary-color-2); /* #996535 */
    --sidebar-color-3: var(--body-secondary-color-3); /* #392919; /* Home btn view more, Concerts/view btn ics  */

    --btn-primary-color: #FFF;
    
    --border-color: hsl(var(--hue), 12%, 25%);
    --shadow-color: hsl(var(--hue), 0%, 0%);

    --input-bg-color: hsl(var(--hue), 12%, 24%);
    --input-color: hsl(var(--hue), 80%, 90%);
    --input-focus-color: hsl(var(--hue), 100%, 92%);

    --modal-bg-color: var(--body-bg-color);
    --modal-color: var(--body-color);
    --modal-border-color: var(--border-color);
    --modal-input-bg-color: var(--input-bg-color);
    --modal-input-color: var(--input-color);

}

:root, html[data-theme='light']{
    --hue: 210;

    --primary-color:hsl(0, 85%, 45%);
    --primary-color-70:hsla(0, 85%, 45%, .7); /* Home Concerts cancelled */
    --primary-color-25:hsla(0, 85%, 45%, .25); /* app-bootsrap.css .btn:focus */
    --primary-color-light:hsl(0, 85%, 64%);
    --primary-color-light-80: hsla(0, 85%, 64%, 0.8); /* Contactmessages/add.css border form */
	--primary-color-dark:hsl(0, 85%, 25%);
    --gradient-primary: linear-gradient(180deg, var(--primary-color), var(--primary-color-dark));
    --gradient-primary-light: linear-gradient(180deg, var(--primary-color), var(--primary-color));
    --gradient-primary-dark: linear-gradient(180deg, var(--primary-color-dark), var(--primary-color-dark));

    --purple-color: hsl(277, 30%, 55%);
    --purple-color-dark: hsl(328, 65%, 5%);
    --gradient-purple: linear-gradient(180deg, var(--purple-color), var(--purple-color-dark));
    
    --body-bg-color-hsl: var(--hue), 8%, 95%;
    --body-bg-color: hsl(var(--body-bg-color-hsl));
    --body-color: hsl(var(--hue), 8%, 26%);
    --body-color-2: hsl(var(--hue), 8%, 55%); /* Posts/view.css share, copyright */
    --body-color-3: hsl(var(--hue), 8%, 70%); /* Posts/view.css share title, publicité */

    --body-secondary-bg-color: hsl(var(--hue), 8%, 80%);
    --body-secondary-color: hsl(var(--hue), 8%, 10%);
    --body-secondary-color-2: hsl(var(--hue), 8%, 20%);
    --body-secondary-color-3: hsl(var(--hue), 8%, 40%); /* Posts/view.css */

    --header-bg-color-hsl: var(--hue), 12%, 70%;
    --header-bg-color: hsl(var(--header-bg-color-hsl));
    --header-color: hsl(var(--hue), 17%, 45%);
    --header-menu-bg-color-hsl: var(--hue), 16%, 92%;
    --header-menu-bg-color:hsl(var(--header-menu-bg-color-hsl));
    --header-menu-border-color:hsl(var(--hue), 16%, 80%);
    --header-menu-color: hsl(var(--hue), 8%, 20%);
    --header-menu-color-2: hsl(var(--hue), 12%, 55%);
    --header-menu-color-3: hsl(var(--hue), 12%, 70%); /* header.css social btn */
    
    --sidebar-bg-color: var(--body-secondary-bg-color); /* bg-dark */
    --sidebar-color: var(--body-secondary-color); /* #a89984 */
    --sidebar-border-color: var(--body-secondary-color-3);
    --sidebar-color-2: var(--body-secondary-color-2); /* #996535 */
    --sidebar-color-3: var(--body-secondary-color-3); /* #392919; /* Home btn view more, Concerts/view btn ics  */

    --btn-primary-color: #FFF;
    
    --border-color: hsl(var(--hue), 12%, 87%);
    --shadow-color: hsl(var(--hue), 12%, 70%);

    --input-bg-color:hsl(var(--hue), 12%, 93%);
    --input-color: hsl(var(--hue), 12%, 20%);
    --input-focus-color: #000;

    --modal-bg-color: var(--body-bg-color);
    --modal-color: var(--body-color);
    --modal-border-color: var(--border-color);
    --modal-input-bg-color: var(--input-bg-color);
    --modal-input-color: var(--input-color);

}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]){
        --primary-color:hsl(0, 85%, 60%);
        --primary-color-70:hsla(0, 85%, 60%, .7); /* Home Concerts cancelled */
        --primary-color-25:hsla(0, 85%, 60%, .25); /* app-bootsrap.css .btn:focus */
        --primary-color-light:hsl(0, 85%, 80%);
        --primary-color-light-80: hsla(0, 85%, 80%, 0.8); /* Contactmessages/add.css border form */
        --primary-color-dark:hsl(0, 85%, 40%);

        --purple-color: hsl(328, 65%, 35%);

        --body-bg-color-hsl: var(--hue), 12%, 14%;
        --body-bg-color: hsl(var(--body-bg-color-hsl));
        --body-color: hsl(var(--hue), 50%, 92%);
        --body-color-2: hsl(var(--hue), 25%, 63%); /* Posts/view.css share, copyright */
        --body-color-3: hsl(var(--hue), 25%, 40%); /* Posts/view.css share title, publicité */

        --body-secondary-bg-color: hsl(var(--hue), 12%, 20%);
        --body-secondary-color: hsl(var(--hue), 17%, 75%);
        --body-secondary-color-2: hsl(var(--hue), 48%, 60%);
        --body-secondary-color-3: hsl(var(--hue), 12%, 45%); /* Posts/view.css */

        --header-bg-color-hsl: var(--hue), 12%, 8%;
        --header-bg-color: hsl(var(--header-bg-color-hsl));
        --header-color: hsl(var(--hue), 50%, 85%);
        --header-menu-bg-color-hsl: var(--hue), 12%, 11%;
        --header-menu-bg-color: hsl(var(--header-menu-bg-color-hsl));
        --header-menu-border-color:hsl(var(--hue), 12%, 19%);
        --header-menu-color: hsl(var(--hue), 80%, 92%);
        --header-menu-color-2: hsl(var(--hue), 25%, 62%); /* icons */
        --header-menu-color-3: hsl(var(--hue), 15%, 30%); /* header.css social btn */
        
        --sidebar-bg-color: var(--body-secondary-bg-color); 
        --sidebar-color: var(--body-secondary-color); /* #a89984 */
        --sidebar-border-color: var(--body-secondary-color-3);
        --sidebar-color-2: var(--body-secondary-color-2); /* #996535 */
        --sidebar-color-3: var(--body-secondary-color-3); /* #392919; /* Home btn view more, Concerts/view btn ics  */

        --btn-primary-color: #FFF;
        
        --border-color: hsl(var(--hue), 12%, 25%);
        --shadow-color: hsl(0, 0%, 0%);

        --input-bg-color: hsl(var(--hue), 12%, 24%);
        --input-color: hsl(var(--hue), 80%, 90%);
        --input-focus-color: hsl(var(--hue), 100%, 92%);

        --modal-bg-color: var(--body-bg-color);
        --modal-color: var(--body-color);
        --modal-border-color: var(--border-color);
        --modal-input-bg-color: var(--input-bg-color);
        --modal-input-color: var(--input-color);

       

    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]){
        --body-bg-color-hsl: var(--hue), 8%, 95%;
        --body-bg-color: hsl(var(--body-bg-color-hsl));
        --body-color: hsl(var(--hue), 8%, 26%);
        --body-color-2: hsl(var(--hue), 8%, 55%); /* Posts/view.css share, copyright */
        --body-color-3: hsl(var(--hue), 8%, 70%); /* Posts/view.css share title, publicité */
        /*--body-secondary-bg-color:hsl(0, 16%, 88%);*/
        --body-secondary-bg-color: hsl(var(--hue), 8%, 80%);
        --body-secondary-color: #000;
        --body-secondary-color-2: hsl(var(--hue), 8%, 20%);
        --body-secondary-color-3: hsl(var(--hue), 8%, 40%); /* Posts/view.css */

        --header-bg-color-hsl: var(--hue), 12%, 70%;
        --header-bg-color: hsl(var(--header-bg-color-hsl));
        /*--header-bg-color:hsl(20, 10%, 40%);*/
        --header-color: hsl(var(--hue), 17%, 45%);
        --header-menu-bg-color-hsl: var(--hue), 16%, 92%;
        --header-menu-bg-color:hsl(var(--header-menu-bg-color-hsl));
        --header-menu-border-color:hsl(var(--hue), 16%, 80%);
        --header-menu-color: hsl(var(--hue), 8%, 20%);
        --header-menu-color-2: hsl(var(--hue), 12%, 55%);
        --header-menu-color-3: hsl(var(--hue), 12%, 70%); /* header.css social btn */
        /*--header-menu-bg-color:hsl(0, 10%, 32%);*/
        
        --sidebar-bg-color: var(--body-secondary-bg-color); /* bg-dark */
        --sidebar-color: var(--body-secondary-color); /* #a89984 */
        --sidebar-border-color: var(--body-secondary-color-3);
        --sidebar-color-2: var(--body-secondary-color-2); /* #996535 */
        --sidebar-color-3: var(--body-secondary-color-3);  /* #392919; /* Home btn view more, Concerts/view btn ics  */

        --btn-primary-color: #FFF;
        
        --border-color: hsl(var(--hue), 12%, 87%);
        --shadow-color: hsl(var(--hue), 12%, 70%);

        --input-bg-color:hsl(0, 12%, 93%);
        --input-color: hsl(0, 12%, 20%);
        --input-focus-color: #000;

        --modal-bg-color: var(--body-bg-color);
        --modal-color: var(--body-color);
        --modal-border-color: var(--border-color);
        --modal-input-bg-color: var(--input-bg-color);
        --modal-input-color: var(--input-color);

        
    }
}