:root,
[data-color-scheme="light"] {
    --page-background-color: hsl(240 10% 96%);
    --page-background-color-dark: hsl(240 10% 90%);
    --page-background-color-light: hsl(0 0% 100%);
    --page-background-color-light-2: hsl(0 0% 100%);
    --page-illustration-color-orange: hsl(20 100% 55%);
    --page-illustration-color-grey: #888B91;
    --footer-background-color: var(--page-background-color-light);
    --text-light-color: hsl(0 0% 0% / 54%);
    --text-bright-color: hsl(0 0% 0%);
    --text-middle-color: hsl(0 0% 0% / 75%);
    --button-disabled-opacity: 35%;

    --control_hover-mix: 92%;
    --control_active-mix: 96%;

    --button-grey-background-color: hsl(240 15% 65% / 28%);
    --button-grey-label-color: hsl(0 0% 0%);
    
    --button-accent-background-color: #ff5500;
    --button-accent-label-color: hsl(0, 0%, 100%);

    --button-contrast-label-color: hsl(0 0% 100%);
    --button-contrast-background-color: hsl(0 0% 0%);
    
    --button-telegram-background-color: #24A1DE;
    --button-telegram-label-color: hsl(0, 0%, 100%);

    --button-vk-background-color: #0077FF;
    --button-vk-label-color: hsl(0, 0%, 100%);  

    --button-map-background-image: url(https://synchronizer.github.io/maridiz-2-public/button/button-map-bg-light.png);
    
    
    
    --input-background-color: hsl(240 15% 65% / 28%);
    --input-value-color: hsl(0 0% 0%);
    --input-placeholder-color: hsl(0 0% 0% / 55%);
    --link-color: hsl(240 100% 55%);
    --link-visited-color: hsl(260 100% 55%);
    
    --modal-background-color: var(--page-background-color-light);
    --modal-backdrop-color: hsl(0 0% 0% / 80%);
    --hero-title-color: hsl(0 0% 100%);
    --hero-text-color: hsl(0 0% 100% / 55%);
    --hero-backgrond-gradient-from: hsl(0 0% 0%);
    --hero-backgrond-gradient-to: hsl(0 0% 10%);
    --font-weight-text: 400;
    --font-weight-strong: 600;
    --font-weight-title: 800;

    --price-label-color-hue: 50;
    --price-label-color-chroma: 100;
    --price-label-color-lightness: 35;
    --price-label-color: lch(var(--price-label-color-lightness) var(--price-label-color-chroma) var(--price-label-color-hue));

    --green-label-color-hue: 140;
    --green-label-color-chroma: 100;
    --green-label-color-lightness: 35;
    --green-label-color: lch(var(--green-label-color-lightness) var(--green-label-color-chroma) var(--green-label-color-hue));

    --orange-label-color-hue: 65;
    --orange-label-color-chroma: 100;
    --orange-label-color-lightness: 35;
    --orange-label-color: lch(var(--orange-label-color-lightness) var(--orange-label-color-chroma) var(--orange-label-color-hue));

    --red-label-color-hue: 40;
    --red-label-color-chroma: 100;
    --red-label-color-lightness: 35;
    --red-label-color: lch(var(--red-label-color-lightness) var(--red-label-color-chroma) var(--red-label-color-hue));

    --blue-label-color-hue: 265;
    --blue-label-color-chroma: 100;
    --blue-label-color-lightness: 35;
    --blue-label-color: lch(var(--blue-label-color-lightness) var(--blue-label-color-chroma) var(--blue-label-color-hue));

    --grey-label-color-hue: 140;
    --grey-label-color-chroma: 0;
    --grey-label-color-lightness: 35;
    --grey-label-color: lch(var(--grey-label-color-lightness) var(--grey-label-color-chroma) var(--grey-label-color-hue));

    --time-label-color-hue: 50;
    --time-label-color-chroma: 0;
    --time-label-color-lightness: 0;
    --time-label-color: lch(var(--time-label-color-lightness) var(--time-label-color-chroma) var(--time-label-color-hue));

    --label-background-color: color-mix(in hsl, transparent 88%, currentColor);

    --card-icon-color: #0073E5;



    --rating-stars: hsl(38, 100%, 50%);
    --logo-color-1: var(--button-accent-background-color);
    --logo-color-2: var(--text-bright-color);



    --shadow-m: 0 .5rem 2rem hsl(240 50% 10% / 0.25);
}


[data-color-scheme="dark"] {
    --page-background-color: hsl(0 0% 4%);
    --page-background-color-light: hsl(0 0% 8%);
    --page-background-color-light-2: hsl(0 0% 13%);
    --page-illustration-color-orange: hsl(20 100% 80%);
    --page-illustration-color-grey: #646568;
    --footer-background-color: var(--page-background-color-light);
    --text-light-color: hsl(0 0% 100% / 45%);
    --text-bright-color: hsl(0 0% 100%);
    --text-middle-color: hsl(0 0% 100% / 60%);
    --button-disabled-opacity: 50%;

    
    --button-map-background-image: url(https://synchronizer.github.io/maridiz-2-public/button/button-map-bg-dark.png);
    
    --button-grey-background-color: hsl(240 15% 65% / 28%);
    --button-grey-label-color: hsl(0 0% 100%);
    --button-accent-background-color: #ff5500;
    --button-accent-label-color: hsl(0, 0%, 0%);
    --button-contrast-label-color: hsl(0 0% 0%);
    --button-contrast-background-color: hsl(0 0% 100%);


    --input-background-color: hsl(240 15% 65% / 28%);
    --input-value-color: hsl(0 0% 100%);
    --input-placeholder-color: hsla(0, 12%, 49%, 0.3);
    --link-color: hsl(220 100% 70%);
    --link-visited-color: hsl(240 100% 80%);
    --modal-background-color: var(--page-background-color-light);
    --modal-backdrop-color: hsl(0 0% 0% / 90%);
    --hero-title-color: hsl(0 0% 100%);
    --hero-text-color: hsl(0 0% 100% / 55%);
    --hero-backgrond-gradient-from: hsl(0 0% 0%);
    --hero-backgrond-gradient-to: hsl(0 0% 10%);
    --font-weight-text: 400;
    --font-weight-strong: 600;
    --font-weight-title: 800;



    --price-label-color-lightness: 85;
    --price-label-color: lch(var(--price-label-color-lightness) var(--price-label-color-chroma) var(--price-label-color-hue));

    --green-label-color-lightness: 85;
    --green-label-color: lch(var(--green-label-color-lightness) var(--green-label-color-chroma) var(--green-label-color-hue));

    --orange-label-color-lightness: 85;
    --orange-label-color: lch(var(--orange-label-color-lightness) var(--orange-label-color-chroma) var(--orange-label-color-hue));

    --red-label-color-lightness: 85;
    --red-label-color: lch(var(--red-label-color-lightness) var(--red-label-color-chroma) var(--red-label-color-hue));

    --blue-label-color-lightness: 85;
    --blue-label-color: lch(var(--blue-label-color-lightness) var(--blue-label-color-chroma) var(--blue-label-color-hue));

    --grey-label-color-lightness: 85;
    --grey-label-color: lch(var(--grey-label-color-lightness) var(--grey-label-color-chroma) var(--grey-label-color-hue));

    --time-label-color-lightness: 100;
    --time-label-color: lch(var(--time-label-color-lightness) var(--time-label-color-chroma) var(--time-label-color-hue));


    --logo-color-1: var(--button-accent-background-color);
    --logo-color-2: var(--text-bright-color);

    --card-icon-color: #39f;

    --shadow-m: 0 0 0 1px#fff3, 0 .5rem 2rem hsl(240 100% 0% / 0.65);
}