/***************************** 

  CSS Framework
  Author: Doug Rider, RiderWorks LLC @link https://riderworks.com/

*****************************/

/*****************************

  00* - TABLE OF CONTENTS

  01* - FONT FAMILY BODY
  02* - FONT SPACES, WEIGHTS & MISCELLANEOUS
  03* - FONT HEADING SIZES
  04* - FONT BODY SIZES

  05* - SPACE GAP
  06* - SPACE CARD
  07* - SPACE CONTENT
  08* - SPACE CONTAINER
  09* - SPACE CARD WIDTH
  10* - SPACE BLOCK
  11* - SPACE INLINE

  12* - HEADER & FOOTER HEIGHTS
  13* - WIDTHS
  14* - BORDER RADIUS
  15* - TRANSITIONS
  16* - BOX SHADOWS

  17* - COLORS PRIMARY
  18* - COLORS ACCENT
  19* - BACKGROUND LIGHT & DARK COLORS
  20* - BODY LIGHT & DARK COLORS
  21* - HEADING LIGHT & DARK COLORS
  
  22* - LINK LIGHT & DARK COLORS
  23* - ERROR LIGHT & DARK COLORS
  24* - RADIAL LIGHT & DARK COLORS
  25* - SOCIAL MEDIA LIGHT & DARK COLORS

*****************************/


:root {

  color-scheme: light dark;

  /*****************************
    *
    * 01* - Font Families Body
    */
    
  --font-family--body: 'ReadExpro', system-ui, sans-serif;
  
    /*****************************/
      
  --font-family--heading: 'Roraima', Georgia, serif;
  
    
  /*****************************
    *
    * 02* - Font Spacing, Font Weight & Miscellaneous
    */
  
  /*  Defualt Scaling Increments for Fonts and Spaces  */
  --_inc--7xs: 0.5;
  --_inc--6xs: 0.5625;
  --_inc--5xs: 0.625;
  --_inc--4xs: 0.6875;
  --_inc--3xs: 0.75;
  --_inc--2xs: 0.8125;
  --_inc--xs: 0.875;
  --_inc--s: 0.9375;
  --_inc--m: 1;
  --_inc--l: 1.0625;
  --_inc--xl: 1.125;
  --_inc--2xl: 1.1875;
  --_inc--3xl: 1.25;
  --_inc--4xl: 1.3125;
  --_inc--5xl: 1.375;
  --_inc--6xl: 1.4375;
  --_inc--7xl: 1.5;

  /*  Default Line Height  */ 
  --_line-h: 1.618;

  --line-height: var(--_line-h);
  --_space-ratio: var(--_line-h);

  /*  Default Scaling for Fonts  */
  --_font-size--heading: var(--_inc--m);
  --_font-size--body: var(--_inc--m);
  --_font-size--button: var(--_inc--s);
  --_font-size--nav: var(--_inc--s);
  
  --_font-size--post-heading: var(--_inc--m);

  /*  Default Font Weights  */ 
  --font-weight--light: 250;
  --font-weight--bold: 550;
  --font-weight--italic: 325;

  --font-weight--body: 350;
  --font-weight--heading: 250;
  --font-weight--button: 550;
  --font-weight--nav: 375;
  --font-weight--link: 400;
  
  /*  Letter Spacing  */
  --letter-spacing--body: 0.00625em;
  --letter-spacing--heading: 0.0125em;
  --letter-spacing--button: 0.025em;
  --letter-spacing--nav: 0.0125em;
  
  /*  Word Spacing  */
  --word-spacing--body: 0;
  --word-spacing--heading: -0.05em;
  --word-spacing--button: 0;
  --word-spacing--nav: 0;
  
  /*  Scaling for Spacing  */
  --_size--gap: var(--_inc--m);
  --_size--card: var(--_inc--m);
  --_size--content: var(--_inc--m);
  --_size--container: var(--_inc--m);
    
  /*  Defualt Scaling for Section Padding  */ 
  --_size--block: var(--_inc--m);
  --_size--inline: var(--_inc--m);
  
  /*  Default Button Padding  */ 
  --_btn--pad: calc(var(--_inc--xs) * 1em);

  --button-padding--block: var(--_btn--pad);
  --button-padding--inline: calc(var(--_btn--pad) * var(--_space-ratio));
  
  /*  Default Border Styling  */ 
  --border--0: 0 solid transparent;
  --border--s: 1px solid transparent;
  --border--m: 1.5px solid transparent;
  --border--l: 2px solid transparent;
  --border--xl: 2.5px solid transparent; 
  --border--2xl: 3px solid transparent;

  /*  Default Underline and Focus  */   
  --offset--size: 6px;
  --focus--size: 2px;
  
  --focus--width: 2px;
  --focus--offset: 2px;
  
  --text-underline-offset: 0.3333em;
  
  /*  Default VW Width  */ 
  --width--site: 2560px;

  /*  Default Container Width  */ 
  --width--container: 1440px;
  
  
  /*****************************
    *
    * 03* - Font Heading Sizes
  
    HEADING VI @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=360&minRatio=1.2711&maxFontSize=21&maxWidth=1440&maxRatio=1.433&steps=h6%2Ch5%2Ch4%2Ch3%2Ch2%2Ch1%2Ctitle&baseStep=h4&prefix=_inc-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280
  */

  --_inc--h6: clamp(0.6963rem, -0.0846vi + 0.7153rem, 0.6392rem);
  --_inc--h5: clamp(0.8851rem, 0.0457vi + 0.8748rem, 0.9159rem);
  --_inc--h4: clamp(1.125rem, 0.2778vi + 1.0625rem, 1.3125rem);
  --_inc--h3: clamp(1.43rem, 0.6679vi + 1.2797rem, 1.8808rem);
  --_inc--h2: clamp(1.8177rem, 1.3001vi + 1.5251rem, 2.6952rem);
  --_inc--h1: clamp(2.3104rem, 2.299vi + 1.7932rem, 3.8622rem);
  --_inc--title: clamp(2.9368rem, 3.8486vi + 2.0708rem, 5.5346rem);

  --font-size-heading--h6: calc(var(--_inc--h6) * var(--_font-size--heading));
  --font-size-heading--h5: calc(var(--_inc--h5) * var(--_font-size--heading));
  --font-size-heading--h4: calc(var(--_inc--h4) * var(--_font-size--heading));
  --font-size-heading--h3: calc(var(--_inc--h3) * var(--_font-size--heading));
  --font-size-heading--h2: calc(var(--_inc--h2) * var(--_font-size--heading));
  --font-size-heading--h1: calc(var(--_inc--h1) * var(--_font-size--heading));
  --font-size-heading--title: calc(var(--_inc--title) * var(--_font-size--heading));
  
  
  /*****************************
    *
    * 04* - Font Body Sizes
  
    BODY @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=360&minRatio=1.1274&maxFontSize=18&maxWidth=1440&maxRatio=1.1971&steps=xs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_inc-body-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1036
    */

  --_inc-body--xs: clamp(0.7868rem, -0.0026vi + 0.7873rem, 0.785rem);
  --_inc-body--s: clamp(0.887rem, 0.0782vi + 0.8694rem, 0.9398rem);
  --_inc-body--m: clamp(1rem, 0.1852vi + 0.9583rem, 1.125rem);
  --_inc-body--l: clamp(1.1274rem, 0.3249vi + 1.0543rem, 1.3467rem);
  --_inc-body--xl: clamp(1.271rem, 0.5054vi + 1.1573rem, 1.6122rem);
  --_inc-body--2xl: clamp(1.433rem, 0.7363vi + 1.2673rem, 1.9299rem);
  --_inc-body--3xl: clamp(1.6155rem, 1.0294vi + 1.3839rem, 2.3103rem);

  --font-size-body--xs: calc(var(--_inc-body--xs) * var(--_font-size--body));
  --font-size-body--s: calc(var(--_inc-body--s) * var(--_font-size--body));
  --font-size-body--m: calc(var(--_inc-body--m) * var(--_font-size--body));
  --font-size-body--l: calc(var(--_inc-body--l) * var(--_font-size--body));
  --font-size-body--xl: calc(var(--_inc-body--xl) * var(--_font-size--body));
  --font-size-body--2xl: calc(var(--_inc-body--2xl) * var(--_font-size--body));
  --font-size-body--3xl: calc(var(--_inc-body--3xl) * var(--_font-size--body));

  --font-size-button--xs: calc(var(--_inc-body--xs) * var(--_font-size--button));
  --font-size-button--s: calc(var(--_inc-body--s) * var(--_font-size--button));
  --font-size-button--m: calc(var(--_inc-body--m) * var(--_font-size--button));
  --font-size-button--l: calc(var(--_inc-body--l) * var(--_font-size--button));
  --font-size-button--xl: calc(var(--_inc-body--xl) * var(--_font-size--button));
  --font-size-button--2xl: calc(var(--_inc-body--2xl) * var(--_font-size--button));
  --font-size-button--3xl: calc(var(--_inc-body--3xl) * var(--_font-size--button));

  --font-size-nav--xs: calc(var(--_inc-body--xs) * var(--_font-size--nav));
  --font-size-nav--s: calc(var(--_inc-body--s) * var(--_font-size--nav));
  --font-size-nav--m: calc(var(--_inc-body--m) * var(--_font-size--nav));
  --font-size-nav--l: calc(var(--_inc-body--l) * var(--_font-size--nav));
  --font-size-nav--xl: calc(var(--_inc-body--xl) * var(--_font-size--nav));
  --font-size-nav--2xl: calc(var(--_inc-body--2xl) * var(--_font-size--nav));
  --font-size-nav--3xl: calc(var(--_inc-body--xs3xl) * var(--_font-size--nav));
  
  
  /*****************************
    *
    * 05* - Space Gap
  
    SPACE GAP @link
    https://www.fluid-type-scale.com/calculate?minFontSize=22&minWidth=360&minRatio=1.1274&maxFontSize=44&maxWidth=1440&maxRatio=1.1971&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_gap-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1440
  */

  --_gap--3xs: clamp(13.6179px, 0.7229vi + 11.0154px, 21.4255px);
  --_gap--2xs: clamp(15.3528px, 0.9533vi + 11.921px, 25.6485px);
  --_gap--xs: clamp(17.3088px, 1.2403vi + 12.8438px, 30.7038px);
  --_gap--s: clamp(19.5139px, 1.5964vi + 13.7667px, 36.7555px);
  --_gap--m: clamp(22px, 2.037vi + 14.6667px, 44px);
  --_gap--l: clamp(24.8028px, 2.5805vi + 15.5129px, 52.6724px);
  --_gap--xl: clamp(27.9627px, 3.2492vi + 16.2655px, 63.0541px);
  --_gap--2xl: clamp(31.5251px, 4.0701vi + 16.8728px, 75.4821px);
  --_gap--3xl: clamp(35.5414px, 5.0758vi + 17.2687px, 90.3596px);

  --space-gap--3xs: calc(var(--_gap--3xs) * var(--_size--gap));
  --space-gap--2xs: calc(var(--_gap--2xs) * var(--_size--gap));
  --space-gap--xs: calc(var(--_gap--xs) * var(--_size--gap));
  --space-gap--s: calc(var(--_gap--s) * var(--_size--gap));
  --space-gap--m: calc(var(--_gap--m) * var(--_size--gap));
  --space-gap--l: calc(var(--_gap--l) * var(--_size--gap));
  --space-gap--xl: calc(var(--_gap--xl) * var(--_size--gap));
  --space-gap--2xl: calc(var(--_gap--2xl) * var(--_size--gap));
  --space-gap--3xl: calc(var(--_gap--3xl) * var(--_size--gap));
  
  
  /*****************************
    *
    * 06* - Space Card
  
    SPACE CARD @link
    https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=360&minRatio=1.1274&maxFontSize=24&maxWidth=1440&maxRatio=1.1971&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_card-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1440
  */

  --_card--3xs: clamp(9.9039px, 0.1651vi + 9.3097px, 11.6866px);
  --_card--2xs: clamp(11.1657px, 0.2615vi + 10.2242px, 13.9901px);
  --_card--xs: clamp(12.5882px, 0.3851vi + 11.2018px, 16.7475px);
  --_card--s: clamp(14.1919px, 0.5423vi + 12.2398px, 20.0485px);
  --_card--m: clamp(16px, 0.7407vi + 13.3333px, 24px);
  --_card--l: clamp(18.0384px, 0.99vi + 14.4744px, 28.7304px);
  --_card--xl: clamp(20.3365px, 1.3015vi + 15.6509px, 34.3932px);
  --_card--2xl: clamp(22.9274px, 1.6893vi + 16.8458px, 41.1721px);
  --_card--3xl: clamp(25.8483px, 2.1703vi + 18.0354px, 49.2871px);

  --space-card--3xs: calc(var(--_card--3xs) * var(--_size--card));
  --space-card--2xs: calc(var(--_card--2xs) * var(--_size--card));
  --space-card--xs: calc(var(--_card--xs) * var(--_size--card));
  --space-card--s: calc(var(--_card--s) * var(--_size--card));
  --space-card--m: calc(var(--_card--m) * var(--_size--card));
  --space-card--l: calc(var(--_card--l) * var(--_size--card));
  --space-card--xl: calc(var(--_card--xl) * var(--_size--card));
  --space-card--2xl: calc(var(--_card--2xl) * var(--_size--card));
  --space-card--3xl: calc(var(--_card--3xl) * var(--_size--card));
  
  
  /*****************************
    *
    * 07* - Space Content
  
    SPACE CONTENT @link
    https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=360&minRatio=1.1274&maxFontSize=14&maxWidth=1440&maxRatio=1.2711&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_content-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1440
  */

  --_content--3xs: clamp(4.952px, 0.0381vi + 4.815px, 5.363px);
  --_content--2xs: clamp(5.5828px, 0.1143vi + 5.1715px, 6.8169px);
  --_content--xs: clamp(6.2941px, 0.2195vi + 5.5038px, 8.665px);
  --_content--s: clamp(7.096px, 0.3628vi + 5.7899px, 11.0141px);
  --_content--m: clamp(8px, 0.5556vi + 6px, 14px);
  --_content--l: clamp(9.0192px, 0.8126vi + 6.0938px, 17.7954px);
  --_content--xl: clamp(10.1682px, 1.1529vi + 6.0178px, 22.6197px);
  --_content--2xl: clamp(11.4637px, 1.6008vi + 5.7009px, 28.7519px);
  --_content--3xl: clamp(12.9242px, 2.1873vi + 5.05px, 36.5466px);

  --space-content--3xs: calc(var(--_content--3xs) * var(--_size--content));
  --space-content--2xs: calc(var(--_content--2xs) * var(--_size--content));
  --space-content--xs: calc(var(--_content--xs) * var(--_size--content));
  --space-content--s: calc(var(--_content--s) * var(--_size--content));
  --space-content--m: calc(var(--_content--m) * var(--_size--content));
  --space-content--l: calc(var(--_content--l) * var(--_size--content));
  --space-content--xl: calc(var(--_content--xl) * var(--_size--content));
  --space-content--2xl: calc(var(--_content--2xl) * var(--_size--content));
  --space-content--3xl: calc(var(--_content--3xl) * var(--_size--content));
  
  
  /*****************************
    *
    * 08* - Space Container
  
    SPACE CONTAINER @link
    https://www.fluid-type-scale.com/calculate?minFontSize=24&minWidth=360&minRatio=1.1274&maxFontSize=48&maxWidth=1440&maxRatio=1.2711&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_container-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1440
  */

  --_container--3xs: clamp(14.8559px, 0.327vi + 13.6787px, 18.3875px);
  --_container--2xs: clamp(16.7485px, 0.6133vi + 14.5406px, 23.3723px);
  --_container--xs: clamp(18.8823px, 1.0024vi + 15.2736px, 29.7086px);
  --_container--s: clamp(21.2879px, 1.5254vi + 15.7964px, 37.7626px);
  --_container--m: clamp(24px, 2.2222vi + 16px, 48px);
  --_container--l: clamp(27.0576px, 3.144vi + 15.7392px, 61.0128px);
  --_container--xl: clamp(30.5047px, 4.3564vi + 14.8219px, 77.5534px);
  --_container--2xl: clamp(34.391px, 5.9432vi + 12.9954px, 98.5781px);
  --_container--3xl: clamp(38.7725px, 8.0121vi + 9.9291px, 125.3026px);

  --space-container--3xs: calc(var(--_container--3xs) * var(--_size--container));
  --space-container--2xs: calc(var(--_container--2xs) * var(--_size--container));
  --space-container--xs: calc(var(--_container--xs) * var(--_size--container));
  --space-container--s: calc(var(--_container--s) * var(--_size--container));
  --space-container--m: calc(var(--_container--m) * var(--_size--container));
  --space-container--l: calc(var(--_container--l) * var(--_size--container));
  --space-container--xl: calc(var(--_container--xl) * var(--_size--container));
  --space-container--2xl: calc(var(--_container--2xl) * var(--_size--container));
  --space-container--3xl: calc(var(--_container--3xl) * var(--_size--container));
  
  
  /*****************************
    *
    * 09* - Space Card Width - fit for image sizes with GRID #products
  
    https://www.fluid-type-scale.com/calculate?minFontSize=180&minWidth=360&minRatio=1.2&maxFontSize=220&maxWidth=1440&maxRatio=1.25&steps=fit&baseStep=fit&prefix=card&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=614
  */

  --card-fit: clamp(180px, 3.7037vi + 166.6667px, 220px);
  
  
  /*****************************
    *
    * 10* - Space Block
  
    SPACE BLOCK @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=36&minWidth=360&minRatio=1.1971&maxFontSize=96&maxWidth=1440&maxRatio=1.2711&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_block-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280
    */

  --_block--3xs: clamp(17.53px, 1.7819vi + 11.1149px, 36.775px);
  --_block--2xs: clamp(20.9851px, 2.3851vi + 12.3986px, 46.7447px);
  --_block--xs: clamp(25.1213px, 3.1755vi + 13.6893px, 59.4171px);
  --_block--s: clamp(30.0727px, 4.2086vi + 14.9219px, 75.5251px);
  --_block--m: clamp(36px, 5.5556vi + 16px, 96px);
  --_block--l: clamp(43.0956px, 7.3083vi + 16.7856px, 122.0256px);
  --_block--xl: clamp(51.5897px, 9.5849vi + 17.0841px, 155.1067px);
  --_block--2xl: clamp(61.7581px, 12.5369vi + 16.6254px, 197.1562px);
  --_block--3xl: clamp(73.9306px, 16.3588vi + 15.0391px, 250.6052px);

  --space--3xs: calc(var(--_block--3xs) * var(--_size--block));
  --space--2xs: calc(var(--_block--2xs) * var(--_size--block));
  --space--xs: calc(var(--_block--xs) * var(--_size--block));
  --space--s: calc(var(--_block--s) * var(--_size--block));
  --space--m: calc(var(--_block--m) * var(--_size--block));
  --space--l: calc(var(--_block--l) * var(--_size--block));
  --space--xl: calc(var(--_block--xl) * var(--_size--block));
  --space--2xl: calc(var(--_block--2xl) * var(--_size--block));
  --space--3xl: calc(var(--_block--3xl) * var(--_size--block));
  
  
  /*****************************
    *
    * 11* - Space Block and Inline
  
    SPACE BLOCK @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=36&minWidth=360&minRatio=1&maxFontSize=120&maxWidth=1440&maxRatio=2&steps=block-half%2Cblock&baseStep=block&prefix=_sp&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280
    */

  --_sp-block--half: clamp(36px, 2.2222vi + 28px, 60px);
  --_sp-block: clamp(36px, 7.7778vi + 8px, 120px);

  --space-block--half: calc(var(--_sp-block--half) * var(--_size--block));
  --space-block: calc(var(--_sp-block) * var(--_size--block));
  

    /**
    SPACE INLINE @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=24&minWidth=360&minRatio=1.067&maxFontSize=60&maxWidth=1440&maxRatio=1.125&steps=inline&baseStep=inline&prefix=sp&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280
    */
  
  --_sp-inline: clamp(24px, 3.3333vi + 12px, 60px);

  --space-inline: calc(var(--_sp-inline) * var(--_size--inline));
  

  /*****************************
    *
    * 12* - Header Footer Height & Heading Page Template
  
    SPACE HEADER FOOTER  @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=360&minRatio=1.1971&maxFontSize=20&maxWidth=1440&maxRatio=1.433&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_header-footer-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280

    SPACD HEADING PAGE TEMPLATE
    https://www.fluid-type-scale.com/calculate?minFontSize=140&minWidth=360&minRatio=1.1971&maxFontSize=200&maxWidth=1440&maxRatio=1.433&steps=page&baseStep=page&prefix=heading&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280
   */ 

  --heading-page: clamp(140px, 5.5556vi + 120px, 200px);
  
  
  /*****************************
    *
    * 13* - Container Widths
    */
  
  --_width-offset: calc(var(--width--container) / 6);

  --width--ch: 65ch;   /*  This is '0' font dependent  */

  --width--3xs: calc(var(--width--container) - var(--_width-offset) * 4);  /*  480px   */
  --width--2xs: calc(var(--width--container) - var(--_width-offset) * 3);  /*  720px   */
  --width--xs: calc(var(--width--container) - var(--_width-offset) * 2);   /*  960px   */
  --width--s: calc(var(--width--container) - var(--_width-offset) * 1);    /*  1200px  */
  --width--m: var(--width--container);                                     /*  1440px  */
  --width--l: calc(var(--width--container) + var(--_width-offset) * 1);    /*  1680px  */
  

  /****************************
  *
    Mini Cart slideout width @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=320&minWidth=360&minRatio=1&maxFontSize=420&maxWidth=1368&maxRatio=1.00000001&steps=width&baseStep=h4&prefix=cart&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1200
  */

  --cart-width: clamp(320px, 9.92vi + 284.29px, 420px);


  /*****************************
    *
    * 14* - Border Radius
    */

  --border-radius--xs: 3px;
  --border-radius--s: calc(var(--border-radius--xs) * var(--_space-ratio));
  --border-radius--m: calc(var(--border-radius--s) * var(--_space-ratio));
  --border-radius--l: calc(var(--border-radius--m) * var(--_space-ratio));
  --border-radius--xl: calc(var(--border-radius--l) * var(--_space-ratio));
  --border-radius--circle: 100%;
  
  
  /*****************************
    *
    * 15* - Transitionss
    */

  --_curve: cubic-bezier(0.5, 0, 0.5, 1);

  --transition--xs: 0.1s var(--_curve);
  --transition--s: 0.2s var(--_curve);
  --transition--m: 0.3s var(--_curve);
  --transition--l: 0.4s var(--_curve);
  --transition--xl: 0.5s var(--_curve);
  
  
  /*****************************
    *
    * 16* - Box Shadows
    * @link https://shadows.brumm.af
    * @link https://tobiasahlin.com/blog/layered-smooth-box-shadows/
    */

  --_rgb: 0.1;
  --_rgb--scale: 0.25;

  /****************************/ 

  --_hor--s: 0px;
  --_ver--s: 0.75px;
  --_blur--s: calc(3 * var(--_ver--s));
  --_inset--s: calc(-0.5 * var(--_ver--s));
  --_scale--s: 0.75;
  --_scale--s-hover: calc(2 * var(--_scale--s));

  --box-shadow--s: 
    calc(var(--_hor--s) * var(--_scale--s) * 1) 
    calc(var(--_ver--s) * var(--_scale--s) * 1) 
    calc(var(--_blur--s) * var(--_scale--s) * 1) 
    calc(var(--_inset--s) * var(--_scale--s) * 1) 
    rgba(0,0,0,calc(var(--_rgb))),

    calc(var(--_hor--s) * var(--_scale--s) * 2) 
    calc(var(--_ver--s) * var(--_scale--s) * 2) 
    calc(var(--_blur--s) * var(--_scale--s) * 2) 
    calc(var(--_inset--s) * var(--_scale--s) * 2) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)),

    calc(var(--_hor--s) * var(--_scale--s) * 4) 
    calc(var(--_ver--s) * var(--_scale--s) * 4) 
    calc(var(--_blur--s) * var(--_scale--s) * 4) 
    calc(var(--_inset--s) * var(--_scale--s) * 4) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)),

    calc(var(--_hor--s) * var(--_scale--s) * 8) 
    calc(var(--_ver--s) * var(--_scale--s) * 8) 
    calc(var(--_blur--s) * var(--_scale--s) * 8) 
    calc(var(--_inset--s) * var(--_scale--s) * 8) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)),

    calc(var(--_hor--s) * var(--_scale--s) * 16) 
    calc(var(--_ver--s) * var(--_scale--s) * 16) 
    calc(var(--_blur--s) * var(--_scale--s) * 16) 
    calc(var(--_inset--s) * var(--_scale--s) * 16) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4));

  /****************************/ 
    
  --box-shadow--s-hover: 
    calc(var(--_hor--s) * var(--_scale--s-hover) * 1) 
    calc(var(--_ver--s) * var(--_scale--s-hover) * 1) 
    calc(var(--_blur--s) * var(--_scale--s-hover) * 1) 
    calc(var(--_inset--s) * var(--_scale--s-hover) * 1) 
    rgba(0,0,0,calc(var(--_rgb))),

    calc(var(--_hor--s) * var(--_scale--s-hover) * 2) 
    calc(var(--_ver--s) * var(--_scale--s-hover) * 2) 
    calc(var(--_blur--s) * var(--_scale--s-hover) * 2) 
    calc(var(--_inset--s) * var(--_scale--s-hover) * 2) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)),

    calc(var(--_hor--s) * var(--_scale--s-hover) * 4) 
    calc(var(--_ver--s) * var(--_scale--s-hover) * 4) 
    calc(var(--_blur--s) * var(--_scale--s-hover) * 4) 
    calc(var(--_inset--s) * var(--_scale--s-hover) * 4) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)),

    calc(var(--_hor--s) * var(--_scale--s-hover) * 8) 
    calc(var(--_ver--s) * var(--_scale--s-hover) * 8) 
    calc(var(--_blur--s) * var(--_scale--s-hover) * 8) 
    calc(var(--_inset--s) * var(--_scale--s-hover) * 8) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)),

    calc(var(--_hor--s) * var(--_scale--s-hover) * 16) 
    calc(var(--_ver--s) * var(--_scale--s-hover) * 16) 
    calc(var(--_blur--s) * var(--_scale--s-hover) * 16) 
    calc(var(--_inset--s) * var(--_scale--s-hover) * 16) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4));

  /****************************/ 

  --_hor--m: 0px;
  --_ver--m: 1px;
  --_blur--m: calc(3 * var(--_ver--m));
  --_inset--m: calc(-0.5 * var(--_ver--m));
  --_scale--m: 1;
  --_scale--m-hover: calc(2 * var(--_scale--m));

  --box-shadow--m: 
    calc(var(--_hor--m) * var(--_scale--m) * 1) 
    calc(var(--_ver--m) * var(--_scale--m) * 1) 
    calc(var(--_blur--m) * var(--_scale--m) * 1) 
    calc(var(--_inset--m) * var(--_scale--m) * 1) 
    rgba(0,0,0,calc(var(--_rgb))),

    calc(var(--_hor--m) * var(--_scale--m) * 2) 
    calc(var(--_ver--m) * var(--_scale--m) * 2) 
    calc(var(--_blur--m) * var(--_scale--m) * 2) 
    calc(var(--_inset--m) * var(--_scale--m) * 2) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)),

    calc(var(--_hor--m) * var(--_scale--m) * 4) 
    calc(var(--_ver--m) * var(--_scale--m) * 4) 
    calc(var(--_blur--m) * var(--_scale--m) * 4) 
    calc(var(--_inset--m) * var(--_scale--m) * 4) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)),

    calc(var(--_hor--m) * var(--_scale--m) * 8) 
    calc(var(--_ver--m) * var(--_scale--m) * 8) 
    calc(var(--_blur--m) * var(--_scale--m) * 8) 
    calc(var(--_inset--m) * var(--_scale--m) * 8) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)),

    calc(var(--_hor--m) * var(--_scale--m) * 16) 
    calc(var(--_ver--m) * var(--_scale--m) * 16) 
    calc(var(--_blur--m) * var(--_scale--m) * 16) 
    calc(var(--_inset--m) * var(--_scale--m) * 16) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4));

  /****************************/ 

  --box-shadow--m-hover: 
    calc(var(--_hor--m) * var(--_scale--m-hover) * 1) 
    calc(var(--_ver--m) * var(--_scale--m-hover) * 1) 
    calc(var(--_blur--m) * var(--_scale--m-hover) * 1) 
    calc(var(--_inset--m) * var(--_scale--m-hover) * 1) 
    rgba(0,0,0,calc(var(--_rgb))),

    calc(var(--_hor--m) * var(--_scale--m-hover) * 2) 
    calc(var(--_ver--m) * var(--_scale--m-hover) * 2) 
    calc(var(--_blur--m) * var(--_scale--m-hover) * 2) 
    calc(var(--_inset--m) * var(--_scale--m-hover) * 2) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)),

    calc(var(--_hor--m) * var(--_scale--m-hover) * 4) 
    calc(var(--_ver--m) * var(--_scale--m-hover) * 4) 
    calc(var(--_blur--m) * var(--_scale--m-hover) * 4) 
    calc(var(--_inset--m) * var(--_scale--m-hover) * 4) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)),

    calc(var(--_hor--m) * var(--_scale--m-hover) * 8) 
    calc(var(--_ver--m) * var(--_scale--m-hover) * 8) 
    calc(var(--_blur--m) * var(--_scale--m-hover) * 8) 
    calc(var(--_inset--m) * var(--_scale--m-hover) * 8) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)),

    calc(var(--_hor--m) * var(--_scale--m-hover) * 16) 
    calc(var(--_ver--m) * var(--_scale--m-hover) * 16) 
    calc(var(--_blur--m) * var(--_scale--m-hover) * 16) 
    calc(var(--_inset--m) * var(--_scale--m-hover) * 16) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4));

  /****************************/ 

  --_hor--l: 0px;
  --_ver--l: 1.25px;
  --_blur--l: calc(3 * var(--_ver--l));
  --_inset--l: calc(-0.5 * var(--_ver--l));
  --_scale--l: 1.25;
  --_scale--l-hover: calc(2 * var(--_scale--l));

  --box-shadow--l: 
    calc(var(--_hor--l) * var(--_scale--l) * 1) 
    calc(var(--_ver--l) * var(--_scale--l) * 1) 
    calc(var(--_blur--l) * var(--_scale--l) * 1) 
    calc(var(--_inset--l) * var(--_scale--l) * 1) 
    rgba(0,0,0,calc(var(--_rgb))),

    calc(var(--_hor--l) * var(--_scale--l) * 2) 
    calc(var(--_ver--l) * var(--_scale--l) * 2) 
    calc(var(--_blur--l) * var(--_scale--l) * 2) 
    calc(var(--_inset--l) * var(--_scale--l) * 2) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)),

    calc(var(--_hor--l) * var(--_scale--l) * 4) 
    calc(var(--_ver--l) * var(--_scale--l) * 4) 
    calc(var(--_blur--l) * var(--_scale--l) * 4) 
    calc(var(--_inset--l) * var(--_scale--l) * 4) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)),

    calc(var(--_hor--l) * var(--_scale--l) * 8) 
    calc(var(--_ver--l) * var(--_scale--l) * 8) 
    calc(var(--_blur--l) * var(--_scale--l) * 8) 
    calc(var(--_inset--l) * var(--_scale--l) * 8) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)),

    calc(var(--_hor--l) * var(--_scale--l) * 16) 
    calc(var(--_ver--l) * var(--_scale--l) * 16) 
    calc(var(--_blur--l) * var(--_scale--l) * 16) 
    calc(var(--_inset--l) * var(--_scale--l) * 16) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4));

  /****************************/ 

  --box-shadow--l-hover: 
    calc(var(--_hor--l) * var(--_scale--l-hover) * 1) 
    calc(var(--_ver--l) * var(--_scale--l-hover) * 1) 
    calc(var(--_blur--l) * var(--_scale--l-hover) * 1) 
    calc(var(--_inset--l) * var(--_scale--l-hover) * 1) 
    rgba(0,0,0,calc(var(--_rgb))),

    calc(var(--_hor--l) * var(--_scale--l-hover) * 2) 
    calc(var(--_ver--l) * var(--_scale--l-hover) * 2) 
    calc(var(--_blur--l) * var(--_scale--l-hover) * 2) 
    calc(var(--_inset--l) * var(--_scale--l-hover) * 2) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)),

    calc(var(--_hor--l) * var(--_scale--l-hover) * 4) 
    calc(var(--_ver--l) * var(--_scale--l-hover) * 4) 
    calc(var(--_blur--l) * var(--_scale--l-hover) * 4) 
    calc(var(--_inset--l) * var(--_scale--l-hover) * 4) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)),

    calc(var(--_hor--l) * var(--_scale--l-hover) * 8) 
    calc(var(--_ver--l) * var(--_scale--l-hover) * 8) 
    calc(var(--_blur--l) * var(--_scale--l-hover) * 8) 
    calc(var(--_inset--l) * var(--_scale--l-hover) * 8) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)),

    calc(var(--_hor--l) * var(--_scale--l-hover) * 16) 
    calc(var(--_ver--l) * var(--_scale--l-hover) * 16) 
    calc(var(--_blur--l) * var(--_scale--l-hover) * 16) 
    calc(var(--_inset--l) * var(--_scale--l-hover) * 16) 
    rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4));


  /*****************************
   *
   * 16* - Drop Shadows
   */

  --_ds: 8px;

  --dropshadow--light: 
    drop-shadow(
      calc(var(--_ds) * 0.5) 
      calc(var(--_ds) * 0.75) 
      calc(var(--_ds) * 1.25)
      rgb(0,0,0,0.4));

  --dropshadow--dark:
    drop-shadow(
      calc(var(--_ds) * 0.5) 
      calc(var(--_ds) * 0.75) 
      calc(var(--_ds) * 1.25)
      rgb(0,0,0,0.6));


  /*****************************
   *
   * 17* - Colors Primary
   *
   * @link https://noeldelgado.github.io/shadowlord/#66cccc
   * @link https://oklch.com/
   *
   */

  --opacity: 1;

  --_primary--h: 185;
  --_primary--s: 50%;
  --_primary--l: 60%;

  /****************************/

  --_hsl-primary--light: 
    var(--_primary--h) 
    var(--_primary--s) 
    calc(var(--_primary--l) + 10%);
  --primary--light: hsl(var(--_hsl-primary--light));

  --_hsl-primary--base: 
    var(--_primary--h) 
    var(--_primary--s)
    var(--_primary--l);
  --primary--base: hsl(var(--_hsl-primary--base));

  --_hsl-primary--dark: 
    var(--_primary--h) 
    var(--_primary--s) 
    calc(var(--_primary--l) - 15%);
  --primary--dark: hsl(var(--_hsl-primary--dark));

  /****************************/

  --_primary-light--s: 40%;
  --_primary-light--l: 95%;
  --_primary-light--inc: 6%;

  --_hsl-primary-light--1: 
    var(--_primary--h)
    var(--_primary-light--s)
    var(--_primary-light--l);
  --primary-light--1: hsl(var(--_hsl-primary-light--1));

  --_hsl-primary-light--2:
    var(--_primary--h)
    var(--_primary-light--s)
    calc(var(--_primary-light--l) - calc(1 * var(--_primary-light--inc)));
  --primary-light--2: hsl(var(--_hsl-primary-light--2));

  --_hsl-primary-light--3:
    var(--_primary--h) 
    var(--_primary-light--s)
    calc(var(--_primary-light--l) - calc(2 * var(--_primary-light--inc)));
  --primary-light--3: hsl(var(--_hsl-primary-light--3));

  --_hsl-primary-light--4:
    var(--_primary--h)
    var(--_primary-light--s)
    calc(var(--_primary-light--l) - calc(3 * var(--_primary-light--inc)));
  --primary-light--4: hsl(var(--_hsl-primary-light--4));

  --_hsl-primary-light--5:
    var(--_primary--h)
    var(--_primary-light--s)
    calc(var(--_primary-light--l) - calc(4 * var(--_primary-light--inc)));
  --primary-light--5: hsl(var(--_hsl-primary-light--5));

  /****************************/

  --_primary-dark--s: 40%;
  --_primary-dark--l: 10%;
  --_primary-dark--inc: 6%;

  --_hsl-primary-dark--1: 
    var(--_primary--h) 
    var(--_primary-dark--s)
    calc(var(--_primary-dark--l) + calc(4 * var(--_primary-dark--inc)));
  --primary-dark--1: hsl(var(--_hsl-primary-dark--1));

  --_hsl-primary-dark--2: 
    var(--_primary--h) 
    var(--_primary-dark--s)
    calc(var(--_primary-dark--l) + calc(3 * var(--_primary-dark--inc)));
  --primary-dark--2: hsl(var(--_hsl-primary-dark--2));

  --_hsl-primary-dark--3: 
    var(--_primary--h) 
    var(--_primary-dark--s)
    calc(var(--_primary-dark--l) + calc(2 * var(--_primary-dark--inc)));
  --primary-dark--3: hsl(var(--_hsl-primary-dark--3));

  --_hsl-primary-dark--4: 
    var(--_primary--h) 
    var(--_primary-dark--s)
    calc(var(--_primary-dark--l) + calc(1 * var(--_primary-dark--inc)));
  --primary-dark--4: hsl(var(--_hsl-primary-dark--4));

  --_hsl-primary-dark--5: 
    var(--_primary--h) 
    var(--_primary-dark--s)
    var(--_primary-dark--l);
  --primary-dark--5: hsl(var(--_hsl-primary-dark--5));

  /****************************/

  --primary-base--10: hsl(var(--_hsl-primary--base) / 0.1);
  --primary-base--20: hsl(var(--_hsl-primary--base) / 0.2);
  --primary-base--30: hsl(var(--_hsl-primary--base) / 0.3);
  --primary-base--40: hsl(var(--_hsl-primary--base) / 0.4);
  --primary-base--50: hsl(var(--_hsl-primary--base) / 0.5);
  --primary-base--60: hsl(var(--_hsl-primary--base) / 0.6);
  --primary-base--70: hsl(var(--_hsl-primary--base) / 0.7);
  --primary-base--80: hsl(var(--_hsl-primary--base) / 0.8);
  --primary-base--90: hsl(var(--_hsl-primary--base) / 0.9);


  /*****************************
   *
   * 18* - Colors Accent - is the same as Primary -> change it as needed.
   */

  --_accent--h: calc(var(--_primary--h) - 150);
  --_accent--s: 95%;
  --_accent--l: 70%;

  /****************************/

  --_hsl-accent--light: 
    var(--_accent--h) 
    var(--_accent--s) 
    calc(var(--_accent--l) + 10%);
  --accent--light: hsl(var(--_hsl-accent--light));

  --_hsl-accent--base: 
    var(--_accent--h) 
    var(--_accent--s)
    var(--_accent--l);
  --accent--base: hsl(var(--_hsl-accent--base));

  --_hsl-accent--dark: 
    var(--_accent--h) 
    var(--_accent--s) 
    calc(var(--_accent--l) - 15%);
  --accent--dark: hsl(var(--_hsl-accent--dark));

  /****************************/

  --_accent-light--s: 40%;
  --_accent-light--l: 95%;
  --_accent-light--inc: 6%;

--_hsl-accent-light--1: 
    var(--_accent--h)
    var(--_accent-light--s)
    var(--_accent-light--l);
  --accent-light--1: hsl(var(--_hsl-accent-light--1));

  --_hsl-accent-light--2:
    var(--_accent--h)
    var(--_accent-light--s)
    calc(var(--_accent-light--l) - calc(1 * var(--_accent-light--inc)));
  --accent-light--2: hsl(var(--_hsl-accent-light--2));

  --_hsl-accent-light--3:
    var(--_accent--h)
    var(--_accent-light--s)
    calc(var(--_accent-light--l) - calc(2 * var(--_accent-light--inc)));
  --accent-light--3: hsl(var(--_hsl-accent-light--3));

  --_hsl-accent-light--4:
    var(--_accent--h)
    var(--_accent-light--s)
    calc(var(--_accent-light--l) - calc(3 * var(--_accent-light--inc)));
  --accent-light--4: hsl(var(--_hsl-accent-light--4));

  --_hsl-accent-light--5:
    var(--_accent--h)
    var(--_accent-light--s)
    calc(var(--_accent-light--l) - calc(4 * var(--_accent-light--inc)));
  --accent-light--5: hsl(var(--_hsl-accent-light--5));

  /****************************/

  --_accent-dark--s: 40%;
  --_accent-dark--l: 10%;
  --_accent-dark--inc: 6%;

  --_hsl-accent-dark--1: 
    var(--_accent--h) 
    var(--_accent-dark--s)
    calc(var(--_accent-dark--l) + calc(4 * var(--_accent-dark--inc)));
  --accent-dark--1: hsl(var(--_hsl-accent-dark--1));

  --_hsl-accent-dark--2: 
    var(--_accent--h) 
    var(--_accent-dark--s)
    calc(var(--_accent-dark--l) + calc(3 * var(--_accent-dark--inc)));
  --accent-dark--2: hsl(var(--_hsl-accent-dark--2));

  --_hsl-accent-dark--3: 
    var(--_accent--h) 
    var(--_accent-dark--s)
    calc(var(--_accent-dark--l) + calc(2 * var(--_accent-dark--inc)));
  --accent-dark--3: hsl(var(--_hsl-accent-dark--3));

  --_hsl-accent-dark--4: 
    var(--_accent--h) 
    var(--_accent-dark--s)
    calc(var(--_accent-dark--l) + calc(1 * var(--_accent-dark--inc)));
  --accent-dark--4: hsl(var(--_hsl-accent-dark--4));

  --_hsl-accent-dark--5: 
    var(--_accent--h) 
    var(--_accent-dark--s)
    var(--_accent-dark--l);
  --accent-dark--5: hsl(var(--_hsl-accent-dark--5));
  

  /*****************************
   *
   * 19* - Colors Background
   */ 

  --_bg-light--h: var(--_primary--h);
  --_bg-light--s: 5%;
  --_bg-light--l: 98%;
  --_bg-light--inc: 4%;

  /****************************/

  --_hsl-bg-light--1: 
    var(--_bg-light--h) 
    var(--_bg-light--s)
    var(--_bg-light--l);
  --bg-light--1: hsl(var(--_hsl-bg-light--1));

  --_hsl-bg-light--2: 
    var(--_bg-light--h) 
    var(--_bg-light--s)
    calc(var(--_bg-light--l) - calc(1 * var(--_bg-light--inc)));
  --bg-light--2: hsl(var(--_hsl-bg-light--2));

  --_hsl-bg-light--3: 
    var(--_bg-light--h) 
    var(--_bg-light--s)
    calc(var(--_bg-light--l) - calc(2 * var(--_bg-light--inc)));
  --bg-light--3: hsl(var(--_hsl-bg-light--3));

  --_hsl-bg-light--4: 
    var(--_bg-light--h) 
    var(--_bg-light--s)
    calc(var(--_bg-light--l) - calc(3 * var(--_bg-light--inc)));
  --bg-light--4: hsl(var(--_hsl-bg-light--4));

  --_hsl-bg-light--5: 
    var(--_bg-light--h) 
    var(--_bg-light--s)
    calc(var(--_bg-light--l) - calc(4 * var(--_bg-light--inc)));
  --bg-light--5: hsl(var(--_hsl-bg-light--5));

  --_hsl-bg-light--border: 
    var(--_bg-light--h) 
    var(--_bg-light--s)
    calc(var(--_bg-light--l) - calc(5 * var(--_bg-light--inc)));
  --bg-light--border: hsl(var(--_hsl-bg-light--border));

  /****************************/

  --_bg-dark--h: var(--_primary--h);
  --_bg-dark--s: 10%;
  --_bg-dark--l: 7%;
  --_bg-dark--inc: 4%;

  --_hsl-bg-dark--1: 
    var(--_bg-dark--h) 
    var(--_bg-dark--s)
    calc(var(--_bg-dark--l) + calc(5 * var(--_bg-dark--inc)));
  --bg-dark--1: hsl(var(--_hsl-bg-dark--1));

  --_hsl-bg-dark--2: 
    var(--_bg-dark--h) 
    var(--_bg-dark--s)
    calc(var(--_bg-dark--l) + calc(4 * var(--_bg-dark--inc)));
  --bg-dark--2: hsl(var(--_hsl-bg-dark--2));

  --_hsl-bg-dark--3: 
    var(--_bg-dark--h) 
    var(--_bg-dark--s)
    calc(var(--_bg-dark--l) + calc(3 * var(--_bg-dark--inc)));
  --bg-dark--3: hsl(var(--_hsl-bg-dark--3));

  --_hsl-bg-dark--4: 
    var(--_bg-dark--h) 
    var(--_bg-dark--s)
    calc(var(--_bg-dark--l) + calc(2 * var(--_bg-dark--inc)));
  --bg-dark--4: hsl(var(--_hsl-bg-dark--4));

  --_hsl-bg-dark--5: 
    var(--_bg-dark--h) 
    var(--_bg-dark--s)
    calc(var(--_bg-dark--l) + calc(1 * var(--_bg-dark--inc)));
  --bg-dark--5: hsl(var(--_hsl-bg-dark--5));

  --_hsl-bg-dark--border: 
    var(--_bg-dark--h) 
    var(--_bg-dark--s)
    var(--_bg-dark--l);
  --bg-dark--border: hsl(var(--_hsl-bg-dark--border));


  /*****************************
   *
   * 20* - Colors Body Light & Body Dark
   */ 
 
  --_body-light--h: var(--_accent--h);
  --_body-light--s: 10%;
  --_body-light--l: 94%;
  --_body-light--inc: 4%;

  /****************************/

  --_hsl-body-light--1: 
    var(--_body-light--h) 
    var(--_body-light--s)
    var(--_body-light--l);
  --body-light--1: hsl(var(--_hsl-body-light--1));

  --_hsl-body-light--2:
    var(--_body-light--h) 
    var(--_body-light--s)
    calc(var(--_body-light--l) - calc(1 * var(--_body-light--inc)));
  --body-light--2: hsl(var(--_hsl-body-light--2));

  --_hsl-body-light--3:
    var(--_body-light--h) 
    var(--_body-light--s)
    calc(var(--_body-light--l) - calc(2 * var(--_body-light--inc)));
  --body-light--3: hsl(var(--_hsl-body-light--3));

  --_hsl-body-light--4:
    var(--_body-light--h) 
    var(--_body-light--s)
    calc(var(--_body-light--l) - calc(3 * var(--_body-light--inc)));
  --body-light--4: hsl(var(--_hsl-body-light--4));

  --_hsl-body-light--5:
    var(--_body-light--h) 
    var(--_body-light--s)
    calc(var(--_body-light--l) - calc(4 * var(--_body-light--inc)));
  --body-light--5: hsl(var(--_hsl-body-light--5));

  /****************************/

  --_body-dark--h: var(--_accent--h);
  --_body-dark--s: 10%;
  --_body-dark--l: 18%;
  --_body-dark--inc: 4%; 

  --_hsl-body-dark--1: 
    var(--_body-dark--h) 
    var(--_body-dark--s)
    calc(var(--_body-dark--l) + calc(4 * var(--_body-dark--inc)));
  --body-dark--1: hsl(var(--_hsl-body-dark--1));

  --_hsl-body-dark--2: 
    var(--_body-dark--h) 
    var(--_body-dark--s)
    calc(var(--_body-dark--l) + calc(3 * var(--_body-dark--inc)));
  --body-dark--2: hsl(var(--_hsl-body-dark--2));

  --_hsl-body-dark--3: 
    var(--_body-dark--h) 
    var(--_body-dark--s)
    calc(var(--_body-dark--l) + calc(2 * var(--_body-dark--inc)));
  --body-dark--3: hsl(var(--_hsl-body-dark--3));

  --_hsl-body-dark--4: 
    var(--_body-dark--h) 
    var(--_body-dark--s)
    calc(var(--_body-dark--l) + calc(1 * var(--_body-dark--inc)));
  --body-dark--4: hsl(var(--_hsl-body-dark--4));

  --_hsl-body-dark--5: 
    var(--_body-dark--h) 
    var(--_body-dark--s)
    var(--_body-dark--l);
  --body-dark--5: hsl(var(--_hsl-body-dark--5));


  /*****************************
   *
   * 21* - Colors Heading Light & Dark
   */ 

  --_heading-light--h: var(--_accent--h);
  --_heading-light--s: 10%;
  --_heading-light--l: 90%;
  --_heading-light--inc: 4%;

  /****************************/

  --_hsl-heading-light--1: 
    var(--_heading-light--h) 
    var(--_heading-light--s)
    var(--_heading-light--l);
  --heading-light--1: hsl(var(--_hsl-heading-light--1));

  --_hsl-heading-light--2:
    var(--_heading-light--h) 
    var(--_heading-light--s)
    calc(var(--_heading-light--l) - calc(1 * var(--_heading-light--inc)));
  --heading-light--2: hsl(var(--_hsl-heading-light--2));

  --_hsl-heading-light--3:
    var(--_heading-light--h) 
    var(--_heading-light--s)
    calc(var(--_heading-light--l) - calc(2 * var(--_heading-light--inc)));
  --heading-light--3: hsl(var(--_hsl-heading-light--3));

  --_hsl-heading-light--4:
    var(--_heading-light--h) 
    var(--_heading-light--s)
    calc(var(--_heading-light--l) - calc(3 * var(--_heading-light--inc)));
  --heading-light--4: hsl(var(--_hsl-heading-light--4));

  --_hsl-heading-light--5:
    var(--_heading-light--h) 
    var(--_heading-light--s)
    calc(var(--_heading-light--l) - calc(4 * var(--_heading-light--inc)));
  --heading-light--5: hsl(var(--_hsl-heading-light--5));

  /****************************/

  --_heading-dark--h: var(--_accent--h);
  --_heading-dark--s: 10%;
  --_heading-dark--l: 15%;
  --_heading-dark--inc: 4%;

  --_hsl-heading-dark--1:
    var(--_heading-dark--h) 
    var(--_heading-dark--s)
    calc(var(--_heading-dark--l) + calc(4 * var(--_heading-dark--inc)));
  --heading-dark--1: hsl(var(--_hsl-heading-dark--1));

  --_hsl-heading-dark--2:
    var(--_heading-dark--h) 
    var(--_heading-dark--s)
    calc(var(--_heading-dark--l) + calc(3 * var(--_heading-dark--inc)));
  --heading-dark--2: hsl(var(--_hsl-heading-dark--2));

  --_hsl-heading-dark--3:
    var(--_heading-dark--h) 
    var(--_heading-dark--s)
    calc(var(--_heading-dark--l) + calc(2 * var(--_heading-dark--inc)));
  --heading-dark--3: hsl(var(--_hsl-heading-dark--3));

  --_hsl-heading-dark--4:
    var(--_heading-dark--h) 
    var(--_heading-dark--s)
    calc(var(--_heading-dark--l) + calc(1 * var(--_heading-dark--inc)));
  --heading-dark--4: hsl(var(--_hsl-heading-dark--4));

  --_hsl-heading-dark--5:
    var(--_heading-dark--h) 
    var(--_heading-dark--s)
    var(--_heading-dark--l);
  --heading-dark--5: hsl(var(--_hsl-heading-dark--5));
  

  /*****************************
   *
   * 22* - Colors Link Light & Dark
   */

  --_link-light--h: var(--_accent--h);
  --_link-light--s: 10%;
  --_link-light--l: 75%;

  --_link-light--h-hover: var(--_accent--h);
  --_link-light--s-hover: 30%;
  --_link-light--l-hover: 70%;

  --link--light: hsl(
    var(--_link-light--h)
    var(--_link-light--s)
    var(--_link-light--l));

  --link--light-hover: hsl(
    var(--_link-light--h-hover)
    var(--_link-light--s-hover)
    var(--_link-light--l-hover));

  /****************************/

  --_link-dark--h: var(--_accent--h);
  --_link-dark--s: 50%;
  --_link-dark--l: 25%;

  --_link-dark--h-hover: var(--_accent--h);
  --_link-dark--s-hover: 60%;
  --_link-dark--l-hover: 20%;

  --link--dark: hsl(
    var(--_link-dark--h)
    var(--_link-dark--s)
    var(--_link-dark--l));

  --link--dark-hover: hsl(
    var(--_link-dark--h-hover)
    var(--_link-dark--s-hover)
    var(--_link-dark--l-hover));


  /*****************************
   *
   * 23* - Colors ERROR Light & Dark
   */ 

  --error--light: hsl(0deg 90% 50%);
  --error--dark: hsl(0deg 90% 25%);

  --success--light: hsl(130deg 70% 50%);
  --success--dark: hsl(130deg 70% 25%);

  --warning--light: hsl(45deg 70% 50%);
  --warning--dark: hsl(45deg 70% 25%);

  --info--light: hsl(210deg 70% 50%);
  --info--dark: hsl(210deg 70% 25%);


  /*****************************
   *
   * 24* - Colors Radial Light & Dark
   */ 

  --radial-primary--light: 
    radial-gradient(
    var(--primary-light--1) 25%,
    var(--primary-light--2));

  --radial-primary--dark:
    radial-gradient(
    var(--primary-dark--2) 25%,
    var(--primary-dark--3));


  --radial-accent--light:
    radial-gradient(
    var(--accent-light--1) 25%,
    var(--accent-light--2));

  --radial-accent--dark: 
    radial-gradient(
    var(--accent-dark--2) 25%,
    var(--accent-dark--3));


  --radial--light: 
    radial-gradient(
    var(--white) 25%,
    var(--bg-light--4));

  --radial--dark: 
    radial-gradient(
    var(--bg-dark--1) 25%,
    var(--black));

  --radial--light-hover: 
    radial-gradient(
    var(--white) 25%,
    var(--bg-light--5));

  --radial--dark-hover: 
    radial-gradient(
    var(--bg-dark--5) 25%,
    var(--black));


  --radial-card--light: 
    radial-gradient(
    var(--bg-light--1) 25%,
    var(--bg-light--3));

  --radial-card--dark: 
    radial-gradient(
    var(--bg-dark--1) 25%,
    var(--bg-dark--3));

  --radial-card--light-hover: 
    radial-gradient(
    var(--bg-light--2) 25%,
    var(--bg-light--4));

  --radial-card--dark-hover: 
    radial-gradient(
    var(--bg-dark--2) 25%,
    var(--bg-dark--4));

  
  /*****************************
   *
   * 25* Colors Light and Dark -  Social Media
   */ 

  --white: #fdfdfd;
  --lightgray: #d3d3d3;
  --darkgray: #555555; 
  --black: #222222;
  
  --brand-facebook: #1877f2;
  --brand-twitter: #1da1f2;
  --brand-youtube: #ff0000;
  --brand-instagram: #c32aa3;
  --brand-pinterest: #bd081c;
  --brand-linkedin: #0a66c2;
  --brand-email: #663399;

}