/* sets text to not inherit background on their container*/
h1, h2, h3, h4, h5, h6, p {
    background-color: transparent !important;
}

/* color vartiables */
:root {

    /* #########################
    primary set & define base colors
    ##########################*/
    
    /*set primary to any color to create the theme*/
    --primary:                  #b797d1 ;       
    --secondary:                oklch(from var(--primary) l c calc(h + 40) );
    --surface:                  oklch(from var(--primary) l 0.02 h );
    --error:                    oklch(from var(--primary) l 0.175 20 );
    --success:                  oklch(from var(--primary) l 0.175 140 );
    --highlight:                oklch(from var(--primary) l c calc(h - 60) );
    --shadow:                   oklch(from var(--surface) 0.1 c h );

    /* #########################
    tags for shades of colors
    ##########################*/
    --primary10:                oklch(from var(--primary) 0.05 c h );
    --primary20:                oklch(from var(--primary) 0.20 c h );
    --primary30:                oklch(from var(--primary) 0.32 c h );
    --primary40:                oklch(from var(--primary) 0.43 c h );
    --primary50:                oklch(from var(--primary) 0.55 c h );
    --primary60:                oklch(from var(--primary) 0.70 c h );
    --primary70:                oklch(from var(--primary) 0.82 c h );
    --primary80:                oklch(from var(--primary) 0.95 c h );
    --primary90:                oklch(from var(--primary) 0.99 c h );

    --secondary10:              oklch(from var(--secondary) 0.05 c h);
    --secondary20:              oklch(from var(--secondary) 0.20 c h);
    --secondary30:              oklch(from var(--secondary) 0.32 c h);
    --secondary40:              oklch(from var(--secondary) 0.43 c h);
    --secondary50:              oklch(from var(--secondary) 0.55 c h);
    --secondary60:              oklch(from var(--secondary) 0.70 c h);
    --secondary70:              oklch(from var(--secondary) 0.82 c h);
    --secondary80:              oklch(from var(--secondary) 0.95 c h);
    --secondary90:              oklch(from var(--secondary) 0.99 c h);

    --surface10:                oklch(from var(--surface) 0.05 c h);
    --surface20:                oklch(from var(--surface) 0.20 c h);
    --surface30:                oklch(from var(--surface) 0.32 c h);
    --surface40:                oklch(from var(--surface) 0.43 c h);
    --surface50:                oklch(from var(--surface) 0.55 c h);
    --surface60:                oklch(from var(--surface) 0.70 c h);
    --surface70:                oklch(from var(--surface) 0.82 c h);
    --surface80:                oklch(from var(--surface) 0.95 c h);
    --surface90:                oklch(from var(--surface) 0.99 c h);

    --error10:                  oklch(from var(--error) 0.05 c h);
    --error20:                  oklch(from var(--error) 0.20 c h);
    --error30:                  oklch(from var(--error) 0.32 c h);
    --error40:                  oklch(from var(--error) 0.43 c h);
    --error50:                  oklch(from var(--error) 0.55 c h);
    --error60:                  oklch(from var(--error) 0.70 c h);
    --error70:                  oklch(from var(--error) 0.82 c h);
    --error80:                  oklch(from var(--error) 0.95 c h);
    --error90:                  oklch(from var(--error) 0.99 c h);

    --success10:                oklch(from var(--success) 0.05 c h);
    --success20:                oklch(from var(--success) 0.20 c h);
    --success30:                oklch(from var(--success) 0.32 c h);
    --success40:                oklch(from var(--success) 0.43 c h);
    --success50:                oklch(from var(--success) 0.55 c h);
    --success60:                oklch(from var(--success) 0.70 c h);
    --success70:                oklch(from var(--success) 0.82 c h);
    --success80:                oklch(from var(--success) 0.95 c h);
    --success90:                oklch(from var(--success) 0.99 c h);

    --highlight10:              oklch(from var(--highlight) 0.05 c h);
    --highlight20:              oklch(from var(--highlight) 0.20 c h);
    --highlight30:              oklch(from var(--highlight) 0.32 c h);
    --highlight40:              oklch(from var(--highlight) 0.43 c h);
    --highlight50:              oklch(from var(--highlight) 0.55 c h);
    --highlight60:              oklch(from var(--highlight) 0.70 c h);
    --highlight70:              oklch(from var(--highlight) 0.82 c h);
    --highlight80:              oklch(from var(--highlight) 0.95 c h);
    --highlight90:              oklch(from var(--highlight) 0.99 c h);

}
    
    /* ############################
    set classes for auto gen theme
    #############################*/

.primary-fixed {                color: var(--primary); background-color: var(--primary);}
.primary {                      color: var(--primary80); background-color: var(--primary80);}
.on-primary {                   color: var(--primary30);}
.on-primary-container {         background-color: var(--primary30);}

.secondary {                    color: var(--secondary70) ; background-color: var(--secondary70) ;}
.on-secondary {                 color: var(--secondary20);}
.on-secondary-container {       background-color: var(--secondary20);}

.surface {                      color: var(--surface90); background-color: var(--surface90);}
.on-surface {                   color: var(--surface20);}
.on-surface-container {         background-color: var(--surface20);}
.surface-two {                  background-color: var(--surface80);}
.surface-three {                background-color: var(--surface70);}

.error {                        color: var(--error60); background-color: var(--error60);}
.on-error {                     color: var(--error10);}
.on-error-container {           background-color: var(--error10);}

.success {                      color: var(--success70); background-color: var(--success70);    }
.on-success {                   color: var(--success20);    }
.on-success-container {         background-color: var(--success20);    }

.highlight {                    color: var(--highlight20); background-color: var(--highlight20);    }
.on-highlight {                 color: var(--highlight70);    }
.on-highlight-container {       background-color: var(--highlight70);    }

.shadow{                        background-color: var(--shadow);}

@media (prefers-color-scheme: dark) {
    
    .primary {                  color: var(--primary30); background-color: var(--primary30);}
    .on-primary {               color: var(--primary80);}
    .on-primary-container {     background-color: var(--primary80);}


    .secondary {                color: var(--secondary20) ; background-color: var(--secondary20) ;}
    .on-secondary {             color: var(--secondary70);}
    .on-secondary-container {   background-color: var(--secondary70);}

    .surface {                  color: var(--surface10); background-color: var(--surface10);}
    .on-surface {               color: var(--surface80);}
    .on-surface-container {     background-color: var(--surface80);}
    .surface-two {              background-color: var(--surface20);}
    .surface-three {            background-color: var(--surface30);}

    .error {                    color: var(--error20); background-color: var(--error20);}
    .on-error {                 color: var(--error70);}
    .on-error-container {       background-color: var(--error70);}

    .success {                  color: var(--success20); background-color: var(--success20);    }
    .on-success {               color: var(--success70);    }
    .on-success-container {     background-color: var(--success70);    }

    .highlight {                color: var(--highlight70); background-color: var(--highlight70);    }
    .on-highlight {             color: var(--highlight20);    }
    .on-highlight-container {   background-color: var(--highlight20);    }
    
}

/* #########################
    classes for shades
##########################*/

.primary10 {    color: var(--primary10); background-color: var(--primary10); }
.primary20 {    color: var(--primary20); background-color: var(--primary20); }
.primary30 {    color: var(--primary30); background-color: var(--primary30); }
.primary40 {    color: var(--primary40); background-color: var(--primary40); }
.primary50 {    color: var(--primary50); background-color: var(--primary50); }
.primary60 {    color: var(--primary60); background-color: var(--primary60); }
.primary70 {    color: var(--primary70); background-color: var(--primary70); }
.primary80 {    color: var(--primary80); background-color: var(--primary80); }
.primary90 {    color: var(--primary90); background-color: var(--primary90); }

.secondary10 {  color: var(--secondary10); background-color: var(--secondary10); }
.secondary20 {  color: var(--secondary20); background-color: var(--secondary20); }
.secondary30 {  color: var(--secondary30); background-color: var(--secondary30); }
.secondary40 {  color: var(--secondary40); background-color: var(--secondary40); }
.secondary50 {  color: var(--secondary50); background-color: var(--secondary50); }
.secondary60 {  color: var(--secondary60); background-color: var(--secondary60); }
.secondary70 {  color: var(--secondary70); background-color: var(--secondary70); }
.secondary80 {  color: var(--secondary80); background-color: var(--secondary80); }
.secondary90 {  color: var(--secondary90); background-color: var(--secondary90); }

.surface10 {    color: var(--surface10); background-color: var(--surface10); }
.surface20 {    color: var(--surface20); background-color: var(--surface20); }
.surface30 {    color: var(--surface30); background-color: var(--surface30); }
.surface40 {    color: var(--surface40); background-color: var(--surface40); }
.surface50 {    color: var(--surface50); background-color: var(--surface50); }
.surface60 {    color: var(--surface60); background-color: var(--surface60); }
.surface70 {    color: var(--surface70); background-color: var(--surface70); }
.surface80 {    color: var(--surface80); background-color: var(--surface80); }
.surface90 {    color: var(--surface90); background-color: var(--surface90); }

.error10 {      color: var(--error10); background-color: var(--error10); }
.error20 {      color: var(--error20); background-color: var(--error20); }
.error30 {      color: var(--error30); background-color: var(--error30); }
.error40 {      color: var(--error40); background-color: var(--error40); }
.error50 {      color: var(--error50); background-color: var(--error50); }
.error60 {      color: var(--error60); background-color: var(--error60); }
.error70 {      color: var(--error70); background-color: var(--error70); }
.error80 {      color: var(--error80); background-color: var(--error80); }
.error90 {      color: var(--error90); background-color: var(--error90); }

.success10 {    color: var(--success10); background-color: var(--success10); }
.success20 {    color: var(--success20); background-color: var(--success20); }
.success30 {    color: var(--success30); background-color: var(--success30); }
.success40 {    color: var(--success40); background-color: var(--success40); }
.success50 {    color: var(--success50); background-color: var(--success50); }
.success60 {    color: var(--success60); background-color: var(--success60); }
.success70 {    color: var(--success70); background-color: var(--success70); }
.success80 {    color: var(--success80); background-color: var(--success80); }
.success90 {    color: var(--success90); background-color: var(--success90); }

.highlight10 {  color: var(--highlight10); background-color: var(--highlight10); }
.highlight20 {  color: var(--highlight20); background-color: var(--highlight20); }
.highlight30 {  color: var(--highlight30); background-color: var(--highlight30); }
.highlight40 {  color: var(--highlight40); background-color: var(--highlight40); }
.highlight50 {  color: var(--highlight50); background-color: var(--highlight50); }
.highlight60 {  color: var(--highlight60); background-color: var(--highlight60); }
.highlight70 {  color: var(--highlight70); background-color: var(--highlight70); }
.highlight80 {  color: var(--highlight80); background-color: var(--highlight80); }
.highlight90 {  color: var(--highlight90); background-color: var(--highlight90); }