:root {

    /*navbar */
    --clr-nav-bar-bg: var(--clr-main-white);
    --clr-nav-bar-a: var(--clr-main-accent-dark);    

    /*main */
    --clr-main-bg: white;  
    
    /*footer */
    --clr-footer-bg: hsla(0,0%,100%,1);
    --clr-footer-text: var(--clr-paragraph);
    --clr-footer-text-small: var(--clr-label);

    /*breadcrum */
    --clr-breadcrum-text: var(--clr-label);
    --clr-breadcrum-sep: var(--clr-grey-30);

     /*media */
    --clr-bckg-media:  hsla(0,0%,96%,1);
    --clr-bckg-media-hover:  hsla(0,0%,92%,1);

    /* dynamic colors */
    --black: oklch(0% 0 0 / 1);
    --black-trans-10: oklch(0% 0 0 / .1);
    --black-trans-20: oklch(0% 0 0 / .2);
    --black-trans-30: oklch(0% 0 0 / .3);
    --black-trans-40: oklch(0% 0 0 / .4);
    --black-trans-50: oklch(0% 0 0 / .5);
    --black-trans-60: oklch(0% 0 0 / .6);
    --black-trans-70: oklch(0% 0 0 / .7);
    --black-trans-80: oklch(0% 0 0 / .8);
    --black-trans-90: oklch(0% 0 0 / .9);


    --white: oklch(100% 0 0 / 1);
    --white-trans-10: oklch(100% 0 0 / .1);
    --white-trans-20: oklch(100% 0 0 / .2);
    --white-trans-30: oklch(100% 0 0 / .3);
    --white-trans-40: oklch(100% 0 0 / .4);
    --white-trans-50: oklch(100% 0 0 / .5);
    --white-trans-60: oklch(100% 0 0 / .6);
    --white-trans-70: oklch(100% 0 0 / .7);
    --white-trans-80: oklch(100% 0 0 / .8);
    --white-trans-90: oklch(100% 0 0 / .9);

    --primary-hue: 52.6; 
    --primary: oklch(88.2% 0.180 var(--primary-hue));       
    --primary-ultra-light: oklch(from var(--primary) calc(l + (8.5 * (0.979 - l) / 9)) calc(c + (8.5 * (0.016 - c) / 9)) calc(h + 8.5 *.6));
    --primary-light: oklch(from var(--primary) 84.03% 0.11 h);
    --primary-semi-light: oklch(from var(--primary) 72.27% 0.228 h);
    --primary-semi-dark: oklch(from var(--primary) 51.68% 0.186 h);
    --primary-dark: oklch(from var(--primary) 36.97% 0.14 h);
    --primary-ultra-dark: oklch(from var(--primary) calc(l + (6.5 * (0.197 - l) / 9)) calc(c + (6.5 * (0.03 - c) / 9)) calc(h - 2 *.6));

    --primary-50: oklch(from var(--primary) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--primary-hue) + 9 *.6));
    --primary-100: oklch(from var(--primary) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--primary-hue) + 8 *.6));
    --primary-200: oklch(from var(--primary) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--primary-hue) + 6 *.6));
    --primary-300: oklch(from var(--primary) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--primary-hue) + 4 *.6));
    --primary-400: oklch(from var(--primary) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--primary-hue) + 2 *.6));
    --primary-500: var(--primary);
    --primary-600: oklch(from var(--primary) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--primary-hue) - 6 *.6));
    --primary-700: oklch(from var(--primary) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--primary-hue) - 4 *.6));
    --primary-800: oklch(from var(--primary) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--primary-hue) - 2 *.6));
    --primary-900: oklch(from var(--primary) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--primary-hue) + 0));
    --primary-950: oklch(from var(--primary) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--primary-hue) + 2 *.6));
    --primary-hover: oklch(from var(--primary) .74 .22 h);
    --primary-500-trans-10: oklch(from var(--primary-500) l c h / .1);
    --primary-500-trans-20: oklch(from var(--primary-500) l c h / .2);
    --primary-500-trans-30: oklch(from var(--primary-500) l c h / .3);
    --primary-500-trans-40: oklch(from var(--primary-500) l c h / .4);
    --primary-500-trans-50: oklch(from var(--primary-500) l c h / .5);
    --primary-500-trans-60: oklch(from var(--primary-500) l c h / .6);
    --primary-500-trans-70: oklch(from var(--primary-500) l c h / .7);
    --primary-500-trans-80: oklch(from var(--primary-500) l c h / .8);
    --primary-500-trans-90: oklch(from var(--primary-500) l c h / .9);
    --primary-txt: var(--primary-900);
    

    --secondary-hue: 355.7;
    --secondary: oklch(70% .2 var(--secondary-hue));
    --secondary-50: oklch(from var(--secondary) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--secondary-hue) + 9 *.6));
    --secondary-100: oklch(from var(--secondary) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--secondary-hue) + 8 *.6));
    --secondary-200: oklch(from var(--secondary) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--secondary-hue) + 6 *.6));
    --secondary-300: oklch(from var(--secondary) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--secondary-hue) + 4 *.6));
    --secondary-400: oklch(from var(--secondary) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--secondary-hue) + 2 *.6));
    --secondary-500: var(--secondary);
    --secondary-600: oklch(from var(--secondary) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--secondary-hue) - 6 *.6));
    --secondary-700: oklch(from var(--secondary) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--secondary-hue) - 4 *.6));
    --secondary-800: oklch(from var(--secondary) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--secondary-hue) - 2 *.6));
    --secondary-900: oklch(from var(--secondary) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--secondary-hue) + 0));
    --secondary-950: oklch(from var(--secondary) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--secondary-hue) + 2 *.6));
    --secondary-hover: oklch(from var(--secondary) .74 .22 h);
    --secondary-500-trans-10: oklch(from var(--secondary-500) l c h / .1);
    --secondary-500-trans-20: oklch(from var(--secondary-500) l c h / .2);
    --secondary-500-trans-30: oklch(from var(--secondary-500) l c h / .3);
    --secondary-500-trans-40: oklch(from var(--secondary-500) l c h / .4);
    --secondary-500-trans-50: oklch(from var(--secondary-500) l c h / .5);
    --secondary-500-trans-60: oklch(from var(--secondary-500) l c h / .6);
    --secondary-500-trans-70: oklch(from var(--secondary-500) l c h / .7);
    --secondary-500-trans-80: oklch(from var(--secondary-500) l c h / .8);
    --secondary-500-trans-90: oklch(from var(--secondary-500) l c h / .9);

    --accent-hue: 67.9;
    --accent: oklch(60.2% 0.155 var(--accent-hue) / 1);
    --accent-50: oklch(from var(--accent) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--accent-hue) + 9 *.6));
    --accent-100: oklch(from var(--accent) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--accent-hue) + 8 *.6));
    --accent-200: oklch(from var(--accent) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--accent-hue) + 6 *.6));
    --accent-300: oklch(from var(--accent) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--accent-hue) + 4 *.6));
    --accent-400: oklch(from var(--accent) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--accent-hue) + 2 *.6));
    --accent-500: var(--accent);
    --accent-600: oklch(from var(--accent) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--accent-hue) - 6 *.6));
    --accent-700: oklch(from var(--accent) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--accent-hue) - 4 *.6));
    --accent-800: oklch(from var(--accent) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--accent-hue) - 2 *.6));
    --accent-900: oklch(from var(--accent) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--accent-hue) + 0));
    --accent-950: oklch(from var(--accent) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--accent-hue) + 2 *.6));
    --accent-hover: oklch(from var(--accent) .74 .22 h);
    --accent-500-trans-10: oklch(from var(--accent-500) l c h / .1);
    --accent-500-trans-20: oklch(from var(--accent-500) l c h / .2);
    --accent-500-trans-30: oklch(from var(--accent-500) l c h / .3);
    --accent-500-trans-40: oklch(from var(--accent-500) l c h / .4);
    --accent-500-trans-50: oklch(from var(--accent-500) l c h / .5);
    --accent-500-trans-60: oklch(from var(--accent-500) l c h / .6);
    --accent-500-trans-70: oklch(from var(--accent-500) l c h / .7);
    --accent-500-trans-80: oklch(from var(--accent-500) l c h / .8);
    --accent-500-trans-90: oklch(from var(--accent-500) l c h / .9);
    --accent-txt: #fff;    


    --tertiary-hue: 135.5;
    --tertiary: oklch(43.31% 0.164 var(--tertiary-hue) / 1);

    --tertiary-50: oklch(from var(--tertiary) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--tertiary-hue) + 9 *.6));
    --tertiary-100: oklch(from var(--tertiary) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--tertiary-hue) + 8 *.6));
    --tertiary-200: oklch(from var(--tertiary) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--tertiary-hue) + 6 *.6));
    --tertiary-300: oklch(from var(--tertiary) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--tertiary-hue) + 4 *.6));
    --tertiary-400: oklch(from var(--tertiary) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--tertiary-hue) + 2 *.6));
    --tertiary-500: var(--tertiary);
    --tertiary-600: oklch(from var(--tertiary) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--tertiary-hue) - 6 *.6));
    --tertiary-700: oklch(from var(--tertiary) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--tertiary-hue) - 4 *.6));
    --tertiary-800: oklch(from var(--tertiary) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--tertiary-hue) - 2 *.6));
    --tertiary-900: oklch(from var(--tertiary) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--tertiary-hue) + 0));
    --tertiary-950: oklch(from var(--tertiary) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--tertiary-hue) + 2 *.6));
    --tertiary-hover: oklch(from var(--tertiary) .74 .22 h);
    --tertiary-500-trans-10: oklch(from var(--tertiary-500) l c h / .1);
    --tertiary-500-trans-20: oklch(from var(--tertiary-500) l c h / .2);
    --tertiary-500-trans-30: oklch(from var(--tertiary-500) l c h / .3);
    --tertiary-500-trans-40: oklch(from var(--tertiary-500) l c h / .4);
    --tertiary-500-trans-50: oklch(from var(--tertiary-500) l c h / .5);
    --tertiary-500-trans-60: oklch(from var(--tertiary-500) l c h / .6);
    --tertiary-500-trans-70: oklch(from var(--tertiary-500) l c h / .7);
    --tertiary-500-trans-80: oklch(from var(--tertiary-500) l c h / .8);
    --tertiary-500-trans-90: oklch(from var(--tertiary-500) l c h / .9);

    --base-hue: 273.2;
    --base: oklch(55.07% 0.03 var(--base-hue) / 1);

    --base-50: oklch(from var(--base) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--base-hue) + 9 *.6));
    --base-100: oklch(from var(--base) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--base-hue) + 8 *.6));
    --base-200: oklch(from var(--base) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--base-hue) + 6 *.6));
    --base-300: oklch(from var(--base) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--base-hue) + 4 *.6));
    --base-400: oklch(from var(--base) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--base-hue) + 2 *.6));
    --base-500: var(--base);
    --base-600: oklch(from var(--base) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--base-hue) - 6 *.6));
    --base-700: oklch(from var(--base) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--base-hue) - 4 *.6));
    --base-800: oklch(from var(--base) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--base-hue) - 2 *.6));
    --base-900: oklch(from var(--base) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--base-hue) + 0));
    --base-950: oklch(from var(--base) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--base-hue) + 2 *.6));
    --base-hover: oklch(from var(--base) .74 .22 h);
    --base-500-trans-10: oklch(from var(--base-500) l c h / .1);
    --base-500-trans-20: oklch(from var(--base-500) l c h / .2);
    --base-500-trans-30: oklch(from var(--base-500) l c h / .3);
    --base-500-trans-40: oklch(from var(--base-500) l c h / .4);
    --base-500-trans-50: oklch(from var(--base-500) l c h / .5);
    --base-500-trans-60: oklch(from var(--base-500) l c h / .6);
    --base-500-trans-70: oklch(from var(--base-500) l c h / .7);
    --base-500-trans-80: oklch(from var(--base-500) l c h / .8);
    --base-500-trans-90: oklch(from var(--base-500) l c h / .9);


    --neutral-hue: 17.2;
    --neutral: oklch(43.6% 0.001 var(--neutral-hue) / 1);
    --neutral-50: oklch(from var(--neutral) calc(l + (9 * (0.979 - l) / 9)) c var(--neutral-hue));
    --neutral-100: oklch(from var(--neutral) calc(l + (8 * (0.979 - l) / 9)) c var(--neutral-hue));
    --neutral-200: oklch(from var(--neutral) calc(l + (6 * (0.979 - l) / 9)) c var(--neutral-hue));
    --neutral-300: oklch(from var(--neutral) calc(l + (4 * (0.979 - l) / 9)) c var(--neutral-hue));
    --neutral-400: oklch(from var(--neutral) calc(l + (2 * (0.979 - l) / 9)) c var(--neutral-hue));
    --neutral-500: var(--neutral);
    --neutral-600: oklch(from var(--neutral) calc(l + (2 * (0.197 - l) / 9)) c var(--neutral-hue));
    --neutral-700: oklch(from var(--neutral) calc(l + (4 * (0.197 - l) / 9)) c var(--neutral-hue));
    --neutral-800: oklch(from var(--neutral) calc(l + (6 * (0.197 - l) / 9)) c var(--neutral-hue));
    --neutral-900: oklch(from var(--neutral) calc(l + (8 * (0.197 - l) / 9)) c var(--neutral-hue));
    --neutral-950: oklch(from var(--neutral) calc(l + (9 * (0.197 - l) / 9)) c var(--neutral-hue));
    --neutral-hover: oklch(.66 .17 248);
    --neutral-500-trans-10: oklch(from var(--neutral-500) l c h / .1);
    --neutral-500-trans-20: oklch(from var(--neutral-500) l c h / .2);
    --neutral-500-trans-30: oklch(from var(--neutral-500) l c h / .3);
    --neutral-500-trans-40: oklch(from var(--neutral-500) l c h / .4);
    --neutral-500-trans-50: oklch(from var(--neutral-500) l c h / .5);
    --neutral-500-trans-60: oklch(from var(--neutral-500) l c h / .6);
    --neutral-500-trans-70: oklch(from var(--neutral-500) l c h / .7);
    --neutral-500-trans-80: oklch(from var(--neutral-500) l c h / .8);
    --neutral-500-trans-90: oklch(from var(--neutral-500) l c h / .9);
    --neutral-dark: var(--neutral-800);
    --neutral-ultra-dark: var(--neutral-950);
    --neutral-light: var(--neutral-200);
    --neutral-ultra-light: var(--neutral-50);



    --success-hue: 146.4;
    --success: oklch(64.3% .177 var(--success-hue));
    --success-50: oklch(from var(--success) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--success-hue) + 9 *.6));
    --success-100: oklch(from var(--success) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--success-hue) + 8 *.6));
    --success-200: oklch(from var(--success) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--success-hue) + 6 *.6));
    --success-300: oklch(from var(--success) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--success-hue) + 4 *.6));
    --success-400: oklch(from var(--success) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--success-hue) + 2 *.6));
    --success-500: var(--success);
    --success-600: oklch(from var(--success) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--success-hue) - 6 *.6));
    --success-700: oklch(from var(--success) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--success-hue) - 4 *.6));
    --success-800: oklch(from var(--success) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--success-hue) - 2 *.6));
    --success-900: oklch(from var(--success) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--success-hue) + 0));
    --success-950: oklch(from var(--success) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--success-hue) + 2 *.6));
    --success-hover: oklch(from var(--success) .74 .22 h);
    --success-500-trans-10: oklch(from var(--success-500) l c h / .1);
    --success-500-trans-20: oklch(from var(--success-500) l c h / .2);
    --success-500-trans-30: oklch(from var(--success-500) l c h / .3);
    --success-500-trans-40: oklch(from var(--success-500) l c h / .4);
    --success-500-trans-50: oklch(from var(--success-500) l c h / .5);
    --success-500-trans-60: oklch(from var(--success-500) l c h / .6);
    --success-500-trans-70: oklch(from var(--success-500) l c h / .7);
    --success-500-trans-80: oklch(from var(--success-500) l c h / .8);
    --success-500-trans-90: oklch(from var(--success-500) l c h / .9);

    --warning-hue: 82.1;
    --warning: oklch(83.3% .172 var(--warning-hue));
    --warning-50: oklch(from var(--warning) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--warning-hue) + 9 *.6));
    --warning-100: oklch(from var(--warning) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--warning-hue) + 8 *.6));
    --warning-200: oklch(from var(--warning) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--warning-hue) + 6 *.6));
    --warning-300: oklch(from var(--warning) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--warning-hue) + 4 *.6));
    --warning-400: oklch(from var(--warning) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--warning-hue) + 2 *.6));
    --warning-500: var(--warning);
    --warning-600: oklch(from var(--warning) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--warning-hue) - 6 *.6));
    --warning-700: oklch(from var(--warning) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--warning-hue) - 4 *.6));
    --warning-800: oklch(from var(--warning) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--warning-hue) - 2 *.6));
    --warning-900: oklch(from var(--warning) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--warning-hue) + 0));
    --warning-950: oklch(from var(--warning) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--warning-hue) + 2 *.6));
    --warning-hover: oklch(from var(--warning) .74 .22 h);
    --warning-500-trans-10: oklch(from var(--warning-500) l c h / .1);
    --warning-500-trans-20: oklch(from var(--warning-500) l c h / .2);
    --warning-500-trans-30: oklch(from var(--warning-500) l c h / .3);
    --warning-500-trans-40: oklch(from var(--warning-500) l c h / .4);
    --warning-500-trans-50: oklch(from var(--warning-500) l c h / .5);
    --warning-500-trans-60: oklch(from var(--warning-500) l c h / .6);
    --warning-500-trans-70: oklch(from var(--warning-500) l c h / .7);
    --warning-500-trans-80: oklch(from var(--warning-500) l c h / .8);
    --warning-500-trans-90: oklch(from var(--warning-500) l c h / .9);

    --info-hue: 264.9;
    --info: oklch(49.4% .210 var(--info-hue));
    --info-50: oklch(from var(--info) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--info-hue) + 9 *.6));
    --info-100: oklch(from var(--info) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--info-hue) + 8 *.6));
    --info-200: oklch(from var(--info) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--info-hue) + 6 *.6));
    --info-300: oklch(from var(--info) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--info-hue) + 4 *.6));
    --info-400: oklch(from var(--info) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--info-hue) + 2 *.6));
    --info-500: var(--info);
    --info-600: oklch(from var(--info) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--info-hue) - 6 *.6));
    --info-700: oklch(from var(--info) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--info-hue) - 4 *.6));
    --info-800: oklch(from var(--info) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--info-hue) - 2 *.6));
    --info-900: oklch(from var(--info) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--info-hue) + 0));
    --info-950: oklch(from var(--info) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--info-hue) + 2 *.6));
    --info-hover: oklch(from var(--info) .74 .22 h);
    --info-500-trans-10: oklch(from var(--info-500) l c h / .1);
    --info-500-trans-20: oklch(from var(--info-500) l c h / .2);
    --info-500-trans-30: oklch(from var(--info-500) l c h / .3);
    --info-500-trans-40: oklch(from var(--info-500) l c h / .4);
    --info-500-trans-50: oklch(from var(--info-500) l c h / .5);
    --info-500-trans-60: oklch(from var(--info-500) l c h / .6);
    --info-500-trans-70: oklch(from var(--info-500) l c h / .7);
    --info-500-trans-80: oklch(from var(--info-500) l c h / .8);
    --info-500-trans-90: oklch(from var(--info-500) l c h / .9);

    --danger-hue: 20.8;
    --danger: oklch(59.5% .199 var(--danger-hue));
    --danger-50: oklch(from var(--danger) calc(l + (9 * (0.979 - l) / 9)) calc(c + (9 * (0.016 - c) / 9)) calc(var(--danger-hue) + 9 *.6));
    --danger-100: oklch(from var(--danger) calc(l + (8 * (0.979 - l) / 9)) calc(c + (8 * (0.016 - c) / 9)) calc(var(--danger-hue) + 8 *.6));
    --danger-200: oklch(from var(--danger) calc(l + (6 * (0.979 - l) / 9)) calc(c + (6 * (0.016 - c) / 9)) calc(var(--danger-hue) + 6 *.6));
    --danger-300: oklch(from var(--danger) calc(l + (4 * (0.979 - l) / 9)) calc(c + (4 * (0.016 - c) / 9)) calc(var(--danger-hue) + 4 *.6));
    --danger-400: oklch(from var(--danger) calc(l + (2 * (0.979 - l) / 9)) calc(c + (2 * (0.016 - c) / 9)) calc(var(--danger-hue) + 2 *.6));
    --danger-500: var(--danger);
    --danger-600: oklch(from var(--danger) calc(l + (2 * (0.197 - l) / 9)) calc(c + (2 * (0.03 - c) / 9)) calc(var(--danger-hue) - 6 *.6));
    --danger-700: oklch(from var(--danger) calc(l + (4 * (0.197 - l) / 9)) calc(c + (4 * (0.03 - c) / 9)) calc(var(--danger-hue) - 4 *.6));
    --danger-800: oklch(from var(--danger) calc(l + (6 * (0.197 - l) / 9)) calc(c + (6 * (0.03 - c) / 9)) calc(var(--danger-hue) - 2 *.6));
    --danger-900: oklch(from var(--danger) calc(l + (8 * (0.197 - l) / 9)) calc(c + (8 * (0.03 - c) / 9)) calc(var(--danger-hue) + 0));
    --danger-950: oklch(from var(--danger) calc(l + (9 * (0.197 - l) / 9)) calc(c + (9 * (0.03 - c) / 9)) calc(var(--danger-hue) + 2 *.6));
    --danger-hover: oklch(from var(--danger) .74 .22 h);
    --danger-500-trans-10: oklch(from var(--danger-500) l c h / .1);
    --danger-500-trans-20: oklch(from var(--danger-500) l c h / .2);
    --danger-500-trans-30: oklch(from var(--danger-500) l c h / .3);
    --danger-500-trans-40: oklch(from var(--danger-500) l c h / .4);
    --danger-500-trans-50: oklch(from var(--danger-500) l c h / .5);
    --danger-500-trans-60: oklch(from var(--danger-500) l c h / .6);
    --danger-500-trans-70: oklch(from var(--danger-500) l c h / .7);
    --danger-500-trans-80: oklch(from var(--danger-500) l c h / .8);
    --danger-500-trans-90: oklch(from var(--danger-500) l c h / .9);

    /* contectual colors base */
    --bg-website: var(--white);
    --bg-dark: var(--neutral-dark);
    --bg-ultra-dark: var(--neutral-ultra-dark);
    --bg-light: var(--neutral-light);
    --bg-ultra-light: var(--neutral-ultra-light);


    --text-default: var(--black);
    --text-dark: var(--black);
    --text-dark-muted: var(--neutral-600);
    --text-light: var(--white);
    --text-light-muted: var(--neutral-50);



}

.is-primary {
    background-color: var(--primary-500);
    color: var(--primary-50);
    border: 0;

    &:hover {
        background-color: var(--primary-600)
    }

    &.is-transparent {
        background-color: unset;
        border: 2px solid var(--primary-500);
        color: var(--primary-500);

        &:hover {
            background-color: var(--primary-50)
        }
    }

    &.is-light {
        background-color: var(--primary-100);
        color: var(--primary-700);
        border: 0;

        &:hover {
            background-color: var(--primary-200)
        }
    }

    &.is-dark {
        background-color: var(--primary-800);
        color: var(--primary-50);
        border: 0;

        &:hover {
            background-color: var(--primary-700)
        }
    }

    &.is-outlined {
        background-color: var(--primary-50);
        border: 2px solid var(--primary-500);
        color: var(--primary-500);

        &:hover {
            background-color: var(--primary-100)
        }
    }
}

.has-text-primary {
    color: var(--primary-500);

    &:hover {
        color: var(--primary-700);
    }
}

.has-text-primary-dark {
    color: var(--primary-800);

    &:hover {
        color: var(--primary-950);
    }
}



.is-secondary {
    background-color: var(--secondary-500);
    color: var(--secondary-50);
    border: 0;

    &:hover {
        background-color: var(--secondary-600)
    }

    &.is-transparent {
        background-color: unset;
        border: 2px solid var(--secondary-500);
        color: var(--secondary-500);

        &:hover {
            background-color: var(--secondary-50)
        }
    }

    &.is-light {
        background-color: var(--secondary-100);
        color: var(--secondary-700);
        border: 0;

        &:hover {
            background-color: var(--secondary-200)
        }
    }

    &.is-dark {
        background-color: var(--secondary-800);
        color: var(--secondary-50);
        border: 0;

        &:hover {
            background-color: var(--secondary-700)
        }
    }

    &.is-outlined {
        background-color: var(--secondary-50);
        border: 2px solid var(--secondary-500);
        color: var(--secondary-500);

        &:hover {
            background-color: var(--secondary-100)
        }
    }
}

.has-text-secondary {
    color: var(--secondary-500);

    &:hover {
        color: var(--secondary-700);
    }
}

.has-text-secondary-dark {
    color: var(--secondary-800);

    &:hover {
        color: var(--secondary-950);
    }
}


.is-accent {
    background-color: var(--accent-500);
    color: var(--accent-50);
    border: 0;


    &:hover {
        background-color: var(--accent-600)
    }

    &.is-transparent {
        background-color: unset;
        border: 2px solid var(--accent-500);
        color: var(--accent-500);

        &:hover {
            background-color: var(--accent-50)
        }
    }

    &.is-light {
        background-color: var(--accent-100);
        color: var(--accent-700);
        border: 0;

        &:hover {
            background-color: var(--accent-200)
        }
    }

    &.is-dark {
        background-color: var(--accent-800);
        color: var(--accent-50);
        border: 0;

        &:hover {
            background-color: var(--accent-700)
        }
    }

    &.is-outlined {
        background-color: var(--accent-50);
        border: 2px solid var(--accent-500);
        color: var(--accent-500);

        &:hover {
            background-color: var(--accent-100)
        }
    }
}

.has-text-accent {
    color: var(--accent-500);

    &:hover {
        color: var(--accent-700);
    }
}

.has-text-accent-dark {
    color: var(--accent-800);

    &:hover {
        color: var(--accent-950);
    }
}

.is-tertiary {
    background-color: var(--tertiary-500);
    color: var(--tertiary-50);
    border: 0;

    &:hover {
        background-color: var(--tertiary-600)
    }

    &.is-transparent {
        background-color: unset;
        border: 2px solid var(--tertiary-500);
        color: var(--tertiary-500);

        &:hover {
            background-color: var(--tertiary-50)
        }
    }

    &.is-light {
        background-color: var(--tertiary-100);
        color: var(--tertiary-700);
        border: 0;

        &:hover {
            background-color: var(--tertiary-200)
        }
    }

    &.is-dark {
        background-color: var(--tertiary-800);
        color: var(--tertiary-50);
        border: 0;

        &:hover {
            background-color: var(--tertiary-700)
        }
    }

    &.is-outlined {
        background-color: var(--tertiary-50);
        border: 2px solid var(--tertiary-500);
        color: var(--tertiary-500);

        &:hover {
            background-color: var(--tertiary-100)
        }
    }
}

.has-text-tertiary {
    color: var(--tertiary-500);

    &:hover {
        color: var(--tertiary-700);
    }
}

.has-text-tertiary-dark {
    color: var(--tertiary-800);

    &:hover {
        color: var(--tertiary-950);
    }
}


.is-base {
    background-color: var(--base-500);
    color: var(--base-50);
    border: 0;

    &:hover {
        background-color: var(--base-400)
    }

    &.is-transparent {
        background-color: unset;
        border: 2px solid var(--base-500);
        color: var(--base-500);

        &:hover {
            background-color: var(--base-50)
        }
    }

    &.is-light {
        background-color: var(--base-100);
        color: var(--base-700);
        border: 0;

        &:hover {
            background-color: var(--base-200)
        }
    }

    &.is-dark {
        background-color: var(--base-700);
        color: var(--base-50);
        border: 0;

        &:hover {
            background-color: var(--base-400)
        }
    }

    &.is-outlined {
        background-color: var(--base-50);
        border: 2px solid var(--base-500);
        color: var(--base-500);

        &:hover {
            background-color: var(--base-100)
        }
    }
}

.has-text-base {
    color: var(--base-500);

    &:hover {
        color: var(--base-700);
    }
}

.has-text-base-dark {
    color: var(--base-800);

    &:hover {
        color: var(--base-950);
    }
}

.is-neutral {
    background-color: var(--neutral-500);
    color: var(--neutral-50);
    border: 0;

    &:hover {
        background-color: var(--neutral-600)
    }

    &.is-transparent {
        background-color: unset;
        border: 2px solid var(--neutral-500);
        color: var(--neutral-500);

        &:hover {
            background-color: var(--neutral-50)
        }
    }

    &.is-light {
        background-color: var(--neutral-100);
        color: var(--neutral-700);
        border: 0;

        &:hover {
            background-color: var(--neutral-200)
        }
    }

    &.is-dark {
        background-color: var(--neutral-800);
        color: var(--neutral-50);
        border: 0;

        &:hover {
            background-color: var(--neutral-700)
        }
    }

    &.is-outlined {
        background-color: var(--neutral-50);
        border: 2px solid var(--neutral-500);
        color: var(--neutral-500);

        &:hover {
            background-color: var(--neutral-100)
        }
    }
}

.has-text-neutral {
    color: var(--neutral-500);

    &:hover {
        color: var(--neutral-700);
    }
}

.has-text-neutral-dark {
    color: var(--neutral-800);

    &:hover {
        color: var(--neutral-950);
    }
}

.is-success {
    background-color: var(--success-500);
    color: var(--success-50);
    border: 0;

    &:hover {
        background-color: var(--success-600)
    }



    &.is-light {
        background-color: var(--success-100);
        color: var(--success-700);
        border: 0;

        &:hover {
            background-color: var(--success-200)
        }
    }

    &.is-dark {
        background-color: var(--success-700);
        color: var(--success-50);
        border: 0;

        &:hover {
            background-color: var(--success-800)
        }
    }

    &.is-outlined {
        background-color: var(--success-50);
        border: 2px solid var(--success-500);
        color: var(--success-500);

        &:hover {
            background-color: var(--success-100)
        }
    }
}

.has-text-success {
    color: var(--success-500);

    &:hover {
        color: var(--success-700);
    }
}

.has-text-success-dark {
    color: var(--success-800);

    &:hover {
        color: var(--success-950);
    }
}

.is-warning {
    background-color: var(--warning-500);
    color: var(--warning-50);
    border: 0;

    &:hover {
        background-color: var(--warning-600)
    }

    &.is-light {
        background-color: var(--warning-100);
        color: var(--warning-700);
        border: 0;

        &:hover {
            background-color: var(--warning-200)
        }
    }

    &.is-dark {
        background-color: var(--warning-800);
        color: var(--warning-50);
        border: 0;

        &:hover {
            background-color: var(--warning-600)
        }
    }

    &.is-outlined {
        background-color: var(--warning-50);
        border: 2px solid var(--warning-500);
        color: var(--warning-500);

        &:hover {
            background-color: var(--warning-100)
        }
    }
}

.has-text-warning {
    color: var(--warning-500);

    &:hover {
        color: var(--warning-700);
    }
}

.has-text-warning-dark {
    color: var(--warning-800);

    &:hover {
        color: var(--warning-950);
    }
}

.is-info {
    background-color: var(--info-500);
    color: var(--info-50);
    border: 0;

    &:hover {
        background-color: var(--info-600)
    }

    &.is-light {
        background-color: var(--info-100);
        color: var(--info-700);
        border: 0;

        &:hover {
            background-color: var(--info-200)
        }
    }

    &.is-dark {
        background-color: var(--info-800);
        color: var(--info-50);
        border: 0;

        &:hover {
            background-color: var(--info-600)
        }
    }

    &.is-outlined {
        background-color: var(--info-50);
        border: 2px solid var(--info-500);
        color: var(--info-500);

        &:hover {
            background-color: var(--info-100)
        }
    }
}

.has-text-info {
    color: var(--info-500);

    &:hover {
        color: var(--info-700);
    }
}

.has-text-info-dark {
    color: var(--info-800);

    &:hover {
        color: var(--info-950);
    }
}

.is-danger {
    background-color: var(--danger-500);
    color: var(--danger-50);
    border: 0;

    &:hover {
        background-color: var(--danger-600)
    }

    &.is-light {
        background-color: var(--danger-100);
        color: var(--danger-700);
        border: 0;

        &:hover {
            background-color: var(--danger-200)
        }
    }

    &.is-dark {
        background-color: var(--danger-600);
        color: var(--danger-50);
        border: 0;

        &:hover {
            background-color: var(--danger-700)
        }
    }

    &.is-outlined {
        background-color: var(--danger-50);
        border: 2px solid var(--danger-500);
        color: var(--danger-500);

        &:hover {
            background-color: var(--danger-100)
        }
    }
}

.has-text-danger {
    color: var(--danger-500);

    &:hover {
        color: var(--danger-700);
    }
}

.has-text-danger-dark {
    color: var(--danger-800);

    &:hover {
        color: var(--danger-950);
    }
}
/* Extra css here */
@media (min-width: 1024px) {
.nav-grid.logo-hor {
grid-template-columns: 167px 95px 1fr 150px 150px;
}
}
#shopcart {
color: #930;
border-color: #ffdfb8;
background: #ffebd2;
}
@media (min-width: 1024px) {
.button.accented {
& .svg-icon-stroke {
stroke: #930000;
}
}
}
.menu-items-container {
background: linear-gradient(#3586bc, #1b74b2);
padding: 0 .75rem 0.2rem .75rem;
}
@media (min-width: 1024px) {
.menu-items-container {
& .menu-items {
& .menu-item a {
color: white;
}
}
}
}
@media (min-width: 1024px) {
.menu-items-container {
& .menu-items {
& .menu-item a:hover {
color: white;
text-decoration-color:white;
}
}
}
}