:root{
    --surface: #fef7ff;
    --on-surface: #1d1b20;
    --surface-variant: #e7e0ec;
    --on-surface-variant: #49454f;
    --surface-container: #f3edf7;
    --surface-container-highest: #e6e0e9;
    --outline: #79747e;
    --outline-variant: #cac4d0;
    --surface-bright: #fef7ff;
    --blue30: #04409f;
    --blue50: #3271ea;
    --blue80: #a1c9ff;
}

html{
    background-color: var(--surface);
}

body{
    background-color: var(--surface);
    color: var(--on-surface);
}

nav{
    background-color: var(--surface-container);
}

nav a[aria-current="page"]{
    color: var(--on-surface);
}

nav a[aria-current="page"] svg{
    stroke: var(--on-surface);
}

nav a[aria-current="page"] span{
    color: var(--on-surface);
}

nav a:not(a[aria-current="page"]){
    color: var(--on-surface-variant);
}

nav a:not(a[aria-current="page"]) svg{
    stroke: var(--on-surface-variant);
}

nav a:not(a[aria-current="page"]) span{
    color: var(--on-surface-variant);
}

header .bar_item_icon svg{
    fill: var(--on-surface);
}

header div.bar_item_text{
    color: var(--on-surface);
}

header  a.bar_item_text{
    color: var(--blue30);
}

h2,
h3,
p,
li{
    color: var(--on-surface);
}

::marker{
    color: var(--on-surface);
}

main a{
    color: var(--blue30);
}

form input,
form textarea{
    background-color: var(--surface-container-highest);
    color: var(--on-surface);
    border-color: var(--outline);
}

form input:focus,
form textarea:focus{
    border-color: var(--on-surface);
}

form .input_label{
    color: var(--on-surface-variant);
}

form .input_counter{
    background-color: var(--surface-container-highest);
    color: var(--on-surface-variant);
}

form button{
    background-color: var(--blue50);
    color: var(--surface);
}

#legal_info{
    border-color: var(--on-surface);
}

#legal_info span{
    color: var(--on-surface);
}

::selection{
    background-color: var(--blue80);
    color: #000000;
}

ul#price li{
    border-top-color: var(--outline-variant);
}