:root {

    /*-- Base --*/
    /*Brand color */
    --l-prm: 45%;
    --c-prm: .272391;
    --h-prm: 268;
  
    /* chroma control */
    --c-ntl-b: 1;
    --c-prm-comp-1: 1.2;
    --c-prm-comp-2: 1.4;
    --c-prm-comp-3: 2;
    --c-prm-comp-4: 1;


    /* Accent */
    --prm-100: oklch(92% .05 var(--h-prm));
    --prm-200: oklch(89% .12 var(--h-prm));
    --prm-300: oklch(87.67% .14 var(--h-prm));
    --prm-400: oklch(var(--l-prm) var(--c-prm) var(--h-prm));
    --prm-500: oklch(calc(var(--l-prm) - 10%) .2 var(--h-prm));

    /* Complementary */
    --prm-comp-1:oklch(88% calc(.12 * var(--c-prm-comp-1)) calc(var(--h-prm) + 140));
    --prm-comp-1-lgt: oklch(from var(--prm-comp-1) 99% .1 h); 
    --prm-comp-1-drk: oklch(from var(--prm-comp-1) 40% .2 h);
  
    --prm-comp-2:oklch(72% calc(.2 * var(--c-prm-comp-2)) calc(var(--h-prm) + 220));
    --prm-comp-2-lgt: oklch(from var(--prm-comp-2) 96% .1 h); 
    --prm-comp-2-drk: oklch(from var(--prm-comp-2) 40% .2 h);
  
    --prm-comp-3:oklch(64% calc(.1 * var(--c-prm-comp-3)) calc(var(--h-prm) + 270));
    --prm-comp-3-lgt: oklch(from var(--prm-comp-3) 99% .1 h); 
    --prm-comp-3-drk: oklch(from var(--prm-comp-3) 32% .2 h);
  
    --prm-comp-4:oklch(56% calc(.2 * var(--c-prm-comp-4)) calc(var(--h-prm) + 90));
    --prm-comp-4-lgt: oklch(from var(--prm-comp-4) 92% .1 h); 
    --prm-comp-4-drk: oklch(from var(--prm-comp-4) 40% .18 h);


    /* Neutral */
    --ntl-100: #fff;                                                                   /* White */
    --ntl-200: oklch(98.5% calc(.01 * var(--c-ntl-b)) var(--h-prm));                   /* Light grey */
    --ntl-300: oklch(94% calc(.02 * var(--c-ntl-b)) var(--h-prm));                     /* Mid ight grey */
    --ntl-400: oklch(88% calc(.016 * var(--c-ntl-b)) var(--h-prm));                     /* Mid grey */
    --ntl-500: oklch(74% calc(.02 * var(--c-ntl-b)) var(--h-prm));                     /* Grey */
    --ntl-600: oklch(42% calc(.04 * var(--c-ntl-b)) var(--h-prm));                     /* Dark Grey */
    --ntl-700: oklch(13% calc(.08 * var(--c-ntl-b)) var(--h-prm));                     /* Black */
    --opc: transparent;

    
    /* Alert */
    --atn-clr: var(--prm-comp-1);
    --neg-alt: var(--prm-comp-4);
    --neg-alt-lgt: var(--prm-comp-4-lgt);
    --neg-alt-drk: var(--prm-comp-4-drk);
    --pos-alt: var(--prm-comp-2);
    --pos-alt-lgt: var(--prm-comp-2-lgt);
    --pos-alt-drk: var(--prm-comp-2-drk);

    /* Social brand color */
    --viber:oklch(57.05% 0.1422 308.17);
    --whatsapp: oklch(76.1% 0.2015 149.74);
    --facebook:oklch(57.31% 0.1882 257.17);
    --telegram:oklch(59.98% 0.14119 241.5546);
    --linkedin: oklch(54.58% 0.130182 242.2738);
    --ok:oklch(73.11% 0.1642 57.17);
    --vk:oklch(59.67% 0.2212 258.03);
    --pinterest:oklch(50.5% 0.2018 25.75);
    --twitter:oklch(68.18% 0.1584 243.35);

    /* Number system */
    --n-xs: .125rem;  /* 2px   */
    --n-s: .25rem;    /* 4px   */
    --n-m: .5rem;     /* 8px   */
    --n-l: .75rem;    /* 12px  */
    --n-xl: 1rem;      /* 16px  */
    --n-2xl: 1.5rem;   /* 24px  */
    --n-3xl: 2rem;     /* 32px  */
    --n-4xl: 3rem;     /* 48px  */
    --n-5xl: 4.5rem;   /* 72px  */
    --n-6xl: 6rem;     /* 96px  */

    /*-- Tokens --*/
    /* Interface */
    --card-bg:var(--ntl-200);
    --card-bg-act:var(--ntl-100);
    --ui-bg:var(--ntl-300);
    --acc-bg:var(--prm-100);
    --ovr-clr:oklch(11% .045 var(--h-prm) / 80%);
    --card-shd-clr: oklch(17.22% .085 var(--h-prm) / 6%);

    /* Comunicate */
    --label-bg-clr:var(--atn-clr);
    --label-txt-clr:var(--ntl-700);
    --ok-bg-clr:var(--pos-alt-lgt);
    --ok-txt-clr:var(--pos-alt-drk);
    --dng-bg-clr:var(--neg-alt-lgt);
    --dng-txt-clr:var(--neg-alt-drk);

    /* Typography */
    /* Colors */
    --hd: var(--ntl-700);                                           /* Headings */
    --txt: var(--ntl-600);                                          /* Body text */
    --promo-prs-clr: var(--neg-alt);                                /* Discount price */

    /* Font width */
    --w400: 400; 
    --w500: 500;
    --w700: 700;
    --w900: 900;

    /* Heading sizes */
    --t1: min(3.49vw, 2.5rem);      /* 40px */
    --t2: min(2.91vw, 2rem);        /* 32px */
    --t3: min(2.62vw, 1.5rem);      /* 24px */
    --t4: min(2.33vw, 1.25rem);     /* 20px */

    /* Body text sizes */
    --fs-s: .75rem;                              
    --fs-m: clamp(.75rem, 1.667vw, .875rem);    
    --fs-l: clamp(.75rem, 1.667vw, 1rem);        
    --flh: calc(1em + .5rem);                    /* Font height */

    /* Button tokens */
    --btn-bg:var(--prm-400);
    --btn-txt:var(--ntl-100);
    --sec-btn-bg:var(--prm-300);
    --sec-btn-txt:var(--prm-500);
    --u_d-btn-bg: var(--prm-comp);
    --u_d-btn-txt:oklch(from var(--prm-comp) 30% c h);
    --btn-fcs:0 0 0 var(--strk-w) var(--ui-bg), 0 0 0 calc(var(--strk-w) * 2) var(--prm-400);
    --btn-hvr-bg:var(--prm-500);
    --btn-hvr-txt:var(--ntl-100);
/*  --btn-dsbl-bg:;
    --btn-dsbl-txt:; 
    --btn-ic:;
    --btn-ic-bg:;*/
    --btn-ic-sz:var(--n-2xl);
    --btn-gpm:var(--n-xl) var(--n-2xl);
    --btn-br:var(--br-l);
    --btn-sh:var(--card-shd);
    --btn-txt-sz:var(--fs-l);

    /* link tokens */
    --link:oklch(50.01% .189 calc(var(--h-prm) / 30 + 235));       /* Links*/
    --link-vs:oklch(51.48% .233 calc(var(--h-prm) / 30 + 305));    /* Visited links */
    --nav-link-atv-clr: var(--prm-400);                            /* Main menu active link */

    /* Stroke & Shadows */
    --strk-w: var(--n-xs);                                    /* Stroke width */
    --strk-h: 0 0 0 var(--strk-w) var(--prm-400);           /* Hover & Focus shadow*/
    --strk-s: 0 0 0 var(--strk-w) var(--prm-400);           /* Succes shadow*/
    --strk-e: 0 0 0 var(--strk-w) var(--neg-alt-drk);   /* Error shadow*/
    --card-shd: 0 var(--n-xs) var(--n-s) var(--card-shd-clr);              /* Card shadow */

    /* Inputs */
    --input-def-bg:var(--acc-bg);
    --input-actn-bg:var(--prm-200);
    --input-actn-clr:var(--prm-400);
    --input-actn-txt:var(--prm-500);
    --input-err-bg-clr:var(--neg-alt-lgt);
    --input-err-txt-clr:var(--neg-alt-drk);
    --check_b-bg-clr:var(--prm-400);
    --check_b-def-clr:var(--ntl-600);

    /*-- Sizes --*/
    --cont-w: min(93%, 70.5rem);      /* Base container width */
    --cont-lyt: left / right;
    --header-h:5.375em;              /* Header height */
    --deco-w:clamp(2.8em, clamp(7.5vmin, 4vw, 88px), 5em); /* Decor width*/

    /* Gap & Padding & Margin */
    --gpm-m: clamp(var(--n-l), 2vw, var(--n-2xl));          /* 12px < 16px < 24px */
    --gpm-m2: var(--gpm-m);                                 /* 24px < 16px < 24px */
    --gpm-l: clamp(var(--n-2xl), 4.688vw, var(--n-4xl));    /* 24px < 36px < 48px */
    --gpm-xl: clamp(var(--n-4xl), 9.375vw, var(--n-6xl));   /* 48px < 72px < 96px */

    --i-gpm: var(--n-l);          /* 42px < 12px */
    --p-side: min(5vw,var(--n-6xl));

    /* Border radius */
    --br-s: var(--n-s);              /* 4px */
    --br-m: var(--n-m);              /* 8px */
    --br-l: var(--n-l);              /* 12px */
    --br-xl: var(--n-xl);            /* 16px */
    --br-2xl: var(--n-2xl);          /* 24px */
    --br-3xl: 50%;                   /* for circle */

    /* Icon & IMG */
    --gfx-s-1:var(--n-m);    /* 8px */
    --gfx-s-2:var(--n-xl);   /* 16px */
    --gfx-s-3:var(--n-2xl);  /* 24px */
    --gfx-s-4:var(--n-3xl);  /* 32px */
    --gfx-s-5:var(--n-4xl);  /* 48px */

    /* FX */ 
    --blr-1: blur(4px); /* Blurs */

    /* Transition */
    --trs-1: .2s;
    --trs-2: .6s;
    --trs-3: 1s;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Other */
    --check-ic-url: url('/wp-content/uploads/Check-fills.svg');

    interpolate-size: allow-keywords;
}

@media (width < 70.5em) {:root {--p-side:3vw;--deco-w:6dvw;}}
@media (width < 40em) {
:root {
        --t1: clamp(1.375rem, 7.2vw, 3rem);  
        --t2: clamp(1.25rem, 5.8vw, 2.5rem);       
        --t3: clamp(1.125rem, 5.5vw, 2rem);    
        --t4: clamp(1rem, 5vw, 1.2rem);         
    
        --fs-s: clamp(.75rem, 4vw, .875rem);
        --fs-m: clamp(.75rem, 4.2vw, 1rem);
        --fs-l: var(--fs-m); 

        --gpm-m2:var(--n-2xl);
        --i-gpm: calc(var(--n-s) + var(--n-xl)); 
        --p-side:0;

        --deco-w:12dvw;
}
}

@media (prefers-color-scheme: dark) {
    :root {

    }
}

@media (prefers-contrast: more) {
    :root {
    --w400: 500; 
    --w500: 700;
}
}

@media (prefers-contrast: less) {
    :root {
    --w500: 400;
    --w700: 500;
    --w900: 700;
}}