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

  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* - COLORS SECONDARY
  20* - COLORS TERTIARY
  21* - BACKGROUND LIGHT & DARK COLORS
  22* - BODY LIGHT & DARK COLORS
  23* - HEADING LIGHT & DARK COLORS
  
  24* - LINK LIGHT & DARK COLORS
  25* - ERROR LIGHT & DARK COLORS
  26* - RADIAL LIGHT & DARK COLORS
  27* - SOCIAL MEDIA LIGHT & DARK COLORS

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

:root {
  color-scheme: light dark;

  /*  Variable Prefixes "--"  are for results for Style.css
      Variable Prefixes "--_" are setups and not used in results for Style.css

  /*****************************
    *
    * 01* - Font Families
    */

  --ff-body: "Atkinson", system-ui, sans-serif;
  --ff-italic: "Atkinson Italic", system-ui, sans-serif;

  --ff-heading: "LibreBodoni", Georgia, serif;

  /*****************************
    *
    * 02* - Font Spacing, Font Weight & Miscellaneous
    */

  /*  Defualt Scaling Increments for Fonts and Spaces by 1px  */
  --_inc-9xs: 0.375;
  --_inc-8xs: 0.4375;
  --_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;
  --_inc-8xl: 1.5625;
  --_inc-9xl: 1.625;

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

  --line-height: var(--_line-h);
  --fibonacci: calc(var(--_line-h) * 1em);
  --_ratio: var(--_line-h);

  /*  Default Font Weights  */
  --fw-light: 300;
  --fw-bold: 600;
  --fw-italic: 400;

  --fw-body: 425;
  --fw-heading: 650;
  --fw-button: 650;
  --fw-nav: 375;
  --fw-link: 500;

  /*  Letter Spacing  */
  --letter-body: 0.0125em;
  --letter-heading: 0.0125em;
  --letter-button: 0.025em;
  --letter-nav: 0.0125em;

  /*  Word Spacing  */
  --word-body: 0;
  --word-heading: -0.1em;
  --word-button: 0;
  --word-nav: 0;

  /*  Default Button Padding  */
  --_btn-pad: calc(var(--_inc-m) * 1em);

  --button-padding-block: calc(var(--_btn-pad) * 1);
  --button-padding-inline: calc(var(--_btn-pad) * var(--_ratio));

  /*  Default Underline and Focus  */
  --offset-size: 6px;

  --focus-size: 2px;
  --focus-width: 2px;
  --focus-offset: 2px;

  --text-underline-thickness: 1.5px;
  --text-underline-thickness-hover: 2.5px;
  --text-underline-offset: 0.275em;

  /*  Dealing with Annimations. Support is weak  */
  /* interpolate-size: allow-keywords; */

  /*****************************
    *
    * 03* - Font Heading Sizes
  
    HEADING cqi @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=360&minRatio=1.2711&maxFontSize=21&maxWidth=1368&maxRatio=1.433&steps=h6%2Ch5%2Ch4%2Ch3%2Ch2%2Ch1%2Ctitle&baseStep=h5&prefix=fs-heading&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

    https://www.fluid-type-scale.com/calculate?minFontSize=21&minWidth=1368&minRatio=1.433&maxFontSize=21.5&maxWidth=1919&maxRatio=1.466&steps=h6%2Ch5%2Ch4%2Ch3%2Ch2%2Ch1%2Ctitle&baseStep=h5&prefix=fs-heading&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
  */

  --fs-heading-h6: clamp(0.8851rem, 0.049cqi + 0.874rem, 0.9159rem);
  --fs-heading-h5: clamp(1.125rem, 0.2976cqi + 1.058rem, 1.3125rem);
  --fs-heading-h4: clamp(1.43rem, 0.7156cqi + 1.269rem, 1.8808rem);
  --fs-heading-h3: clamp(1.8177rem, 1.3929cqi + 1.5042rem, 2.6952rem);
  --fs-heading-h2: clamp(2.3104rem, 2.4632cqi + 1.7562rem, 3.8622rem);
  --fs-heading-h1: clamp(2.9368rem, 4.1235cqi + 2.009rem, 5.5346rem);
  --fs-heading-title: clamp(3.7329rem, 6.6637cqi + 2.2336rem, 7.931rem);
}

@media (width > 1368px) {
  :root {
    --fs-heading-h6: clamp(0.9159rem, 0.002vi + 0.9142rem, 0.9166rem);
    --fs-heading-h5: clamp(1.3125rem, 0.0907vi + 1.2349rem, 1.3438rem);
    --fs-heading-h4: clamp(1.8808rem, 0.2588vi + 1.6595rem, 1.9699rem);
    --fs-heading-h3: clamp(2.6952rem, 0.5596vi + 2.2167rem, 2.8879rem);
    --fs-heading-h2: clamp(3.8622rem, 1.0787vi + 2.9399rem, 4.2337rem);
    --fs-heading-h1: clamp(5.5346rem, 1.9515vi + 3.8661rem, 6.2066rem);
    --fs-heading-title: clamp(7.931rem, 3.3912vi + 5.0316rem, 9.0989rem);
  }
}

:root {
  /*****************************
    *
    * 04* - Font Body, Buttons, and Navigtion Sizes
  
    BODY cqi @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=17&minWidth=360&minRatio=1.0618&maxFontSize=21&maxWidth=1368&maxRatio=1.1274&steps=xs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=fs-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

    https://www.fluid-type-scale.com/calculate?minFontSize=21&minWidth=1369&minRatio=1.1274&maxFontSize=22&maxWidth=1919&maxRatio=1.14&steps=xs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=fs-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
  */

  --fs-body-xs: clamp(0.9424rem, 0.1432cqi + 0.9102rem, 1.0326rem);
  --fs-body-s: clamp(1.0007rem, 0.2596cqi + 0.9423rem, 1.1642rem);
  --fs-body-m: clamp(1.0625rem, 0.3968cqi + 0.9732rem, 1.3125rem);
  --fs-body-l: clamp(1.1282rem, 0.558cqi + 1.0026rem, 1.4797rem);
  --fs-body-xl: clamp(1.1979rem, 0.7466cqi + 1.0299rem, 1.6682rem);
  --fs-body-2xl: clamp(1.2719rem, 0.9664cqi + 1.0545rem, 1.8808rem);
  --fs-body-3xl: clamp(1.3505rem, 1.222cqi + 1.0756rem, 2.1204rem);
}

@media (width > 1368px) {
  :root {
    --fs-body-xs: clamp(1.0326rem, 0.0739cqi + 0.9694rem, 1.058rem);
    --fs-body-s: clamp(1.1642rem, 0.1221cqi + 1.0597rem, 1.2061rem);
    --fs-body-m: clamp(1.3125rem, 0.1818cqi + 1.1569rem, 1.375rem);
    --fs-body-l: clamp(1.4797rem, 0.2554cqi + 1.2612rem, 1.5675rem);
    --fs-body-xl: clamp(1.6682rem, 0.3454cqi + 1.3727rem, 1.7869rem);
    --fs-body-2xl: clamp(1.8808rem, 0.4549cqi + 1.4916rem, 2.0371rem);
    --fs-body-3xl: clamp(2.1204rem, 0.5875cqi + 1.6177rem, 2.3223rem);
  }
}

:root {
  --fs-button: var(--fs-body-xs);

  --fs-nav: var(--fs-body-s);

  /*****************************
    *
    * 05* - Space Gap
  
    SPACE GAP @link
    https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=360&minRatio=1.1274&maxFontSize=40&maxWidth=1368&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(12.3799px, 0.7041cqi + 9.845px, 19.4777px);
  --gap-2xs: clamp(13.9571px, 0.9285cqi + 10.6144px, 23.3168px);
  --gap-xs: clamp(15.7353px, 1.2081cqi + 11.3862px, 27.9125px);
  --gap-s: clamp(17.7399px, 1.555cqi + 12.142px, 33.4141px);
  --gap-m: clamp(20px, 1.9841cqi + 12.8571px, 40px);
  --gap-l: clamp(22.548px, 2.5135cqi + 13.4994px, 47.884px);
  --gap-xl: clamp(25.4206px, 3.1648cqi + 14.0273px, 57.3219px);
  --gap-2xl: clamp(28.6592px, 3.9644cqi + 14.3875px, 68.6201px);
  --gap-3xl: clamp(32.3104px, 4.9439cqi + 14.5123px, 82.1451px);

  /*****************************
    *
    * 06* - Space Card
  
    SPACE CARD @link
    https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=360&minRatio=1.1274&maxFontSize=24&maxWidth=1368&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.1769cqi + 9.2673px, 11.6866px);
  --card-2xs: clamp(11.1657px, 0.2802cqi + 10.157px, 13.9901px);
  --card-xs: clamp(12.5882px, 0.4126cqi + 11.1027px, 16.7475px);
  --card-s: clamp(14.1919px, 0.581cqi + 12.1003px, 20.0485px);
  --card-m: clamp(16px, 0.7937cqi + 13.1429px, 24px);
  --card-l: clamp(18.0384px, 1.0607cqi + 14.2198px, 28.7304px);
  --card-xl: clamp(20.3365px, 1.3945cqi + 15.3163px, 34.3932px);
  --card-2xl: clamp(22.9274px, 1.81cqi + 16.4114px, 41.1721px);
  --card-3xl: clamp(25.8483px, 2.3253cqi + 17.4773px, 49.2871px);

  /*****************************
    *
    * 07* - Space Content
  
    SPACE CONTENT @link
    https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=360&minRatio=1.1274&maxFontSize=16&maxWidth=1368&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.1168cqi + 4.5315px, 6.1292px);
  --content-2xs: clamp(5.5828px, 0.219cqi + 4.7943px, 7.7908px);
  --content-xs: clamp(6.2941px, 0.358cqi + 5.0053px, 9.9029px);
  --content-s: clamp(7.096px, 0.5448cqi + 5.1347px, 12.5875px);
  --content-m: clamp(8px, 0.7937cqi + 5.1429px, 16px);
  --content-l: clamp(9.0192px, 1.1229cqi + 4.9769px, 20.3376px);
  --content-xl: clamp(10.1682px, 1.5558cqi + 4.5672px, 25.8511px);
  --content-2xl: clamp(11.4637px, 2.1226cqi + 3.8224px, 32.8594px);
  --content-3xl: clamp(12.9242px, 2.8614cqi + 2.6229px, 41.7675px);

  /*****************************
    *
    * 08* - Space Container
  
    SPACE CONTAINER @link
    https://www.fluid-type-scale.com/calculate?minFontSize=24&minWidth=360&minRatio=1.1274&maxFontSize=48&maxWidth=1368&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.3504cqi + 13.5946px, 18.3875px);
  --container-2xs: clamp(16.7485px, 0.6571cqi + 14.3829px, 23.3723px);
  --container-xs: clamp(18.8823px, 1.074cqi + 15.0158px, 29.7086px);
  --container-s: clamp(21.2879px, 1.6344cqi + 15.4041px, 37.7626px);
  --container-m: clamp(24px, 2.381cqi + 15.4286px, 48px);
  --container-l: clamp(27.0576px, 3.3686cqi + 14.9307px, 61.0128px);
  --container-xl: clamp(30.5047px, 4.6675cqi + 13.7017px, 77.5534px);
  --container-2xl: clamp(34.391px, 6.3678cqi + 11.4671px, 98.5781px);
  --container-3xl: clamp(38.7725px, 8.5843cqi + 7.8688px, 125.3026px);

  /*****************************
    *
    * 09* - Space Card Width - fit for image sizes with GRID cards
  
    https://www.fluid-type-scale.com/calculate?minFontSize=180&minWidth=360&minRatio=1.2&maxFontSize=220&maxWidth=1368&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.9683cqi + 165.7143px, 220px);

  /*****************************
    *
    * 10* - Space Block
  
    SPACE BLOCK @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=36&minWidth=360&minRatio=1.1971&maxFontSize=120&maxWidth=1368&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, 2.8213cqi + 7.3733px, 45.9687px);
  --block-2xs: clamp(20.9851px, 3.7149cqi + 7.6116px, 58.4308px);
  --block-xs: clamp(25.1213px, 4.876cqi + 7.5676px, 74.2714px);
  --block-s: clamp(30.0727px, 6.3823cqi + 7.0963px, 94.4064px);
  --block-m: clamp(36px, 8.3333cqi + 6px, 120px);
  --block-l: clamp(43.0956px, 10.8568cqi + 4.0112px, 152.532px);
  --block-xl: clamp(51.5897px, 14.1164cqi + 0.7706px, 193.8834px);
  --block-2xl: clamp(61.7581px, 18.3221cqi + -4.2016px, 246.4452px);
  --block-3xl: clamp(73.9306px, 23.7427cqi + -11.5429px, 313.2565px);

  /*****************************
    *
    * 11* - Space Inline / Gutter
  
    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=_gutter&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
    */

  --_gutter-inline: clamp(24px, 3.3333cqi + 12px, 60px);

  --gutter: var(--_gutter-inline);

  /*****************************
    *
    * 12* - Header Footer Height
  
    SPACE HEADER  @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=360&minRatio=1.1971&maxFontSize=20&maxWidth=1368&maxRatio=1.433&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=header&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
  */

  --header-3xs: clamp(3.8955px, 0.0841cqi + 3.5929px, 4.7429px);
  --header-2xs: clamp(4.6634px, 0.2116cqi + 3.9015px, 6.7966px);
  --header-xs: clamp(5.5825px, 0.4124cqi + 4.0979px, 9.7395px);
  --header-s: clamp(6.6828px, 0.7216cqi + 4.085px, 13.9567px);
  --header-m: clamp(8px, 1.1905cqi + 3.7143px, 20px);
  --header-l: clamp(9.5768px, 1.8932cqi + 2.7614px, 28.66px);
  --header-xl: clamp(11.4644px, 2.937cqi + 0.891px, 41.0698px);
  --header-2xl: clamp(13.724px, 4.4771cqi + -2.3935px, 58.853px);
  --header-3xl: clamp(16.429px, 6.7368cqi + -7.8236px, 84.3363px);

  /* SPACE FOOTER  @link 
    https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=360&minRatio=1.1971&maxFontSize=20&maxWidth=1368&maxRatio=1.433&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=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
  */

  --footer-3xs: clamp(3.8955px, 0.0841cqi + 3.5929px, 4.7429px);
  --footer-2xs: clamp(4.6634px, 0.2116cqi + 3.9015px, 6.7966px);
  --footer-xs: clamp(5.5825px, 0.4124cqi + 4.0979px, 9.7395px);
  --footer-s: clamp(6.6828px, 0.7216cqi + 4.085px, 13.9567px);
  --footer-m: clamp(8px, 1.1905cqi + 3.7143px, 20px);
  --footer-l: clamp(9.5768px, 1.8932cqi + 2.7614px, 28.66px);
  --footer-xl: clamp(11.4644px, 2.937cqi + 0.891px, 41.0698px);
  --footer-2xl: clamp(13.724px, 4.4771cqi + -2.3935px, 58.853px);
  --footer-3xl: clamp(16.429px, 6.7368cqi + -7.8236px, 84.3363px);

  /*****************************
    *
    * 13* -  Widths
    */

  /*  Default VW Width  */
  --width-site: 2560px;

  /*  Default Container Width  */
  --_inc-container: 144px;
  --_width-container: 1368px;

  --width-ch: 50ch;

  --width-4xs: calc(var(--_width-container) - calc(5 * var(--_inc-container)));
  --width-3xs: calc(var(--_width-container) - calc(4 * var(--_inc-container)));
  --width-2xs: calc(var(--_width-container) - calc(3 * var(--_inc-container)));
  --width-xs: calc(var(--_width-container) - calc(2 * var(--_inc-container)));
  --width-s: calc(var(--_width-container) - var(--_inc-container));
  --width-m: var(--_width-container);
  --width-l: calc(var(--_width-container) + var(--_inc-container));
  --width-xl: calc(var(--_width-container) + calc(2 * var(--_inc-container)));
  --width-2xl: calc(var(--_width-container) + calc(3 * var(--_inc-container)));

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

  --radius-xs: 3px;
  --radius-s: calc(var(--radius-xs) * var(--_ratio));
  --radius-m: calc(var(--radius-s) * var(--_ratio));
  --radius-l: calc(var(--radius-m) * var(--_ratio));
  --radius-xl: calc(var(--radius-l) * var(--_ratio));
  --radius-circle: 999em;

  /*  Inset w box-shadow Styling  */
  --inset-0: 0;
  --inset-s: 1px;
  --inset-m: 1.5px;
  --inset-l: 2px;
  --inset-xl: 2.5px;
  --inset-2xl: 3px;
  --inset-3xl: 3.5px;
  --inset-4xl: 4px;

  /*  Default Border Styling  */
  --border-0: var(--inset-0) solid transparent;
  --border-s: var(--inset-s) solid transparent;
  --border-m: var(--inset-m) solid transparent;
  --border-l: var(--inset-l) solid transparent;
  --border-xl: var(--inset-xl) solid transparent;
  --border-2xl: var(--inset-2xl) solid transparent;
  --border-3xl: var(--inset-3xl) solid transparent;
  --border-4xl: var(--inset-4xl) solid transparent;

  /*****************************
    *
    * 15* - Transitionss
    * @link https://easingwizard.com
    */

  --_curve: ease-in-out;

  --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/
    */

  --box-shadow-s: 0px 4px 12px -2px rgb(0 0 0 / 10%);
  --box-shadow-s-hover: 0px 5px 16px -2.5px rgb(0 0 0 / 20%);

  --box-shadow-m: 0px 6px 18px -3px rgb(0 0 0 / 13%);
  --box-shadow-m-hover: 0px 7px 24px -3.5px rgb(0 0 0 / 26%);

  --box-shadow-l: 0px 8px 24px -4px rgb(0 0 0 / 18%);
  --box-shadow-l-hover: 0px 9px 32px -4.5px rgb(0 0 0 / 36%);

  /*****************************
   *
   * 16* - Drop Shadows - use Filter property
   */

  --_dsh: 8px;

  --dropshadow-light: drop-shadow(
    calc(var(--_dsh) * 0.5) calc(var(--_dsh) * 0.75) calc(var(--_dsh) * 1.25)
      rgb(0 0 0 / 30%)
  );
  --dropshadow-dark: drop-shadow(
    calc(var(--_dsh) * 0.5) calc(var(--_dsh) * 0.75) calc(var(--_dsh) * 1.25)
      rgb(0 0 0 / 70%)
  );

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

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

  /*  Primary HSL setup  */
  --_ph: 220;
  --_ps: 95%;
  --_pl: 50%;
  --_pl-inc: 3%;
  --_pd-inc: 5%;

  /*  Primary HSL color setup  */
  --_p-01: hsl(var(--_ph) var(--_ps) calc(98% - var(--_pl-inc)));
  --_p-02: hsl(var(--_ph) var(--_ps) calc(93% - var(--_pl-inc)));
  --_p-03: hsl(var(--_ph) var(--_ps) calc(84% - var(--_pl-inc)));
  --_p-04: hsl(var(--_ph) var(--_ps) calc(78% - var(--_pl-inc)));

  --_p-05-l: hsl(var(--_ph) var(--_ps) calc(var(--_pl) + 15%));
  --_p-05: hsl(var(--_ph) var(--_ps) var(--_pl));
  --_p-05-d: hsl(var(--_ph) var(--_ps) calc(var(--_pl) - 15%));

  --_p-06: hsl(var(--_ph) var(--_ps) calc(22% + var(--_pd-inc)));
  --_p-07: hsl(var(--_ph) var(--_ps) calc(16% + var(--_pd-inc)));
  --_p-08: hsl(var(--_ph) var(--_ps) calc(07% + var(--_pd-inc)));
  --_p-09: hsl(var(--_ph) var(--_ps) calc(02% + var(--_pd-inc)));

  /* --pri-hsl-light: hsl(220, 95%, 81%);
  --pri-hsl: hsl(220, 95%, 50%);
  --pri-hsl-dark: hsl(220, 95%, 21%); */

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

  /*  Primary OKLCH color results  */
  --_p: calc(c + 0.05);
  --_p5: calc(c + 0.1);

  --primary-1: oklch(from var(--_p-01) l var(--_p) h);
  --primary-2: oklch(from var(--_p-02) l var(--_p) h);
  --primary-3: oklch(from var(--_p-03) l var(--_p) h);
  --primary-4: oklch(from var(--_p-04) l var(--_p) h);

  --primary-5-l: oklch(from var(--_p-05-l) l var(--_p5) h);
  --primary-5: oklch(from var(--_p-05) l var(--_p5) h);
  --primary-5-d: oklch(from var(--_p-05-d) l var(--_p5) h);

  --primary-6: oklch(from var(--_p-06) l var(--_p) h);
  --primary-7: oklch(from var(--_p-07) l var(--_p) h);
  --primary-8: oklch(from var(--_p-08) l var(--_p) h);
  --primary-9: oklch(from var(--_p-09) l var(--_p) h);

  /* --pri-oklch-light: oklch(0.8051 0.0937 263.83);
  --pri-oklch: oklch(0.5313 0.2494 262.53);
  --pri-oklch-dark: oklch(0.2921 0.1248 261.76); */

  /*  Primary OKLCH with Opacity - Works with Light Dark mode  */
  --primary-95: oklch(from var(--_p-05) l var(--_p) h / 95%);
  --primary-90: oklch(from var(--_p-05) l var(--_p) h / 90%);
  --primary-80: oklch(from var(--_p-05) l var(--_p) h / 80%);
  --primary-70: oklch(from var(--_p-05) l var(--_p) h / 70%);
  --primary-60: oklch(from var(--_p-05) l var(--_p) h / 60%);
  --primary-50: oklch(from var(--_p-05) l var(--_p) h / 50%);
  --primary-40: oklch(from var(--_p-05) l var(--_p) h / 40%);
  --primary-30: oklch(from var(--_p-05) l var(--_p) h / 30%);
  --primary-20: oklch(from var(--_p-05) l var(--_p) h / 20%);
  --primary-10: oklch(from var(--_p-05) l var(--_p) h / 10%);
  --primary-05: oklch(from var(--_p-05) l var(--_p) h / 05%);

  --primary-hover: light-dark(var(--primary-5-d), var(--primary-5-l));

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

  /*  Primary Light Dark color results  */
  --ld-primary-1: light-dark(var(--primary-1), var(--primary-6));
  --ld-primary-2: light-dark(var(--primary-2), var(--primary-7));
  --ld-primary-3: light-dark(var(--primary-3), var(--primary-8));
  --ld-primary-4: light-dark(var(--primary-4), var(--primary-9));

  --ld-primary-5-l: light-dark(var(--primary-5-l), var(--primary-5-d));
  --ld-primary-5: light-dark(var(--primary-5), var(--primary-5));
  --dl-primary-5: light-dark(var(--primary-5), var(--primary-5));
  --dl-primary-5-d: light-dark(var(--primary-5-d), var(--primary-5-l));

  --dl-primary-6: light-dark(var(--primary-6), var(--primary-1));
  --dl-primary-7: light-dark(var(--primary-7), var(--primary-2));
  --dl-primary-8: light-dark(var(--primary-8), var(--primary-3));
  --dl-primary-9: light-dark(var(--primary-9), var(--primary-4));

  /*****************************
   *
   * 18* - Colors Accent
   *
   * @link https://noeldelgado.github.io/shadowlord/#66cccc
   * @link https://oklch.com/
   * @link https://lik.ai/tools/color-convertor/
   *
   */

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

  /*  Accent HSL setup  */
  --_ah: calc(var(--_ph) - 170);
  --_as: 85%;
  --_al: 60%;
  --_al-inc: 2%;
  --_ad-inc: 4%;

  /*  Accent HSL color setup  */
  --_a-01: hsl(var(--_ah) var(--_as) calc(98% - var(--_al-inc)));
  --_a-02: hsl(var(--_ah) var(--_as) calc(93% - var(--_al-inc)));
  --_a-03: hsl(var(--_ah) var(--_as) calc(84% - var(--_al-inc)));
  --_a-04: hsl(var(--_ah) var(--_as) calc(78% - var(--_al-inc)));

  --_a-05-l: hsl(var(--_ah) var(--_as) calc(var(--_al) + 15%));
  --_a-05: hsl(var(--_ah) var(--_as) var(--_al));
  --_a-05-d: hsl(var(--_ah) var(--_as) calc(var(--_al) - 15%));

  --_a-06: hsl(var(--_ah) var(--_as) calc(22% + var(--_ad-inc)));
  --_a-07: hsl(var(--_ah) var(--_as) calc(16% + var(--_ad-inc)));
  --_a-08: hsl(var(--_ah) var(--_as) calc(07% + var(--_ad-inc)));
  --_a-09: hsl(var(--_ah) var(--_as) calc(02% + var(--_ad-inc)));

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

  /*  Accent OKLCH color results  */
  --_a: calc(c + 0.05);
  --_a5: calc(c + 0.1);

  --accent-1: oklch(from var(--_a-01) l var(--_a) h);
  --accent-2: oklch(from var(--_a-02) l var(--_a) h);
  --accent-3: oklch(from var(--_a-03) l var(--_a) h);
  --accent-4: oklch(from var(--_a-04) l var(--_a) h);

  --accent-5-l: oklch(from var(--_a-05-l) l var(--_a5) h);
  --accent-5: oklch(from var(--_a-05) l var(--_a5) h);
  --accent-5-d: oklch(from var(--_a-05-d) l var(--_a5) h);

  --accent-6: oklch(from var(--_a-06) l var(--_a) h);
  --accent-7: oklch(from var(--_a-07) l var(--_a) h);
  --accent-8: oklch(from var(--_a-08) l var(--_a) h);
  --accent-9: oklch(from var(--_a-09) l var(--_a) h);

  /*  Accent OKLCH with Opacity - Works with Light Dark mode  */
  --accent-95: oklch(from var(--_a-05) l var(--_a) h / 95%);
  --accent-90: oklch(from var(--_a-05) l var(--_a) h / 90%);
  --accent-80: oklch(from var(--_a-05) l var(--_a) h / 80%);
  --accent-70: oklch(from var(--_a-05) l var(--_a) h / 70%);
  --accent-60: oklch(from var(--_a-05) l var(--_a) h / 60%);
  --accent-50: oklch(from var(--_a-05) l var(--_a) h / 50%);
  --accent-40: oklch(from var(--_a-05) l var(--_a) h / 40%);
  --accent-30: oklch(from var(--_a-05) l var(--_a) h / 30%);
  --accent-20: oklch(from var(--_a-05) l var(--_a) h / 20%);
  --accent-10: oklch(from var(--_a-05) l var(--_a) h / 10%);
  --accent-05: oklch(from var(--_a-05) l var(--_a) h / 05%);

  --accent-hover: light-dark(var(--accent-5-d), var(--accent-5-l));

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

  /*  Accent Light Dark color results  */
  --ld-accent-1: light-dark(var(--accent-1), var(--accent-6));
  --ld-accent-2: light-dark(var(--accent-2), var(--accent-7));
  --ld-accent-3: light-dark(var(--accent-3), var(--accent-8));
  --ld-accent-4: light-dark(var(--accent-4), var(--accent-9));

  --ld-accent-5-l: light-dark(var(--accent-5-l), var(--accent-5-d));
  --ld-accent-5: light-dark(var(--accent-5), var(--accent-5));
  --dl-accent-5: light-dark(var(--accent-5), var(--accent-5));
  --dl-accent-5-d: light-dark(var(--accent-5-d), var(--accent-5-l));

  --dl-accent-6: light-dark(var(--accent-6), var(--accent-1));
  --dl-accent-7: light-dark(var(--accent-7), var(--accent-2));
  --dl-accent-8: light-dark(var(--accent-8), var(--accent-3));
  --dl-accent-9: light-dark(var(--accent-9), var(--accent-4));

  /*****************************
   *
   * 19* - Colors Secondary - is the same as Primary -> change it as needed.
   */

  /*  Secondary HSL setup  */
  --_sh: calc(var(--_ph) - 30);
  --_ss: 85%;
  --_sl: 50%;
  --_sl-inc: 2%;
  --_sd-inc: 3%;

  /*  Secondary HSL color setup  */
  --_s-01: hsl(var(--_sh) var(--_ss) calc(98% - var(--_sl-inc)));
  --_s-02: hsl(var(--_sh) var(--_ss) calc(93% - var(--_sl-inc)));
  --_s-03: hsl(var(--_sh) var(--_ss) calc(84% - var(--_sl-inc)));
  --_s-04: hsl(var(--_sh) var(--_ss) calc(78% - var(--_sl-inc)));

  --_s-05-l: hsl(var(--_sh) var(--_ss) calc(var(--_sl) + 15%));
  --_s-05: hsl(var(--_sh) var(--_ss) var(--_sl));
  --_s-05-d: hsl(var(--_sh) var(--_ss) calc(var(--_sl) - 15%));

  --_s-06: hsl(var(--_sh) var(--_ss) calc(22% + var(--_sd-inc)));
  --_s-07: hsl(var(--_sh) var(--_ss) calc(16% + var(--_sd-inc)));
  --_s-08: hsl(var(--_sh) var(--_ss) calc(07% + var(--_sd-inc)));
  --_s-09: hsl(var(--_sh) var(--_ss) calc(02% + var(--_sd-inc)));

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

  /*  Secondary OKLCH color results  */
  --_s: calc(c + 0.05);
  --_s5: calc(c + 0.09);

  --secondary-1: oklch(from var(--_s-01) l var(--_s) h);
  --secondary-2: oklch(from var(--_s-02) l var(--_s) h);
  --secondary-3: oklch(from var(--_s-03) l var(--_s) h);
  --secondary-4: oklch(from var(--_s-04) l var(--_s) h);

  --secondary-5-l: oklch(from var(--_s-05-l) l var(--_s5) h);
  --secondary-5: oklch(from var(--_s-05) l var(--_s5) h);
  --secondary-5-d: oklch(from var(--_s-05-d) l var(--_s5) h);

  --secondary-6: oklch(from var(--_s-06) l var(--_s) h);
  --secondary-7: oklch(from var(--_s-07) l var(--_s) h);
  --secondary-8: oklch(from var(--_s-08) l var(--_s) h);
  --secondary-9: oklch(from var(--_s-09) l var(--_s) h);

  /*  Secondary OKLCH with Opacity - Works with Light Dark mode  */
  --secondary-95: oklch(from var(--_s-05) l var(--_s) h / 95%);
  --secondary-90: oklch(from var(--_s-05) l var(--_s) h / 90%);
  --secondary-80: oklch(from var(--_s-05) l var(--_s) h / 80%);
  --secondary-70: oklch(from var(--_s-05) l var(--_s) h / 70%);
  --secondary-60: oklch(from var(--_s-05) l var(--_s) h / 60%);
  --secondary-50: oklch(from var(--_s-05) l var(--_s) h / 50%);
  --secondary-40: oklch(from var(--_s-05) l var(--_s) h / 40%);
  --secondary-30: oklch(from var(--_s-05) l var(--_s) h / 30%);
  --secondary-20: oklch(from var(--_s-05) l var(--_s) h / 20%);
  --secondary-10: oklch(from var(--_s-05) l var(--_s) h / 10%);
  --secondary-05: oklch(from var(--_s-05) l var(--_s) h / 05%);

  --secondary-hover: light-dark(var(--secondary-5-d), var(--secondary-5-l));

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

  /*  Secondary Light Dark color results  */
  --ld-secondary-1: light-dark(var(--secondary-1), var(--secondary-6));
  --ld-secondary-2: light-dark(var(--secondary-2), var(--secondary-7));
  --ld-secondary-3: light-dark(var(--secondary-3), var(--secondary-8));
  --ld-secondary-4: light-dark(var(--secondary-4), var(--secondary-9));

  --ld-secondary-5-l: light-dark(var(--secondary-5-l), var(--secondary-5-d));
  --ld-secondary-5: light-dark(var(--secondary-5), var(--secondary-5));
  --dl-secondary-5: light-dark(var(--secondary-5), var(--secondary-5));
  --dl-secondary-5-d: light-dark(var(--secondary-5-d), var(--secondary-5-l));

  --dl-secondary-6: light-dark(var(--secondary-6), var(--secondary-1));
  --dl-secondary-7: light-dark(var(--secondary-7), var(--secondary-2));
  --dl-secondary-8: light-dark(var(--secondary-8), var(--secondary-3));
  --dl-secondary-9: light-dark(var(--secondary-9), var(--secondary-4));

  /*****************************
   *
   * 20* - Colors Tertiary - is the same as Primary -> change it as needed.
   */

  /*  Tertiary HSL setup  */
  --_th: calc(var(--_ph) + 30);
  --_ts: 80%;
  --_tl: 50%;
  --_tl-inc: 7%;
  --_td-inc: 7%;

  /*  Tertiary HSL color setup  */
  --_t-01: hsl(var(--_th) var(--_ts) calc(98% - var(--_tl-inc)));
  --_t-02: hsl(var(--_th) var(--_ts) calc(93% - var(--_tl-inc)));
  --_t-03: hsl(var(--_th) var(--_ts) calc(84% - var(--_tl-inc)));
  --_t-04: hsl(var(--_th) var(--_ts) calc(78% - var(--_tl-inc)));

  --_t-05-l: hsl(var(--_th) var(--_ts) calc(var(--_tl) + 5%));
  --_t-05: hsl(var(--_th) var(--_ts) var(--_tl));
  --_t-05-d: hsl(var(--_th) var(--_ts) calc(var(--_tl) - 20%));

  --_t-06: hsl(var(--_th) var(--_ts) calc(22% + var(--_td-inc)));
  --_t-07: hsl(var(--_th) var(--_ts) calc(16% + var(--_td-inc)));
  --_t-08: hsl(var(--_th) var(--_ts) calc(07% + var(--_td-inc)));
  --_t-09: hsl(var(--_th) var(--_ts) calc(02% + var(--_td-inc)));

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

  /*  Tertiary OKLCH color results  */
  --_t: calc(c + 0.025);
  --_t5: calc(c + 0.05);

  --tertiary-1: oklch(from var(--_t-01) l var(--_t) h);
  --tertiary-2: oklch(from var(--_t-02) l var(--_t) h);
  --tertiary-3: oklch(from var(--_t-03) l var(--_t) h);
  --tertiary-4: oklch(from var(--_t-04) l var(--_t) h);

  --tertiary-5-l: oklch(from var(--_t-05-l) l var(--_t5) h);
  --tertiary-5: oklch(from var(--_t-05) l var(--_t5) h);
  --tertiary-5-d: oklch(from var(--_t-05-d) l var(--_t5) h);

  --tertiary-6: oklch(from var(--_t-06) l var(--_t) h);
  --tertiary-7: oklch(from var(--_t-07) l var(--_t) h);
  --tertiary-8: oklch(from var(--_t-08) l var(--_t) h);
  --tertiary-9: oklch(from var(--_t-09) l var(--_t) h);

  /*  Tertiary OKLCH with Opacity - Works with Light Dark mode  */
  --tertiary-95: oklch(from var(--_t-05) l var(--_t) h / 95%);
  --tertiary-90: oklch(from var(--_t-05) l var(--_t) h / 90%);
  --tertiary-80: oklch(from var(--_t-05) l var(--_t) h / 80%);
  --tertiary-70: oklch(from var(--_t-05) l var(--_t) h / 70%);
  --tertiary-60: oklch(from var(--_t-05) l var(--_t) h / 60%);
  --tertiary-50: oklch(from var(--_t-05) l var(--_t) h / 50%);
  --tertiary-40: oklch(from var(--_t-05) l var(--_t) h / 40%);
  --tertiary-30: oklch(from var(--_t-05) l var(--_t) h / 30%);
  --tertiary-20: oklch(from var(--_t-05) l var(--_t) h / 20%);
  --tertiary-10: oklch(from var(--_t-05) l var(--_t) h / 10%);
  --tertiary-05: oklch(from var(--_t-05) l var(--_t) h / 05%);

  --tertiary-hover: light-dark(var(--tertiary-5-d), var(--tertiary-5-l));

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

  /*  Tertiary Light Dark color results  */
  --ld-tertiary-1: light-dark(var(--tertiary-1), var(--tertiary-6));
  --ld-tertiary-2: light-dark(var(--tertiary-2), var(--tertiary-7));
  --ld-tertiary-3: light-dark(var(--tertiary-3), var(--tertiary-8));
  --ld-tertiary-4: light-dark(var(--tertiary-4), var(--tertiary-9));

  --ld-tertiary-5-l: light-dark(var(--tertiary-5-l), var(--tertiary-5-d));
  --ld-tertiary-5: light-dark(var(--tertiary-5), var(--tertiary-5));
  --dl-tertiary-5: light-dark(var(--tertiary-5), var(--tertiary-5));
  --dl-tertiary-5-d: light-dark(var(--tertiary-5-d), var(--tertiary-5-l));

  --dl-tertiary-6: light-dark(var(--tertiary-6), var(--tertiary-1));
  --dl-tertiary-7: light-dark(var(--tertiary-7), var(--tertiary-2));
  --dl-tertiary-8: light-dark(var(--tertiary-8), var(--tertiary-3));
  --dl-tertiary-9: light-dark(var(--tertiary-9), var(--tertiary-4));

  /*****************************
   *
   * 21* - Colors Background
   */

  /*  Background HSL setup  */
  --_bh: var(--_ph);
  --_bs: 3%;
  --_bl: 50%;
  --_bl-inc: 1%;
  --_bd-inc: 3%;

  /*  Background HSL color setup  */
  --_bg-01: hsl(var(--_bh) var(--_bs) calc(98% - var(--_bl-inc)));
  --_bg-02: hsl(var(--_bh) var(--_bs) calc(95% - var(--_bl-inc)));
  --_bg-03: hsl(var(--_bh) var(--_bs) calc(91% - var(--_bl-inc)));
  --_bg-04: hsl(var(--_bh) var(--_bs) calc(86% - var(--_bl-inc)));

  --_bg-05-l: hsl(var(--_bh) var(--_bs) calc(var(--_bl) + 15%));
  --_bg-05: hsl(var(--_bh) var(--_bs) var(--_bl));
  --_bg-05-d: hsl(var(--_bh) var(--_bs) calc(var(--_bl) - 10%));

  --_bg-06: hsl(var(--_bh) var(--_bs) calc(14% + var(--_bd-inc)));
  --_bg-07: hsl(var(--_bh) var(--_bs) calc(09% + var(--_bd-inc)));
  --_bg-08: hsl(var(--_bh) var(--_bs) calc(05% + var(--_bd-inc)));
  --_bg-09: hsl(var(--_bh) var(--_bs) calc(02% + var(--_bd-inc)));

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

  /*  Background OKLCH color results  */
  --bg-1: oklch(from var(--_bg-01) l c h);
  --bg-2: oklch(from var(--_bg-02) l c h);
  --bg-3: oklch(from var(--_bg-03) l c h);
  --bg-4: oklch(from var(--_bg-04) l c h);

  --bg-5-l: oklch(from var(--_bg-05-l) l c h);
  --bg-5: oklch(from var(--_bg-05) l c h);
  --bg-5-d: oklch(from var(--_bg-05-d) l c h);

  --bg-6: oklch(from var(--_bg-06) l c h);
  --bg-7: oklch(from var(--_bg-07) l c h);
  --bg-8: oklch(from var(--_bg-08) l c h);
  --bg-9: oklch(from var(--_bg-09) l c h);

  /*  Background OKLCH with Opacity - Works with Light Dark mode  */
  --bg-95: oklch(from var(--_bg-05) l c h / 95%);
  --bg-90: oklch(from var(--_bg-05) l c h / 90%);
  --bg-80: oklch(from var(--_bg-05) l c h / 80%);
  --bg-70: oklch(from var(--_bg-05) l c h / 70%);
  --bg-60: oklch(from var(--_bg-05) l c h / 60%);
  --bg-50: oklch(from var(--_bg-05) l c h / 50%);
  --bg-40: oklch(from var(--_bg-05) l c h / 40%);
  --bg-30: oklch(from var(--_bg-05) l c h / 30%);
  --bg-20: oklch(from var(--_bg-05) l c h / 20%);
  --bg-10: oklch(from var(--_bg-05) l c h / 10%);
  --bg-05: oklch(from var(--_bg-05) l c h / 05%);

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

  /*  Background Light Dark color results  */
  --ld-bg-1: light-dark(var(--bg-1), var(--bg-6));
  --ld-bg-2: light-dark(var(--bg-2), var(--bg-7));
  --ld-bg-3: light-dark(var(--bg-3), var(--bg-8));
  --ld-bg-4: light-dark(var(--bg-4), var(--bg-9));

  --ld-bg-5-l: light-dark(var(--bg-5-l), var(--bg-5-d));
  --ld-bg-5: light-dark(var(--bg-5), var(--bg-5));
  --dl-bg-5: light-dark(var(--bg-5), var(--bg-5));
  --dl-bg-5-d: light-dark(var(--bg-5-d), var(--bg-5-l));

  --dl-bg-6: light-dark(var(--bg-6), var(--bg-1));
  --dl-bg-7: light-dark(var(--bg-7), var(--bg-2));
  --dl-bg-8: light-dark(var(--bg-8), var(--bg-3));
  --dl-bg-9: light-dark(var(--bg-9), var(--bg-4));

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

  /*  Body HSL setup  */
  --_dh: var(--_ah);
  --_ds: 15%;
  --_dl: 50%;
  --_dl-inc: 2%;
  --_dd-inc: 6%;

  /*  Body HSL color setup  */
  --_dy-01: hsl(var(--_dh) var(--_ds) calc(98% - var(--_dl-inc)));
  --_dy-02: hsl(var(--_dh) var(--_ds) calc(94% - var(--_dl-inc)));
  --_dy-03: hsl(var(--_dh) var(--_ds) calc(89% - var(--_dl-inc)));
  --_dy-04: hsl(var(--_dh) var(--_ds) calc(83% - var(--_dl-inc)));

  --_dy-05-l: hsl(var(--_dh) var(--_ds) calc(var(--_dl) + 15%));
  --_dy-05: hsl(var(--_dh) var(--_ds) var(--_dl));
  --_dy-05-d: hsl(var(--_dh) var(--_ds) calc(var(--_dl) - 10%));

  --_dy-06: hsl(var(--_dh) var(--_ds) calc(17% + var(--_dd-inc)));
  --_dy-07: hsl(var(--_dh) var(--_ds) calc(11% + var(--_dd-inc)));
  --_dy-08: hsl(var(--_dh) var(--_ds) calc(06% + var(--_dd-inc)));
  --_dy-09: hsl(var(--_dh) var(--_ds) calc(02% + var(--_dd-inc)));

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

  /*  Body OKLCH color results  */
  --body-1: oklch(from var(--_dy-01) l c h);
  --body-2: oklch(from var(--_dy-02) l c h);
  --body-3: oklch(from var(--_dy-03) l c h);
  --body-4: oklch(from var(--_dy-04) l c h);

  --body-5-l: oklch(from var(--_dy-05-l) l c h);
  --body-5: oklch(from var(--_dy-05) l c h);
  --body-5-d: oklch(from var(--_dy-05-d) l c h);

  --body-6: oklch(from var(--_dy-06) l c h);
  --body-7: oklch(from var(--_dy-07) l c h);
  --body-8: oklch(from var(--_dy-08) l c h);
  --body-9: oklch(from var(--_dy-09) l c h);

  /*  Body OKLCH with Opacity - Works with Light Dark mode  */
  --body-95: oklch(from var(--_dy-05) l c h / 95%);
  --body-90: oklch(from var(--_dy-05) l c h / 90%);
  --body-80: oklch(from var(--_dy-05) l c h / 80%);
  --body-70: oklch(from var(--_dy-05) l c h / 70%);
  --body-60: oklch(from var(--_dy-05) l c h / 60%);
  --body-50: oklch(from var(--_dy-05) l c h / 50%);
  --body-40: oklch(from var(--_dy-05) l c h / 40%);
  --body-30: oklch(from var(--_dy-05) l c h / 30%);
  --body-20: oklch(from var(--_dy-05) l c h / 20%);
  --body-10: oklch(from var(--_dy-05) l c h / 10%);
  --body-05: oklch(from var(--_dy-05) l c h / 05%);

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

  /*  Body Light Dark color results  */
  --ld-body-1: light-dark(var(--body-1), var(--body-6));
  --ld-body-2: light-dark(var(--body-2), var(--body-7));
  --ld-body-3: light-dark(var(--body-3), var(--body-8));
  --ld-body-4: light-dark(var(--body-4), var(--body-9));

  --ld-body-5-l: light-dark(var(--body-5-l), var(--body-5-d));
  --ld-body-5: light-dark(var(--body-5), var(--body-5));
  --dl-body-5: light-dark(var(--body-5), var(--body-5));
  --dl-body-5-d: light-dark(var(--body-5-d), var(--body-5-l));

  --dl-body-6: light-dark(var(--body-6), var(--body-1));
  --dl-body-7: light-dark(var(--body-7), var(--body-2));
  --dl-body-8: light-dark(var(--body-8), var(--body-3));
  --dl-body-9: light-dark(var(--body-9), var(--body-4));

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

  /*  Heading HSL setup  */
  --_hh: var(--_ah);
  --_hs: 25%;
  --_hl: 50%;
  --_hl-inc: 3%;
  --_hd-inc: 7%;

  /*  Heading HSL color setup  */
  --_hd-01: hsl(var(--_hh) var(--_hs) calc(98% - var(--_hl-inc)));
  --_hd-02: hsl(var(--_hh) var(--_hs) calc(94% - var(--_hl-inc)));
  --_hd-03: hsl(var(--_hh) var(--_hs) calc(89% - var(--_hl-inc)));
  --_hd-04: hsl(var(--_hh) var(--_hs) calc(83% - var(--_hl-inc)));

  --_hd-05-l: hsl(var(--_hh) var(--_hs) calc(var(--_hl) + 15%));
  --_hd-05: hsl(var(--_hh) var(--_hs) var(--_hl));
  --_hd-05-d: hsl(var(--_hh) var(--_hs) calc(var(--_hl) - 10%));

  --_hd-06: hsl(var(--_hh) var(--_hs) calc(17% + var(--_hd-inc)));
  --_hd-07: hsl(var(--_hh) var(--_hs) calc(11% + var(--_hd-inc)));
  --_hd-08: hsl(var(--_hh) var(--_hs) calc(06% + var(--_hd-inc)));
  --_hd-09: hsl(var(--_hh) var(--_hs) calc(02% + var(--_hd-inc)));

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

  /*  Heading OKLCH color results  */
  --heading-1: oklch(from var(--_hd-01) l c h);
  --heading-2: oklch(from var(--_hd-02) l c h);
  --heading-3: oklch(from var(--_hd-03) l c h);
  --heading-4: oklch(from var(--_hd-04) l c h);

  --heading-5-l: oklch(from var(--_hd-05-l) l c h);
  --heading-5: oklch(from var(--_hd-05) l c h);
  --heading-5-d: oklch(from var(--_hd-05-d) l c h);

  --heading-6: oklch(from var(--_hd-06) l c h);
  --heading-7: oklch(from var(--_hd-07) l c h);
  --heading-8: oklch(from var(--_hd-08) l c h);
  --heading-9: oklch(from var(--_hd-09) l c h);

  /*  Heading OKLCH with Opacity - Works with Light Dark mode  */
  --heading-95: oklch(from var(--_hd-05) l c h / 95%);
  --heading-90: oklch(from var(--_hd-05) l c h / 90%);
  --heading-80: oklch(from var(--_hd-05) l c h / 80%);
  --heading-70: oklch(from var(--_hd-05) l c h / 70%);
  --heading-60: oklch(from var(--_hd-05) l c h / 60%);
  --heading-50: oklch(from var(--_hd-05) l c h / 50%);
  --heading-40: oklch(from var(--_hd-05) l c h / 40%);
  --heading-30: oklch(from var(--_hd-05) l c h / 30%);
  --heading-20: oklch(from var(--_hd-05) l c h / 20%);
  --heading-10: oklch(from var(--_hd-05) l c h / 10%);
  --heading-05: oklch(from var(--_hd-05) l c h / 05%);

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

  /*  Heading Light Dark color results  */
  --ld-heading-1: light-dark(var(--heading-1), var(--heading-6));
  --ld-heading-2: light-dark(var(--heading-2), var(--heading-7));
  --ld-heading-3: light-dark(var(--heading-3), var(--heading-8));
  --ld-heading-4: light-dark(var(--heading-4), var(--heading-9));

  --ld-heading-5-l: light-dark(var(--heading-5-l), var(--heading-5-d));
  --ld-heading-5: light-dark(var(--heading-5), var(--heading-5));
  --dl-heading-5: light-dark(var(--heading-5), var(--heading-5));
  --dl-heading-5-d: light-dark(var(--heading-5-d), var(--heading-5-l));

  --dl-heading-6: light-dark(var(--heading-6), var(--heading-1));
  --dl-heading-7: light-dark(var(--heading-7), var(--heading-2));
  --dl-heading-8: light-dark(var(--heading-8), var(--heading-3));
  --dl-heading-9: light-dark(var(--heading-9), var(--heading-4));

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

  /*  Accent setup  */
  --_link: var(--_ah);

  /*  Accent HSL light color setup  */
  --_link-l: hsl(var(--_link) 10% 75%);
  --_link-l-hover: hsl(var(--_link) 30% 80%);

  /*  Accent OKLCH light color results  */
  --link-l: oklch(from var(--_link-l) l c h);
  --link-l-hover: oklch(from var(--_link-l-hover) l c h);

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

  /*  Accent HSL dark color setup  */
  --_link-d: hsl(var(--_link) 20% 25%);
  --_link-d-hover: hsl(var(--_link) 40% 30%);

  /*  Accent OKLCH dark color results  */
  --link-d: oklch(from var(--_link-d) l c h);
  --link-d-hover: oklch(from var(--_link-d-hover) l c h);

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

  /*  Accent Light Dark color results  */
  --ld-link: light-dark(var(--link-l), var(--link-d));
  --dl-link: light-dark(var(--link-d), var(--link-l));

  --ld-link-hover: light-dark(var(--link-l-hover), var(--link-d-hover));
  --dl-link-hover: light-dark(var(--link-d-hover), var(--link-l-hover));

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

  --_z: calc(c + 0.05);

  /*  Red ERROR HSL color setup  */
  --_error: hsl(0 95% 60%);

  --error-l: oklch(from var(--_error) l var(--_z) h);
  --error-d: oklch(from var(--_error) calc(l - 0.3) var(--_z) h);

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

  /*  Green SUCCESS HSL color setup  */
  --_success: hsl(130 80% 50%);

  /*  Green SUCCESS OKLCH color results  */
  --success-l: oklch(from var(--_success) l var(--_z) h);
  --success-d: oklch(from var(--_success) calc(l - 0.3) var(--_z) h);

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

  /*  ORANGE WARNING HSL color setup  */
  --_warning: hsl(45 85% 50%);

  /*  ORANGE WARNING OKLCH color results  */
  --warning-l: oklch(from var(--_warning) l var(--_z) h);
  --warning-d: oklch(from var(--_warning) calc(l - 0.3) var(--_z) h);

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

  /*  BLUE WARINFONING HSL color setup  */
  --_info: hsl(210 95% 50%);

  /*  ORANGE INFO OKLCH color results  */
  --info-l: oklch(from var(--_info) l var(--_z) h);
  --info-d: oklch(from var(--_info) calc(l - 0.3) var(--_z) h);

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

  /*  Light Dark color results  */
  --ld-error: light-dark(var(--error-l), var(--error-d));
  --ld-success: light-dark(var(--success-l), var(--success-d));
  --ld-warning: light-dark(var(--warning-l), var(--warning-d));
  --ld-info: light-dark(var(--info-l), var(--info-d));

  --dl-error: light-dark(var(--error-d), var(--error-l));
  --dl-success: light-dark(var(--success-d), var(--success-l));
  --dl-warning: light-dark(var(--warning-d), var(--warning-l));
  --dl-info: light-dark(var(--info-d), var(--info-l));

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

  --_percent: 33.3%;

  /*  PRIMARY RADIAL Gradients Light and Dark  */
  --radial-primary-l: radial-gradient(
    var(--primary-1) var(--_percent),
    var(--primary-3)
  );
  --radial-primary-d: radial-gradient(
    var(--primary-6) var(--_percent),
    var(--primary-8)
  );

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

  /*  ACCENT RADIAL Gradients Light and Dark  */
  --radial-accent-l: radial-gradient(
    var(--accent-1) var(--_percent),
    var(--accent-3)
  );
  --radial-accent-d: radial-gradient(
    var(--accent-6) var(--_percent),
    var(--accent-8)
  );

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

  /*  SECONDARY RADIAL Gradients Light and Dark  */
  --radial-secondary-l: radial-gradient(
    var(--secondary-1) var(--_percent),
    var(--secondary-3)
  );
  --radial-secondary-d: radial-gradient(
    var(--secondary-6) var(--_percent),
    var(--secondary-8)
  );

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

  /*  TERTIARY RADIAL Gradients Light and Dark  */
  --radial-tertiary-l: radial-gradient(
    var(--tertiary-1) var(--_percent),
    var(--tertiary-3)
  );
  --radial-tertiary-d: radial-gradient(
    var(--tertiary-6) var(--_percent),
    var(--tertiary-8)
  );

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

  /*  BACKGROUND RADIAL Gradients Light and Dark with HOVER  */
  --radial-l: radial-gradient(var(--white) var(--_percent), var(--bg-4));
  --radial-d: radial-gradient(var(--bg-6) var(--_percent), var(--black));
  --radial-l-hover: radial-gradient(var(--white) var(--_percent), var(--bg-4));
  --radial-d-hover: radial-gradient(var(--bg-6) var(--_percent), var(--black));

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

  /*  CARDS RADIAL Gradients Light and Dark with HOVER  */
  --radial-card-l: radial-gradient(var(--bg-1) var(--_percent), var(--bg-4));
  --radial-card-d: radial-gradient(var(--bg-6) var(--_percent), var(--bg-9));

  --radial-card-l-hover: radial-gradient(
    var(--bg-1) var(--_percent),
    var(--bg-4)
  );
  --radial-card-d-hover: radial-gradient(
    var(--bg-6) var(--_percent),
    var(--bg-9)
  );

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

  /*  STANDARD HEX Colors to HTML Colors  */
  --white: #fdfdfd;
  --lightgray: #d3d3d3;
  --darkgray: #555555;
  --black: #111111;

  /*  SOCIAL MEDIA Colors  */
  --brand-facebook: #1877f2;
  --brand-twitter: #1da1f2;
  --brand-youtube: #ff0000;
  --brand-instagram: #c32aa3;
  --brand-pinterest: #bd081c;
  --brand-linkedin: #0a66c2;
  --brand-email: #663399;
}