:root {
  /* Core JSON */
  --zoom: 1;
  --meshSVGfill: rgb(0,102,239);
  /* FIXED */
  --overlay-opacity: .35;
  --body-bg: var(--white);
  /* Opacity */
  --quiet: 68%;
  --disabled: 38%;
  --hover: 50%;
 /* Radius */
  --radius-0: 0px;
  --radius-2: calc(var(--radius-1) * 2);
  --radius-3: calc(var(--radius-1) * 3);
  --radius-4: calc(var(--radius-1) * 4);
  --radius-5: calc(var(--radius-1) * 5);
  --radius-6: calc(var(--radius-1) * 6);
  --radius-7: calc(var(--radius-1) * 7);
  --radius-8: calc(var(--radius-1) * 8);
  --radius-9: calc(var(--radius-1) * 9);
  --radius-10: calc(var(--radius-1) * 10);
  --radius-quarter: calc(var(--radius-1) / 4);
  --radius-half: calc(var(--radius-1) / 2);
  /* Spacing */
  --spacing-0: 0px;
  --spacing-2: calc(var(--spacing-1) * 2);
  --spacing-3: calc(var(--spacing-1) * 3);
  --spacing-4: calc(var(--spacing-1) * 4);
  --spacing-5: calc(var(--spacing-1) * 5);
  --spacing-6: calc(var(--spacing-1) * 6);
  --spacing-7: calc(var(--spacing-1) * 7);
  --spacing-8: calc(var(--spacing-1) * 8);
  --spacing-9: calc(var(--spacing-1) * 9);
  --spacing-10: calc(var(--spacing-1) * 10);
  --spacing-quarter: calc(var(--spacing-1) / 4);
  --spacing-half: calc(var(--spacing-1) / 2);
  --negative-size-half: calc(0 - var(--spacing-1) / 2);
  /* Borders */
  --border-opacity: 15%;
  --border-0: 0px;
  --border-2: calc(var(--border-1) * 2);
  --border-3: calc(var(--border-1) * 3);
  --border-4: calc(var(--border-1) * 4);
  /* elevation settings */
  --change-1: calc(1 + calc(var(--elevation-change) * 1));
  --change-2: calc(1 + calc(var(--elevation-change) * 2));
  --change-3: calc(1 + calc(var(--elevation-change) * 3));
  --change-4: calc(1 + calc(var(--elevation-change) * 4));
  --change-5: calc(1 + calc(var(--elevation-change) * 5));
  --change-6: calc(1 + calc(var(--elevation-change) * 6));
  --change-7: calc(1 + calc(var(--elevation-change) * 7));
  --change-8: calc(1 + calc(var(--elevation-change) * 8));
  --change-9: calc(1 + calc(var(--elevation-change) * 9));
  /* elevation */
  --elevation-1: calc(var(--elevation-horizontal) * var(--change-1)) calc(var(--elevation-vertical) * var(--change-1)) calc(var(--elevation-blur) * var(--change-1)) calc(var(--elevation-spread) * var(--change-1)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-1)) ),
   0 0 calc(var(--base-elevation-blur) * var(--change-1)) calc(var(--base-elevation-spread) * var(--change-1)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-1)));
  --elevation-2: calc(var(--elevation-horizontal) * var(--change-2)) calc(var(--elevation-vertical)* var(--change-2)) calc(var(--elevation-blur) * var(--change-2)) calc(var(--elevation-spread) * var(--change-2)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-2)) ),
   0 0 calc(var(--base-elevation-blur) * var(--change-2)) calc(var(--base-elevation-spread) * var(--change-2)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-2)));
  --elevation-3: calc(var(--elevation-horizontal) * var(--change-3)) calc(var(--elevation-vertical)* var(--change-3)) calc(var(--elevation-blur) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-3)) ),
   0 0 calc(var(--base-elevation-blur) * var(--change-3)) calc(var(--base-elevation-spread) * var(--change-3)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-3)));
  --elevation-4: calc(var(--elevation-horizontal) * var(--change-4)) calc(var(--elevation-vertical)* var(--change-4)) calc(var(--elevation-blur) * var(--change-4)) calc(var(--elevation-spread) * var(--change-4)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-4)) ),
   0 0 calc(var(--base-elevation-blur) * var(--change-4)) calc(var(--base-elevation-spread) * var(--change-4)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-4)));
  --elevation-5: calc(var(--elevation-horizontal) * var(--change-5)) calc(var(--elevation-vertical)* var(--change-5)) calc(var(--elevation-blur) * var(--change-5)) calc(var(--elevation-spread) * var(--change-5)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-5)) ),
   0 0 calc(var(--base-elevation-blur) * var(--change-5)) calc(var(--base-elevation-spread) * var(--change-5)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-5)));
  --elevation-6: calc(var(--elevation-horizontal) * var(--change-6)) calc(var(--elevation-vertical)* var(--change-6)) calc(var(--elevation-blur) * var(--change-6)) calc(var(--elevation-spread) * var(--change-6)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-6)) ),
   0 0 calc(var(--base-elevation-blur) * var(--change-6)) calc(var(--base-elevation-spread) * var(--change-6)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-6)));
  --elevation-7: calc(var(--elevation-horizontal) * var(--change-7)) calc(var(--elevation-vertical)* var(--change-7)) calc(var(--elevation-blur) * var(--change-7)) calc(var(--elevation-spread) * var(--change-7)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-7)) ),
   0 0 calc(var(--base-elevation-blur) * var(--change-7)) calc(var(--base-elevation-spread) * var(--change-7)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-7)));
  --elevation-8: calc(var(--elevation-horizontal) * var(--change-8)) calc(var(--elevation-vertical)* var(--change-8)) calc(var(--elevation-blur) * var(--change-8)) calc(var(--elevation-spread) * var(--change-8)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-8)) ),
   0 0 calc(var(--base-elevation-blur) * var(--change-8)) calc(var(--base-elevation-spread) * var(--change-8)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-8)));
  --elevation-9: calc(var(--elevation-horizontal) * var(--change-9)) calc(var(--elevation-vertical)* var(--change-9)) calc(var(--elevation-blur) * var(--change-9)) calc(var(--elevation-spread) * var(--change-9)) rgba(0,0,0, calc(var(--elevation-opacity) * var(--change-9)) ),
    0 0 calc(var(--base-elevation-blur) * var(--change-9)) calc(var(--base-elevation-spread) * var(--change-9)) rgba(0,0,0, calc(var(--base-elevation-opacity) * var(--change-9)));
  /* Focus */
  --focusBlur: 4;
  --focusBorder: 2px;
  /* Base JSON - USER INPUT */
  --primaryFont: Open Sans;
  --secondaryFont: Open Sans;
  --baseFont: 16px;
  --fontWeight-0: 300;
  --fontWeight-1: 400;
  --fontWeight-2: 600;
  --fontWeight-3: 700;
  --fontWeight-4: 800;
  --standard-LineHeight: 160%;
  --header-LineHeight: 110%;
  --sm-LineHeight: 110%;
  --headerChange: 42;
  --headerWeight: 700;
  /* Typography */
  --Display1FontSize: 76.48px;
  --Display1FontWeight: 400;
  --Display1FontFamily: Open Sans;
  --Display1LetterSpacing: -1.5%;
  --Display1LineHeight: 130%;
  --Display1TextDecoration: none;
  --Display1TextTransform: none;
  --Display2FontSize: 69.76px;
  --Display2FontWeight: 400;
  --Display2FontFamily: Open Sans;
  --Display2LetterSpacing: -0.5%;
  --Display2LineHeight: 130%;
  --Display2TextDecoration: none;
  --Display2TextTransform: none;
  --h1FontSize: 56.32px;
  --h1FontWeight: 400;
  --h1FontFamily: var(--secondaryFont);
  --h1LetterSpacing: -0.5%;
  --h1LineHeight: 130%;
  --h1TextDecoration: none;
  --h1TextTransform: none;
  --h2FontSize: 49.6px;
  --h2FontWeight: 400;
  --h2FontFamily: var(--secondaryFont);
  --h2LetterSpacing: -0.5%;
  --h2LineHeight: 130%;
  --h2TextDecoration: none;
  --h2TextTransform: none;
  --h3FontSize: 42.88px;
  --h3FontWeight: 400;
  --h3FontFamily: var(--secondaryFont);
  --h3LetterSpacing: -0.5%;
  --h3LineHeight: 130%;
  --h3TextDecoration: none;
  --h3TextTransform: none;
  --h4FontSize: 36.16px;
  --h4FontWeight: 400;
  --h4FontFamily: var(--secondaryFont);
  --h4LetterSpacing: -0.5%;
  --h4LineHeight: 130%;
  --h4TextDecoration: none;
  --h4TextTransform: none;
  --h5FontSize: 29.44px;
  --h5FontWeight: 400;
  --h5FontFamily: var(--secondaryFont);
  --h5LetterSpacing: -0.5%;
  --h5LineHeight: 130%;
  --h5TextDecoration: none;
  --h5TextTransform: none;
  --h6FontSize: 25.72px;
  --h6FontWeight: 400;
  --h6FontFamily: var(--secondaryFont);
  --h6LetterSpacing: -0.5%;
  --h6LineHeight: 130%;
  --h6TextDecoration: none;
  --h6TextTransform: none;
  --body1FontSize: 16px;
  --body1FontWeight: 500;
  --body1FontFamily: var(--primaryFont);
  --body1LetterSpacing: 2%;
  --body1LineHeight: 160%;
  --body1TextDecoration: none;
  --body1TextTransform: none;
  --body1-boldFontSize: 16px;
  --body1-boldFontWeight: 700;
  --body1-boldFontFamily: var(--primaryFont);
  --body1-boldLetterSpacing: 2%;
  --body1-boldLineHeight: 160%;
  --body1-boldTextDecoration: none;
  --body1-boldTextTransform: none;
  --body2FontSize: 14px;
  --body2FontWeight: 600;
  --body2FontFamily: var(--primaryFont);
  --body2LetterSpacing: 1.75%;
  --body2LineHeight: 160%;
  --body2TextDecoration: none;
  --body2TextTransform: none;
  --body2-boldFontSize: 14px;
  --body2-boldFontWeight: 700;
  --body2-boldFontFamily: var(--primaryFont);
  --body2-boldLetterSpacing: 1.75%;
  --body2-boldLineHeight: 160%;
  --body2-boldTextDecoration: none;
  --body2-boldTextTransform: none;
  --body3FontSize: 18px;
  --body3FontWeight: 500;
  --body3FontFamily: var(--primaryFont);
  --body3LetterSpacing: 2.25%;
  --body3LineHeight: 160%;
  --body3TextDecoration: none;
  --body3TextTransform: none;
  --body3-boldFontSize: 18px;
  --body3-boldFontWeight: 700;
  --body3-boldFontFamily: var(--primaryFont);
  --body3-boldLetterSpacing: 2.25%;
  --body3-boldLineHeight: 160%;
  --body3-boldTextDecoration: none;
  --body3-boldTextTransform: none;
  --subtitle1FontSize: 16px;
  --subtitle1FontWeight: 600;
  --subtitle1FontFamily: var(--primaryFont);
  --subtitle1LetterSpacing: 2%;
  --subtitle1LineHeight: 110%;
  --subtitle1TextDecoration: none;
  --subtitle1TextTransform: none;
  --subtitle2FontSize: 14px;
  --subtitle2FontWeight: 700;
  --subtitle2FontFamily: var(--primaryFont);
  --subtitle2LetterSpacing: 1.75%;
  --subtitle2LineHeight: 110%;
  --subtitle2TextDecoration: none;
  --subtitle2TextTransform: none;
  --captionFontSize: 12px;
  --captionFontWeight: 600;
  --captionFontFamily: var(--primaryFont);
  --captionLetterSpacing: 1.5%;
  --captionLineHeight: 110%;
  --captionTextDecoration: none;
  --captionTextTransform: none;
  --caption-boldFontSize: 12px;
  --caption-boldFontWeight: 700;
  --caption-boldFontFamily: var(--primaryFont);
  --caption-boldLetterSpacing: 1.5%;
  --caption-boldLineHeight: 110%;
  --caption-boldTextDecoration: none;
  --caption-boldTextTransform: none;
  --overlineFontSize: 10px;
  --overlineFontWeight: 600;
  --overlineFontFamily: var(--primaryFont);
  --overlineLetterSpacing: 0.12%;
  --overlineLineHeight: 110%;
  --overlineTextDecoration: none;
  --overlineTextTransform: none;
  --overline-largeFontSize: 14px;
  --overline-largeFontWeight: 600;
  --overline-largeFontFamily: var(--primaryFont);
  --overline-largeLetterSpacing: 1.75%;
  --overline-largeLineHeight: 110%;
  --overline-largeTextDecoration: none;
  --overline-largeTextTransform: none;
  --overline-XLFontSize: 16px;
  --overline-XLFontWeight: 700;
  --overline-XLFontFamily: var(--primaryFont);
  --overline-XLLetterSpacing: 2%;
  --overline-XLLineHeight: 110%;
  --overline-XLTextDecoration: none;
  --overline-XLTextTransform: none;
  --label-1FontSize: 14px;
  --label-1FontWeight: 700;
  --label-1FontFamily: var(--primaryFont);
  --label-1LetterSpacing: 1.75%;
  --label-1LineHeight: 110%;
  --label-1TextDecoration: none;
  --label-1TextTransform: none;
  --label-1-allCapsFontSize: 14px;
  --label-1-allCapsFontWeight: 700;
  --label-1-allCapsFontFamily: var(--primaryFont);
  --label-1-allCapsLetterSpacing: 1.75%;
  --label-1-allCapsLineHeight: 110%;
  --label-1-allCapsTextDecoration: none;
  --label-1-allCapsTextTransform: none;
  --label-2FontSize: 12px;
  --label-2FontWeight: 700;
  --label-2FontFamily: var(--primaryFont);
  --label-2LetterSpacing: 1.5%;
  --label-2LineHeight: 110%;
  --label-2TextDecoration: none;
  --label-2TextTransform: none;
  --label-2-allCapsFontSize: 12px;
  --label-2-allCapsFontWeight: 700;
  --label-2-allCapsFontFamily: var(--primaryFont);
  --label-2-allCapsLetterSpacing: 1.5%;
  --label-2-allCapsLineHeight: 110%;
  --label-2-allCapsTextDecoration: none;
  --label-2-allCapsTextTransform: none;
  --label-smallFontSize: 10px;
  --label-smallFontWeight: 700;
  --label-smallFontFamily: var(--primaryFont);
  --label-smallLetterSpacing: 0.12%;
  --label-smallLineHeight: 110%;
  --label-smallTextDecoration: none;
  --label-smallTextTransform: none;
  --CTAFontSize: 16px;
  --CTAFontWeight: 500;
  --CTAFontFamily: var(--primaryFont);
  --CTALetterSpacing: 2%;
  --CTALineHeight: 110%;
  --CTATextDecoration: none;
  --CTATextTransform: uppercase;
  --CTA-SmallFontSize: 14px;
  --CTA-SmallFontWeight: 600;
  --CTA-SmallFontFamily: var(--primaryFont);
  --CTA-SmallLetterSpacing: 1.75%;
  --CTA-SmallLineHeight: 110%;
  --CTA-SmallTextDecoration: none;
  --CTA-SmallTextTransform: none;
  --smallFontSize: 10.8px;
  --smallFontWeight: 500;
  --smallFontFamily: var(--primaryFont);
  --smallLetterSpacing: 0.13%;
  --smallLineHeight: 110%;
  --smallTextDecoration: none;
  --smallTextTransform: none;
  --small-semiboldFontSize: 10.8px;
  --small-semiboldFontWeight: 700;
  --small-semiboldFontFamily: var(--primaryFont);
  --small-semiboldLetterSpacing: 0.13%;
  --small-semiboldLineHeight: 110%;
  --small-semiboldTextDecoration: none;
  --small-semiboldTextTransform: none;
  --statFontSize: 48px;
  --statFontWeight: 700;
  --statFontFamily: var(--primaryFont);
  --statLetterSpacing: 6%;
  --statLineHeight: 110%;
  --statTextDecoration: none;
  --statTextTransform: none;
  /* Base JSON */
  /* User assigned Typography Styles */
  --buttonTypography: var(--CTAFontWeight) var(--CTAFontSize) / var(--CTALineHeight) var(--CTAFontFamily);
  --buttonTextDecoration: var(--CTATextDecoration);
  --buttonTextTransform: var(--CTATextTransform);
  --buttonLetterSpacing: var(--CTALetterSpacing);
  --sm-buttonTypography: var(--CTA-SmallFontWeight) var(--CTA-SmallFontSize) / var(--CTA-SmallLineHeight) var(--CTA-SmallFontFamily);
  --sm-buttonTextDecoration: var(--CTA-SmallTextDecoration);
  --sm-buttonTextTransform: var(--CTA-SmallTextTransform);
  --sm-buttonLetterSpacing: var(--CTA-SmallLetterSpacing);
  --chipTypography: var(--captionFontWeight) var(--captionFontSize) / var(--captionLineHeight) var(--captionFontFamily);
  --chipTextTransform: var(--captionTextTransform);
  --chipLetterSpacing: var(--captionLetterSpacing);
  --hero-heroTitleTypography: var(--Display1FontWeight) var(--Display1FontSize) / var(--Display1LineHeight) var(--Display1FontFamily);
  --hero-heroTitleTransform: var(--Display1TextTransform);
  --hero-heroTitleSpacing: var(--Display1LetterSpacing);
  --hero-heroBodyTypography: var(--body1FontWeight) var(--body1FontSize) / var(--body1LineHeight) var(--body1FontFamily);
  --hero-heroBodyTransform: var(--body1-boldTextTransform);
  --hero-heroBodySpacing: var(--body1-boldLetterSpacing);
  --tableheaderTypography: var(--label-1FontWeight) var(--label-1FontSize) / var(--label-1LineHeight) var(--label-1FontFamily);
  --tableheaderSpacing: var(--label-1LetterSpacing);
  --tableheaderTransform: var(--label-1TextTransform);
  --tablebodyTypography: var(--body1FontWeight) var(--body1FontSize) / var(--body1LineHeight) var(--body1FontFamily);
  --tablebodySpacing: var(--body1LetterSpacing);
  --tablebodyTransform: var(--body1TextTransform);
  /* Targets */
  --min-target: 44px;
  --mobile-min-target: 48px;
  /* Animation */
  --animation-speed: 600ms;
  --animation-distance: 8px;
  --animation-focus-distance: 8px;
  /* Input */
  --input-radius: var(--radius-1);
  --input-hover-radius: calc(var(--radius-1) + 3px);
  /* Radius */
  --radius-1: 8px;
  /* Spacing */
  --spacing-1: 8px;
  /* Borders */
  --border-1: 1px;
  /* elevation settings */
  --elevation-change: .2;
  --elevation-horizontal: 2px;
  --elevation-vertical: 2px;
  --elevation-blur: 2px;
  --elevation-spread: 2px;
  --base-elevation-blur: 2px;
  --base-elevation-spread: 2px;
  --elevation-rgb: 0, 0, 0;
  --elevation-opacity: 0.04;
  --base-elevation-opacity: 0.04;
  --elevation-0: 0 0 0 0 rgba(0,0,0,0);
  /* bevels */
  --bevel-horizontal: 6px;
  --bevel-vertical: 6px;
  --bevel-spread: 1px;
  --bevel-blur: 6px;
  --bevel-light-opacity: 0.3;
  --bevel-dark-opacity: 0.1;
  --bevel-change: 0.08;
  --bevel-0: 0 0 0 0 rgba(0,0,0,0);
  /* glow settings */
  --glow-blur: 2px;
  --glow-spread: 2px;
  --glow-rgb: 0, 0, 0;
  --glow-opacity: 0.2;
  --glow-change: 0.2;
  /* States */
  --info: #0066EF;
  --on-info: rgba(255,255,255,1);
  --success: #327D35;
  --on-success: rgba(255,255,255,1);
  --warning: #A06B1A;
  --on-warning: rgba(255,255,255,1);
  --danger: #D62B2B;
  --on-danger: rgba(255,255,255,1);
  /* Dropdowns */
  --dropdown-shadow: var(--elevation-2);
  --dropdown-radius: 1;
  --dropdown-focus-bg: linear-gradient(90deg, var(--button) var(--background), var(--transparent) var(--background));
  --dm-dropdown-focus-bg: linear-gradient(90deg, var(--button) var(--background), var(--transparent) var(--background));
  --dropdown-hover-style: 100%;
  --dropdown-bottom-hover-bg: linear-gradient(0deg, var(--button-half) var(--background), var(--transparent) var(--background)) !important;
  --dm-dropdown-bottom-hover-bg: linear-gradient(0deg, var(--button) var(--background), var(--transparent) var(--background)) !important;
  /* Buttons */
  --button-padding: 3;
  --button-border: 2;
  --button-radius: 3;
  --button-minwidth: 5.5;
  --button-height: 5.5;
  --button-shadow: var(--elevation-1);
  --sm-button-height: 4;
  --sm-button-padding: 2;
  --mobile-button-radius: calc(calc( calc(var(--button-radius) * var(--radius-1)) / calc(var(--button-height) * var(--spacing-1)) ) * var(--mobile-min-target));
  /* Chips */
  --chip-minwidth: 80px;
  --chip-height: 5;
  --chip-radius: 2;
  --chip-padding: 2;
  --chip-shadow: var(--elevation-2);
  /* Swicth */
  --switch-height: var(--spacing-3);
  --switch-radius: 3;
  --switch-bar-height: 0.5;
  --switch-bar-radius: 0.5;
  /* Card */
  --card-padding: 2;
  --card-gap: 2;
  --card-radius: 3;
  --card-hover-radius: calc(calc(var(--radius-1) * var(--card-radius)) * 3px);
  --card-bevel: var(--bevel-0);
  --card-border: var(--border-1);
  --card-border-color: var(--border);
  --card-shadow: var(--elevation-1);
  /* Modal */
  --modal-radius: 3;
  --modal-elevation: var(--elevation-0);
  --modal-overlay: var(--black);
  --modal-padding: 2;
  --modal-border: var(--spacing-2);
  --modal-shadow: var(--modal-elevation);
  /* Tooltip */
  --dmtooltip: ;
  --tooltip-padding: 2;
  --tooltip-border: var(--border-1);
  --tooltip-shadow: 0;
  /* Toast */
  --toast-radius: 1;
  --toast-padding: 1;
  --toast-elevation: var(--elevation-0);
  --toast-bevel: var(--bevel-0);
  --toast-shadow: var(--elevation-1);
  /* Images */
  --image-elevation: var(--elevation-0);
  --image-radius: 3;
  --inline-image-height: 9;
  --inline-image-radius: 1;
  --image-shadow: var(--image-elevation);
  /* Avatars */
  --avatar-border: 4;
  --avatar-border-lg: 4;
  --avatar-elevation: var(--elevation-0);
  --avatar-shadow: var(--avatar-elevation);
  /* Sliders */
  --sliderhandleHeight: 3;
  --sliderhandleRadius: 1;
  --sliderhandle-shadow: var(--elevation-0);
  --sliderbarHeight: 1;
  --sliderbar-shadow: None;
  /* Popovers */
  --popoverRadius: 1;
  --popoverElevation: var(--elevation-0);
  --popoverBevel: var(--bevel-0);
  --popover-shadow: var(--popoverElevation), var(--popoverBevel);
  /* Dropdown */
  --dropdown-focus-theme: 4px;
  --on-dropdown-focus-bg: var(--background);
  --on-dropdown-hover-bg: var(--background);
  --dropdown-hover-bg: linear-gradient(90deg, var(--button-half) var(--dropdown-focus-theme), var(--transparent) var(--dropdown-focus-theme)) !important;
  --dropdown-focus-bg: linear-gradient(90deg, var(--button) var(--dropdown-focus-theme), var(--transparent) var(--dropdown-focus-theme));
  /* Section and Paragraph Spacing */
  --section-padding: 3;
  --p-padding: 2;
  /* navbar */
  --navbarPrimary-padding: 1;
  --navbarSecondary-padding: 1;
  --navbarSecondary-stickyTop: 0;
  --leftNav: var(--gray-100);
  --on-leftNav: var(--on-gray-100);
  --leftNavPadding: var(--spacing-2);
  /* Hero */
  --hero-padding: 3;
  --hero-gap: 2;
  --hero-justify-content: flex-start;
  /* Table */
  --tableheaderPadding: 1;
  --tablebodyPadding: 1;

  /* Core Colors */
  --transparent: rgba(0,0,0,0);
  --white: rgb(255,255,255);
  --white-half: rgba(255, 255, 255, 0.5);
  --on-white: var(--black);
  --black: rgb(18,18,18);
  --black-half: rgba(0,0,0, 0.5);
  --nearblack: #181818;
  --on-nearblack: #ffffff;
  --on-black: #ffffff;
  --textLight: var(--white);
  --textDark: var(--black);
  --gray-0: #fafafa;
  --gray-100: #e4e4e4;
  --gray-200: #cdcdcd;
  --gray-300: #b7b7b7;
  --gray-400: #a0a0a0;
  --gray-500: #8a8a8a;
  --gray-600: #737373;
  --gray-700: #5d5d5d;
  --gray-800: #464646;
  --gray-900: #303030;
  --on-gray-0: var(--black);
  --on-gray-100: var(--black);
  --on-gray-200: var(--black);
  --on-gray-300: var(--black);
  --on-gray-400: var(--black);
  --on-gray-500: var(--white);
  --on-gray-600: var(--white);
  --on-gray-700: var(--white);
  --on-gray-800: var(--white);
  --on-gray-900: var(--white);
  /* Theme Colors */
  --primary: #9C4FCF;
  --primary-half: rgba(156,79,207,0.5);
  --primary-quarter: rgba(156,79,207,0.25);
  --on-primary: #FFFFFF;
  --on-primary-half: rgba(255,255,255,0.5);
  --on-primary-quarter: rgba(255,255,255,0.25);
  --primary-0: #F1E6F8;
  --on-primary-0: #121212;
  --primary-100: #E0C8F0;
  --on-primary-100: #121212;
  --primary-200: #D0ABE8;
  --on-primary-200: #121212;
  --primary-300: #BF8DE0;
  --on-primary-300: #121212;
  --primary-400: #AE6FD8;
  --on-primary-400: #121212;
  --primary-500: #9C4FCF;
  --on-primary-500: #FFFFFF;
  --primary-600: #7B3AAF;
  --on-primary-600: #FFFFFF;
  --primary-700: #5B2690;
  --on-primary-700: #FFFFFF;
  --primary-800: #3C1373;
  --on-primary-800: #FFFFFF;
  --primary-900: #1E0056;
  --on-primary-900: #FFFFFF;
  --secondary: #358363;
  --on-secondary: #FFFFFF;
  --secondary-0: #DEF2EC;
  --on-secondary-0: #121212;
  --secondary-100: #B1E1D2;
  --on-secondary-100: #121212;
  --secondary-200: #83CFB8;
  --on-secondary-200: #121212;
  --secondary-300: #53BD9C;
  --on-secondary-300: #121212;
  --secondary-400: #449F7F;
  --on-secondary-400: #121212;
  --secondary-500: #358363;
  --on-secondary-500: #FFFFFF;
  --secondary-600: #266748;
  --on-secondary-600: #FFFFFF;
  --secondary-700: #194D2F;
  --on-secondary-700: #FFFFFF;
  --secondary-800: #0C3416;
  --on-secondary-800: #FFFFFF;
  --secondary-900: #001D00;
  --on-secondary-900: #FFFFFF;
  --tertiary: #9C4FCF;
  --on-tertiary: #FFFFFF;
  --tertiary-0: #F1E6F8;
  --on-tertiary-0: #121212;
  --tertiary-100: #E0C8F0;
  --on-tertiary-100: #121212;
  --tertiary-200: #D0ABE8;
  --on-tertiary-200: #121212;
  --tertiary-300: #BF8DE0;
  --on-tertiary-300: #121212;
  --tertiary-400: #AE6FD8;
  --on-tertiary-400: #121212;
  --tertiary-500: #9C4FCF;
  --on-tertiary-500: #FFFFFF;
  --tertiary-600: #7B3AAF;
  --on-tertiary-600: #FFFFFF;
  --tertiary-700: #5B2690;
  --on-tertiary-700: #FFFFFF;
  --tertiary-800: #3C1373;
  --on-tertiary-800: #FFFFFF;
  --tertiary-900: #1E0056;
  --on-tertiary-900: #FFFFFF;
  --accent: #E0C8F0;
  --on-accent: #121212;
  --dm-accent: #CCA5E6;
  --dm-on-accent: #121212;
  --accent-0: #F1E6F8;
  --on-accent-0: #121212;
  --accent-100: #E0C8F0;
  --on-accent-100: #121212;
  --accent-200: #D0ABE8;
  --on-accent-200: #121212;
  --accent-300: #BF8DE0;
  --on-accent-300: #121212;
  --accent-400: #AE6FD8;
  --on-accent-400: #121212;
  --accent-500: #9C4FCF;
  --on-accent-500: #FFFFFF;
  --accent-600: #7B3AAF;
  --on-accent-600: #FFFFFF;
  --accent-700: #5B2690;
  --on-accent-700: #FFFFFF;
  --accent-800: #3C1373;
  --on-accent-800: #FFFFFF;
  --accent-900: #1E0056;
  --on-accent-900: #FFFFFF;
  /* Gradients */
  --gradient-1: linear-gradient(45deg, var(--gradient1-a) 0%, var(--gradient1-b) 100%);
  --gradient-2: linear-gradient(45deg, var(--gradient2-a) 0%, var(--gradient2-b) 100%);
  --gradient-3: linear-gradient(45deg, var(--gradient3-a) 0%, var(--gradient3-b) 100%);
  --gradient-1a: '';
  --on-gradient-1: var(--on-gradient1-a);
  --on-gradient-2: var(--on-gradient2-a);
  --on-gradient-3: var(--on-gradient3-a);
  /* Glow Colors */
  --white-glow-bright: rgba(255,255,255,1);
  --white-glow-dim: rgba(255,255,255,.8);
  --white-glow-dimmer: rgba(255,255,255,.5);
  /* Border Color */
  --border: rgba(0,0,0,0.15);
  /* Chips DELETE WE DO NOT NEED */
  --chip: rgba(0,0,0,0.25);
  --on-chip: var(--black);
  /* Chart Coloring */
  --line-color: rgba(0,0,0,0.05);
  /* Surface */
  --surface: var(--white);
  --on-surface: var(--black);
  /* These are Dark Mode Elevations */
  --elevation-bg-0: var(--background);
  --on-elevation-bg-0: var(--on-background);
  --elevation-bg-1: var(--background);
  --on-elevation-bg-1: var(--on-background);
  --elevation-bg-2: var(--background);
  --on-elevation-bg-2: var(--on-background);
  --elevation-bg-3: var(--background);
  --on-elevation-bg-3: var(--on-background);
  --elevation-bg-4: var(--background);
  --on-elevation-bg-4: var(--on-background);
  --elevation-bg-5: var(--background);
  --on-elevation-bg-5: var(--on-background);
  --elevation-bg-6: var(--background);
  --on-elevation-bg-6: var(--on-background);
  --elevation-bg-7:var(--background);
  --on-elevation-bg-7: var(--on-background);
  --elevation-bg-8:var(--background);
  --on-elevation-bg-8: var(--on-background);
  --elevation-bg-9:var(--background);
  --on-elevation-bg-9: var(--on-background);
  /* elevations (this is just a fix until we update the sdk with --dm-elevation-x )*/
  --elevations-bg-0: var(--background);
  --on-elevations-bg-0: var(--on-background);
  --elevations-bg-1: var(--background);
  --on-elevations-bg-1: var(--on-background);
  --elevations-bg-2: var(--background);
  --on-elevations-bg-2: var(--on-background);
  --elevations-bg-3: var(--background);
  --on-elevations-bg-3: var(--on-background);
  --elevations-bg-4: var(--background);
  --on-elevations-bg-4: var(--on-background);
  --elevations-bg-5: var(--background);
  --on-elevations-bg-5: var(--on-background);
  --elevations-bg-6: var(--background);
  --on-elevations-bg-6: var(--on-background);
  --elevations-bg-7:var(--background);
  --on-elevations-bg-7: var(--on-background);
  --elevations-bg-8:var(--background);
  --on-elevations-bg-8: var(--on-background);
  --elevations-bg-9:var(--background);
  --on-elevations-bg-9: var(--on-background);
  /* Gradients */
  --gradient1-a: #F1E6F8;
  --on-gradient1-a: #121212;
  --gradient1-b: #E0C8F0;
  --on-gradient1-b: #121212;
  --gradient2-a: #B4D2FA;
  --on-gradient2-a: #121212;
  --gradient2-b: #8AB9F8;
  --on-gradient2-b: #121212;
  --gradient3-a: var(--gray-0);
  --on-gradient3-a: var(--black);
  --gradient3-b: var(--gray-200);
  --on-gradient3-b: var(--black);
  /* Backgrounds */
  --background: #FCF9FD;
  --background-secondary: #F8F3FC;
  --alt-background: var(--background-secondary);
  --on-background: var(--black);
  --primaryDarkBG: var(--black);
  --secondaryDarkBG: var(--black);
  --on-background-secondary: var(--on-gray-0);
  --background-tertiary: var(--primary);
  --on-background-tertiary: var(--on-primary);
  --primaryDarkBG: var(--black);
  --secondaryDarkBG: var(--nearblack);
  /* Button Coloring */
  --button: var(--primary-500);
  --on-button: #FFFFFF;
  --button-half: rgba(0,102,239,0.5);
  /* overlays */
  --color-1: var(--background);
  --color-2: var(--background);
  /* glows */
  --glow-1: 0 0 var(--glow-blur) var(--glow-spread) rgba(var(--glow-rgb), var(--glow-opacity)  );
  --glow-2: 0 0 var(--glow-blur) var(--glow-spread) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 1)))  );
  --glow-3: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 2))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 2))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 2)))  );
  --glow-4: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 3))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 3))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 3)))  );
  --glow-5: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 4))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 4))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 4)))  );
  --glow-6: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 5))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 5))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 5)))  );
  --glow-7: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 6))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 6))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 6)))  );
  --glow-8: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 7))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 7))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 7)))  );
  --glow-9: 0 0 calc(var(--glow-blur) * calc(1 + calc(var(--glow-change) * 8))) calc(var(--glow-spread) * calc(1 + calc(var(--glow-change) * 8))) rgba(var(--glow-rgb), calc(var(--glow-opacity) * calc(1 + calc(var(--glow-change) * 8)))  );
  /* bevel */
  --bevel-1: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 1)))),
   inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 1)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
   rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 1))));
  --bevel-2: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 2)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 2)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
    rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 2))));
  --bevel-3: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 3)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 3)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 3)))) var(--bevel-blur) var(--bevel-spread)
    rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 3))));
  --bevel-4: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 4)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 4)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 4)))) var(--bevel-blur) var(--bevel-spread)
    rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 4))));
  --bevel-5: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 5)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 5)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 5)))) var(--bevel-blur) var(--bevel-spread)
    rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 5))));
  --bevel-6: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 6)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 6)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 6)))) var(--bevel-blur) var(--bevel-spread)
    rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 6))));
  --bevel-7: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 7)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 7)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 7)))) var(--bevel-blur) var(--bevel-spread)
    rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 7))));
  --bevel-8: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 8)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 8)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 8)))) var(--bevel-blur) var(--bevel-spread)
    rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 8))));
  --bevel-9:
  inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 9)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 9)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 9)))) var(--bevel-blur) var(--bevel-spread)
    rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 9))));
  /* reverse bevel */
  --reverse-bevel-1: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 1)))),
   inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 1)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
   rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 1))));
  --reverse-bevel-2: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 2)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 2)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
    rgba(255,255,255 ,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 2))));
  --reverse-bevel-3: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 3)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 3)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 3)))) var(--bevel-blur) var(--bevel-spread)
    rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 3))));
  --reverse-bevel-4: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 4)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 4)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 4)))) var(--bevel-blur) var(--bevel-spread)
    rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 4))));
  --reverse-bevel-5: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 5)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 5)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 5)))) var(--bevel-blur) var(--bevel-spread)
    rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 5))));
  --reverse-bevel-6: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 6)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 6)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 6)))) var(--bevel-blur) var(--bevel-spread)
    rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 6))));
  --reverse-bevel-7: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 7)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 7)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 7)))) var(--bevel-blur) var(--bevel-spread)
    rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 7))));
  --reverse-bevel-8: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 8)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 8)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 8)))) var(--bevel-blur) var(--bevel-spread)
    rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 8))));
  --reverse-bevel-9: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 9)))),
    inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 9)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 9)))) var(--bevel-blur) var(--bevel-spread)
    rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 9))));
  /* Ridges  */
  --ridge: 2px;
  --ridge-1: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1px 1px 1px 1px rgba(0,0,0,.3),
   calc(0px - var(--ridge)) calc(0px - var(--ridge)) var(--ridge) var(--ridge) var(--white-glow-dim),
   calc(var(--ridge) * 1)  calc(var(--ridge) * 1) calc(var(--ridge) * 1) calc(var(--ridge) * 1) rgba(0,0,0,.3),
   0px 0px 0px var(--ridge)  var(--white-glow-bright);
  --ridge-2: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1.5px 1.5px 1px 1px rgba(0,0,0,.3),
   calc(0px - calc(var(--ridge) * var(--change-2)))  calc(0px - calc(var(--ridge) * var(--change-2))) var(--ridge) var(--ridge) var(--white-glow-dim),
   calc(var(--ridge) * var(--change-2))  calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) rgba(0,0,0,.3),
  0px 0px 0px calc(var(--ridge) * var(--change-2))  var(--white-glow-bright);
  --ridge-3: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), 1px 1px 0 0 var(--white-glow-dim),
   inset 1px 1px 0 0 rgba(0,0,0,.2),
  inset calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1))
   rgba(0,0,0,.3),
   calc(0px - calc(var(--ridge) * var(--change-3)))  calc(0px - calc(var(--ridge) * var(--change-3))) var(--ridge) var(--ridge) var(--white-glow-dim),
   calc(var(--ridge) * var(--change-3))  calc(var(--ridge) * var(--change-3)) calc(var(--ridge) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) rgba(0,0,0,.3),
  0px 0px 0px calc(var(--ridge) * var(--change-3))  var(--white-glow-bright);
  --ridge-4: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
  inset calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2))
   rgba(0,0,0,.3),
   calc(0px - calc(var(--ridge) * var(--change-4)))  calc(0px - calc(var(--ridge) * var(--change-4))) var(--ridge) var(--ridge) var(--white-glow-dim),
   calc(var(--ridge) * var(--change-4))  calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) rgba(0,0,0,.3),
   0px 0px 0px calc(var(--ridge) * var(--change-4))  var(--white-glow-bright);
  --ridge-5: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
  inset calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3))
   rgba(0,0,0,.3),
    calc(0px - calc(var(--ridge) * var(--change-5)))  calc(0px - calc(var(--ridge) * var(--change-5))) var(--ridge) var(--ridge) var(--white-glow-dim),
    calc(var(--ridge) * var(--change-5))  calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) rgba(0,0,0,.3),
    0px 0px 0px calc(var(--ridge) * var(--change-5))  var(--white-glow-bright);
  --ridge-6: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
  inset calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4))
   rgba(0,0,0,.3),
    calc(0px - calc(var(--ridge) * var(--change-6)))  calc(0px - calc(var(--ridge) * var(--change-6))) var(--ridge) var(--ridge) var(--white-glow-dim),
    calc(var(--ridge) * var(--change-6))  calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) rgba(0,0,0,.3),
    0px 0px 0px calc(var(--ridge) * var(--change-6))  var(--white-glow-bright);
  --ridge-7: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
  inset calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5))
   rgba(0,0,0,.3),
   calc(0px - calc(var(--ridge) * var(--change-7)))  calc(0px - calc(var(--ridge) * var(--change-7))) var(--ridge) var(--ridge) var(--white-glow-dim),
   calc(var(--ridge) * var(--change-7))  calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-7)) calc(var(--ridge) * var(--change-7)) rgba(0,0,0,.3),
  0px 0px 0px calc(var(--ridge) * var(--change-7))  var(--white-glow-bright);
  --ridge-8: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
  inset calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6))
   rgba(0,0,0,.3),
    calc(0px - calc(var(--ridge) * var(--change-8)))  calc(0px - calc(var(--ridge) * var(--change-8))) var(--ridge) var(--ridge) var(--white-glow-dim),
    calc(var(--ridge) * var(--change-8))  calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) rgba(0,0,0,.3),
    calc(0px - calc(var(--ridge) * var(--change-8)))  calc(var(--ridge) * var(--change-8)) var(--ridge) var(--ridge) rgba(0,0,0,.08),
    calc(var(--ridge) * var(--change-8))  calc(0px - calc(var(--ridge) * var(--change-8))) var(--ridge) var(--ridge) rgba(0,0,0,.08),
    0px 0px 0px calc(var(--ridge) * var(--change-8))  var(--white-glow-bright);

  --ridge-9: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
  inset calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7))
   rgba(0,0,0,.3),
    calc(0px - calc(var(--ridge) * var(--change-9)))  calc(0px - calc(var(--ridge) * var(--change-9))) var(--ridge) var(--ridge) var(--white-glow-dim),
    calc(var(--ridge) * var(--change-9))  calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) rgba(0,0,0,.3),
    calc(0px - calc(var(--ridge) * var(--change-9)))  calc(var(--ridge) * var(--change-9)) var(--ridge) var(--ridge) rgba(0,0,0,.08),
    calc(var(--ridge) * var(--change-9))  calc(0px - calc(var(--ridge) * var(--change-9))) var(--ridge) var(--ridge) rgba(0,0,0,.08),
    0px 0px 0px calc(var(--ridge) * var(--change-9))  var(--white-glow-bright);
  /* Groove Shadows */
  --groove-1: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-1),
  calc(0px - calc(var(--elevation-horizontal) * 1))  calc(0px - calc(var(--elevation-vertical) * 1)) calc(var(--elevation-blur) * 1) calc(var(--elevation-spread) * 1) rgba(0,0,0,.3),
  calc(var(--elevation-horizontal) * 1)  calc(var(--elevation-vertical) * 1) calc(var(--elevation-blur) * 1) calc(var(--elevation-spread) * 1) var(--white-glow-dim),
  calc(0px - calc(var(--elevation-horizontal) * 1))  calc(var(--elevation-vertical) * 1) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
  calc(var(--elevation-horizontal) * 1)  calc(0px - calc(var(--elevation-vertical) * 1)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
  --groove-2: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-2),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-2)))  calc(0px - calc(var(--elevation-vertical) * var(--change-2))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
  calc(var(--elevation-horizontal) * var(--change-2))  calc(var(--elevation-vertical) * var(--change-2)) calc(var(--elevation-blur) * var(--change-2)) calc(var(--elevation-spread) * var(--change-2)) var(--white-glow-dim),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-2)))  calc(var(--elevation-vertical) * var(--change-2)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
  calc(var(--elevation-horizontal) * var(--change-2))  calc(0px - calc(var(--elevation-vertical) * var(--change-2))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
  --groove-3: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-3),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-3)))  calc(0px - calc(var(--elevation-vertical) * var(--change-3))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
  calc(var(--elevation-horizontal) * var(--change-3))  calc(var(--elevation-vertical) * var(--change-3)) calc(var(--elevation-blur) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) var(--white-glow-dim),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-3)))  calc(var(--elevation-vertical) * var(--change-3)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
  calc(var(--elevation-horizontal) * var(--change-3))  calc(0px - calc(var(--elevation-vertical) * var(--change-3))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
  --groove-4: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-4),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-4)))  calc(0px - calc(var(--elevation-vertical) * var(--change-4))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
  calc(var(--elevation-horizontal) * var(--change-4))  calc(var(--elevation-vertical) * var(--change-4)) calc(var(--elevation-blur) * var(--change-4)) calc(var(--elevation-spread) * var(--change-4)) var(--white-glow-dim),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-4)))  calc(var(--elevation-vertical) * var(--change-4)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
  calc(var(--elevation-horizontal) * var(--change-4))  calc(0px - calc(var(--elevation-vertical) * var(--change-4))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
  --groove-5: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-5),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-5)))  calc(0px - calc(var(--elevation-vertical) * var(--change-5))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
  calc(var(--elevation-horizontal) * var(--change-5))  calc(var(--elevation-vertical) * var(--change-5)) calc(var(--elevation-blur) * var(--change-5)) calc(var(--elevation-spread) * var(--change-5)) var(--white-glow-dim),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-5)))  calc(var(--elevation-vertical) * var(--change-5)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
  calc(var(--elevation-horizontal) * var(--change-5))  calc(0px - calc(var(--elevation-vertical) * var(--change-5))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
  --groove-6: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-6),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-6)))  calc(0px - calc(var(--elevation-vertical) * var(--change-6))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
  calc(var(--elevation-horizontal) * var(--change-6))  calc(var(--elevation-vertical) * var(--change-6)) calc(var(--elevation-blur) * var(--change-6)) calc(var(--elevation-spread) * var(--change-6)) var(--white-glow-dim);
  --groove-7: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-7),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-7)))  calc(0px - calc(var(--elevation-vertical) * var(--change-7))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
  calc(var(--elevation-horizontal) * var(--change-7))  calc(var(--elevation-vertical) * var(--change-7)) calc(var(--elevation-blur) * var(--change-7)) calc(var(--elevation-spread) * var(--change-7)) var(--white-glow-dim),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-7)))  calc(var(--elevation-vertical) * var(--change-7)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
  calc(var(--elevation-horizontal) * var(--change-7))  calc(0px - calc(var(--elevation-vertical) * var(--change-7))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
  --groove-8: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-8),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-8)))  calc(0px - calc(var(--elevation-vertical) * var(--change-8))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
  calc(var(--elevation-horizontal) * var(--change-8))  calc(var(--elevation-vertical) * var(--change-8)) var(--elevation-blur) var(--elevation-spread)  var(--white-glow-dim),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-8)))  calc(var(--elevation-vertical) * var(--change-8)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
  calc(var(--elevation-horizontal) * var(--change-8))  calc(0px - calc(var(--elevation-vertical) * var(--change-8))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
  --groove-9: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-9),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-9)))  calc(0px - calc(var(--elevation-vertical) * var(--change-9))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3),
  calc(var(--elevation-horizontal) * var(--change-9))  calc(var(--elevation-vertical) * var(--change-9)) var(--elevation-blur) var(--elevation-spread)  var(--white-glow-dim),
  calc(0px - calc(var(--elevation-horizontal) * var(--change-9)))  calc(var(--elevation-vertical) * var(--change-9)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
  calc(var(--elevation-horizontal) * var(--change-9))  calc(0px - calc(var(--elevation-vertical) * var(--change-9))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
  /* recessed  */
  --recessed-1: inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1px 1px 1px 1px rgba(0,0,0,.3);
  --recessed-2: inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1.5px 1.5px 1px 1px rgba(0,0,0,.3);
  --recessed-3: inset calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1))
   calc(1.5px * calc(1 + var(--bevel-change) * 1)) rgba(0,0,0,.3);
  --recessed-4: inset calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2))
   calc(1.5px * calc(1 + var(--bevel-change) * 2)) rgba(0,0,0,.3);
  --recessed-5: inset calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3))
   calc(1.5px * calc(1 + var(--bevel-change) * 3)) rgba(0,0,0,.3);
  --recessed-6: inset calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4))
   calc(1.5px * calc(1 + var(--bevel-change) * 4)) rgba(0,0,0,.3);
  --recessed-7: inset calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5))
   calc(1.5px * calc(1 + var(--bevel-change) * 5)) rgba(0,0,0,.3);
  --recessed-8: inset calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6))
   calc(1.5px * calc(1 + var(--bevel-change) * 6)) rgba(0,0,0,.3);
  --recessed-9:  inset calc(1.5px * calc(1 + var(--bevel-change) * 8)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7))
   calc(1.5px * calc(1 + var(--bevel-change) * 7)) rgba(0,0,0,.3);

  /* Button variations based on background color */
  --buttonOnWhite: var(--primary-500);
  --onbuttonOnWhite: #FFFFFF;
  --buttonHalfOnWhite: var(--primary-500);
  --buttonOnBlack: var(--primary-500);
  --onbuttonOnBlack: #FFFFFF;
  --buttonHalfOnBlack: var(--primary-500);
  --buttonOnTertiary: var(--white);
  --onbuttonOnTertiary: #121212;
  --buttonHalfOnTertiary: rgba(255,255,255,0.5);
  --buttonOnGradient1: #121212;
  --onbuttonOnGradient1: var(--white);
  --buttonHalfOnGradient1: rgba(18,18,18,0.5);
  --buttonOnGradient2: #121212;
  --onbuttonOnGradient2: var(--white);
  --buttonHalfOnGradient2: rgba(18,18,18,0.5);
  --buttonOnGradient3: #121212;
  --onbuttonOnGradient3: #FFFFFF;
  --buttonHalfOnGradient3: rgba(18,18,18,0.5);
  /* Icons */
  --icon: var(--primary-500);
  --on-icon: #FFFFFF;
  --icon-half: rgba(156,79,207,0.5);
  /* Icon variations based on background color */
  --iconOnWhite: var(--secondary-500);
  --oniconOnWhite: #FFFFFF;
  --iconHalfOnWhite: var(--secondary-500);
  --iconOnBlack: var(--secondary-500);
  --oniconOnBlack: #FFFFFF;
  --iconHalfOnBlack: var(--secondary-500);
  --iconOnTertiary: #FFFFFF;
  --oniconOnTertiary: #121212;
  --iconHalfOnTertiary: rgba(0,0,0,0.5);
  --iconOnGradient1: #121212;
  --oniconOnGradient1: var(--white);
  --iconHalfOnGradient1: rgba(18,18,18,0.5);
  --iconOnGradient2: #121212;
  --oniconOnGradient2: var(--white);
  --iconHalfOnGradient2: rgba(18,18,18,0.5);
  --iconOnGradient3: #121212;
  --oniconOnGradient3: #FFFFFF;
  --oniconHalfOnGradient3: rgba(0,0,0,0.5);
  /* Hotlinks */
  --hotlink: #0066EF;
  --hotlink-visited: rgba(0,102,239,0.9);
  --hotlink-decoration: underline;
  --hotlink-hover-decoration: none;
  /* Hotlink variations based on background color */
  --hotlinkOnWhite: #0066EF;
  --hotlinkOnWhite-visited: rgba(0,102,239,0.9);
  --hotlinkOnWhite-decoration: none;
  --hotlinkOnWhite-hover-decoration: underline;
  --hotlinkOnBlack: #0066EF;
  --hotlinkOnBlack-visited: rgba(0,102,239,0.9);
  --hotlinkOnBlack-decoration: none;
  --hotlinkOnBlack-hover-decoration: underline;
  --hotlinkOnTertiary: #FFFFFF;
  --hotlinkOnTertiary-visited: rgba(255,255,255,0.8);
  --hotlinkOnTertiary-decoration: none;
  --hotlinkOnTertiary-hover-decoration: underline;
  --hotlinkOnGradient3: #121212;
  --hotlinkOnGradient3-visited: rgba(0,0,0,0.5);
  /* Text Decorations */
  --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
  --text-gradient-a: #9C4FCF;
  --text-gradient-b: #0066EF;
  /* Input */
  --input: rgba(254,252,254,0.55);
  --on-input: #121212;
  --primary-input: var(--input);
  --primary-on-input: var(--on-input);
  /* Primary background */
  --primary-background: var(--background) !important;
  --primary-alt-background: var(--alt-background) !important;
  --primary-on-background: var(--on-background) !important;
  /* Button */
  --primary-button: var(--button);
  --primary-on-button: var(--on-button);
  --primary-button-half: var(--button-half);
  /* Icons */
  --primary-icon: var(--icon);
  --primary-on-icon: var(--on-icon);
  --primary-icon-half: var(--icon-half);
  /* Hotlink */
  --primary-hotlink: var(--hotlink);
  --primary-hotlink-decoration: var(--hotlink-decoration);
  --primary-hotlink-hover-decoration: var(--hotlink-hover-decoration);

  /* Light Mode (hacck until we update the sdk ) */
  --lm-body-bg: var(--white);
  --lm-white: var(--white);
  --lm-on-white: var(--on-white);
  --lm-on-black: var(--on-black);
  --lm-nearblack: var(--nearblack);
  --lm-on-nearblack: var(--on-nearblack);
  --lm-textLight: var(--textLight);
  --lm-textDark: var(--textDark);
  --lm-gray-0: var(--gray-0);
  --lm-gray-100: var(--gray-100);
  --lm-gray-200: var(--gray-200);
  --lm-gray-300: var(--gray-300);
  --lm-gray-400: var(--gray-400);
  --lm-gray-500: var(--gray-500);
  --lm-gray-600: var(--gray-600);
  --lm-gray-700: var(--gray-700);
  --lm-gray-800: var(--gray-800);
  --lm-gray-900: var(--gray-900);
  --lm-on-gray: var(--on-gray);
  --lm-on-gray-0: var(--on-gray-0);
  --lm-on-gray-100: var(--on-gray-100);
  --lm-on-gray-200: var(--on-gray-200);
  --lm-on-gray-300: var(--on-gray-300);
  --lm-on-gray-400: var(--on-gray-400);
  --lm-on-gray-500: var(--on-gray-500);
  --lm-on-gray-600: var(--on-gray-600);
  --lm-on-gray-700: var(--on-gray-700);
  --lm-on-gray-800: var(--on-gray-800);
  --lm-on-gray-900: var(--on-gray-900);
  /* Backgrounds */
  --lm-background: var(--background-secondary);
  --lm-alt-background: var(--background);
  --lm-background-secondary: var(--background-secondary);
  --lm-on-background-secondary: var(--on-background-secondary);
  --lm-on-background: var(--on-background);
  --lm-background-tertiary: var(--background-tertiary);
  --lm-on-background-tertiary: var(--on-background-tertiary);
  /* Gradients */
  --lm-gradient1-a: var(--gradient1-a);
  --lm-on-gradient1-a: var(--on-gradient1-a);
  --lm-gradient1-b: var(--gradient1-b);
  --lm-on-gradient1-b: var(--on-gradient1-b);
  --lm-gradient-1: var(--gradient-1);
  --lm-on-gradient-1: var(--on-gradient-1);
  --lm-gradient2-a: var(--gradient2-a);
  --lm-on-gradient2-a: var(--on-gradient2-a);
  --lm-gradient2-b: var(--gradient2-b);
  --lm-on-gradient2-b: var(--on-gradient2-b);
  --lm-gradient-2: var(--gradient-2);
  --lm-on-gradient-2: var(--on-gradient-2);
  --lm-gradient3-a: var(--gradient3-a);
  --lm-on-gradient3-a: var(--on-gradient3-a);
  --lm-gradient3-b: var(--gradient3-b);
  --lm-on-gradient3-b: var(--on-gradient3-b);
  --lm-gradient-3: var(--gradient-3);
  --lm-on-gradient-3: var(--on-gradient-3);
  /* Elevations */
  --lm-elevations-bg-0: var(--background);
  --lm-on-elevations-bg-0: var(--on-background);
  --lm-elevations-bg-1: var(--background);
  --lm-on-elevations-bg-1: var(--on-background);
  --lm-elevations-bg-2: var(--background);
  --lm-on-elevations-bg-2: var(--on-background);
  --lm-elevations-bg-3: var(--background);
  --lm-on-elevations-bg-3: var(--on-background);
  --lm-elevations-bg-4: var(--background);
  --lm-on-elevations-bg-4: var(--on-background);
  --lm-elevations-bg-5: var(--background);
  --lm-on-elevations-bg-5: var(--on-background);
  --lm-elevations-bg-6: var(--background);
  --lm-on-elevations-bg-6: var(--on-background);
  --lm-elevations-bg-7:var(--background);
  --lm-on-elevations-bg-7: var(--on-background);
  --lm-elevations-bg-8:var(--background);
  --lm-on-elevations-bg-8: var(--on-background);
  --lm-elevations-bg-9:var(--background);
  --lm-on-elevations-bg-9: var(--on-background);
  /* Border Color */
  --lm-border: var(--border);
  /* Text Decorations */
  --lm-text-gradient-a: var(--text-gradient-a);
  --lm-text-gradient-b: var(--text-gradient-b);
  --lm-text-gradient: var(--text-gradient);
  --lm-color-drop: var(--color-drop);
  /* Surface */
  --lm-on-surface: var(--on-surface);
  --lm-on-surface: var(--on-surface);
/* States */
  --lm-info: var(--info);
  --lm-on-info: var(--on-info);
  --lm-success: var(--success);
  --lm-on-success: var(--on-success);
  --lm-warning: var(--warning);
  --lm-on-warning: var(--on-warning);
  --lm-danger: var(--danger);
  --lm-on-danger: var(--on-danger);
  /* Inputs */
  --lm-input: var(--input);
  --lm-on-input: var(--on-input);
  /* Hotlinks */
  --lm-hotlink: var(--hotlink);
  --lm-hotlink-visited: var(--hotlink-visited);
  --lm-hotlink-decoration: var(--hotlink-decoration);
  --lm-hotlink-hover-decoration: var(--hotlink-hover-decoration);
  /* Hotlink variations based on background color */
  --lm-hotlinkOnWhite: #0066EF;
  --lm-hotlinkOnWhite-visited: rgba(0,102,239,0.9);
  --lm-hotlinkOnWhite-decoration: none;
  --lm-hotlinkOnWhite-hover-decoration: underline;
  --lm-hotlinkOnBlack: #0066EF;
  --lm-hotlinkOnBlack-visited: rgba(0,102,239,0.9);
  --lm-hotlinkOnBlack-decoration: none;
  --lm-hotlinkOnBlack-hover-decoration: underline;
  --lm-hotlinkOnTertiary: #FFFFFF;
  --lm-hotlinkOnTertiary-visited: rgba(255,255,255,0.8);
  --lm-hotlinkOnTertiary-decoration: none;
  --lm-hotlinkOnTertiary-hover-decoration: underline;
  --lm-hotlinkOnGradient3: #121212;
  --lm-hotlinkOnGradient3-visited: rgba(0,0,0,0.5);
 /* Buttons */
  --lm-buttonOnWhite: var(--buttonOnWhite);
  --lm-onbuttonOnWhite: var(--onbuttonOnWhite);
  --lm-buttonHalfOnWhite: var(--buttonHalfOnWhite);
  --lm-buttonOnBlack: var(--buttonOnBlack);
  --lm-onbuttonOnBlack: var(--onbuttonOnBlack);
  --lm-buttonHalfOnBlack: var(--buttonHalfOnBlack);
  --lm-buttonOnTertiary: var(--buttonOnTertiary);
  --lm-onbuttonOnTertiary: var(--onbuttonOnTertiary);
  --lm-buttonHalfOnTertiary: var(--buttonHalfOnTertiary);
  --lm-buttonOnGradient1: var(--buttonOnGradient1);
  --lm-onbuttonOnGradient1: var(--onbuttonOnGradient1);
  --lm-buttonHalfOnGradient1: var(--buttonHalfOnGradient1);
  --lm-buttonOnGradient2: var(--buttonOnGradient2);
  --lm-onbuttonOnGradient2: var(--onbuttonOnGradient2);
  --lm-buttonHalfOnGradient2: var(--buttonHalfOnGradient2);
  --lm-buttonOnGradient3: var(--buttonOnGradient3);
  --lm-onbuttonOnGradient3: var(--onbuttonOnGradient3);
  --lm-buttonHalfOnGradient3: var(--buttonHalfOnGradient3);
  --lm-button: var(--button);
  --lm-on-button: var(--on-button);
  --lm-button-half: var(--button-half);
  /* Icons */
  --lm-icon: var(--icon);
  --lm-on-icon: var(--on-icon);
  --lm-icon-half: var(--icon-half);
  --lm-iconOnWhite: var(--dmiconOnWhite);
  --lm-oniconOnWhite: var(--dmoniconOnWhite);
  --lm-iconHalfOnWhite: var(--dmiconHalfOnWhite);
  --lm-iconOnBlack: var(--dmiconOnBlack);
  --lm-oniconOnBlack: var(--dmoniconOnBlack);
  --lm-iconHalfOnBlack: var(--dmiconHalfOnBlack);
  --lm-iconOnTertiary: var(--dmiconOnTertiary);
  --lm-oniconOnTertiary: var(--dmoniconOnTertiary);
  --lm-iconHalfOnTertiary: var(--dmiconHalfOnTertiary);
  --lm-iconOnGradient1: var(--dmiconOnGradient1);
  --lm-oniconOnGradient1: var(--dmoniconOnGradient1);
  --lm-iconHalfOnGradient1: var(--dmiconHalfOnGradient1);
  --lm-iconOnGradient2: var(--dmiconOnGradient2);
  --lm-oniconOnGradient2: var(--dmoniconOnGradient2);
  --lm-iconHalfOnGradient2: var(--dmiconHalfOnGradient2);
  --lm-iconOnGradient3: var(--dmiconOnGradient3);
  --lm-oniconOnGradient3: var(--dmoniconOnGradient3);
  --lm-iconHalfOnGradient3: var(--dmiconHalfOnGradient3);
  /* Glow Colors */
  --lm-white-glow-bright: var(--white-glow-bright);
  --lm-white-glow-dim: var(--white-glow-dim);
  --lm-white-glow-dimmer: var(--white-glow-dimmer);
  /* Charting Colors */
  --lm-line-color: var(--line-color);
  /* Surface */
  --lm-surface: var(--surface);
  /* Theme Colors */
  --lm-primary: var(--primary);
  --lm-primary-half: var(--primary-half);
  --lm-primary-quarter: var(--primary-quarter);
  --lm-on-primary: var(--on-primary);
  --lm-on-primary-half: var(--on-primary-half);
  --lm-on-primary-quarter: var(--on-primary-quarter);
  --lm-primary-0: var(--primary-0:);
  --lm-on-primary-0: var(-dm-on-primary-0);
  --lm-primary-100: var(-dm-primary-100);
  --lm-on-primary-100: var(--on-primary-100);
  --lm-primary-200: var(-dm-primary-200);
  --lm-on-primary-200: var(--on-primary-200);
  --lm-primary-300: var(--primary-300);
  --lm-on-primary-300: var(--on-primary-300);
  --lm-primary-400: var(--primary-400);
  --lm-on-primary-400: var(--on-primary-400);
  --lm-primary-500: var(--primary-500);
  --lm-on-primary-500: var(--on-primary-500);
  --lm-primary-600: var(--primary-600);
  --lm-on-primary-600: var(--on-primary-600);
  --lm-primary-700: var(--primary-700);
  --lm-on-primary-700: var(--on-primary-700);
  --lm-primary-800: var(--primary-800);
  --lm-on-primary-800: var(--on-primary-800);
  --lm-primary-900: var(-dm-primary-900);
  --lm-on-primary-900: var(--on-primary-900);
  --lm-secondary: var(--secondary);
  --lm-on-secondary: var(--on-secondary);
  --lm-secondary-0: var(--secondary-0);
  --lm-on-secondary-0: var(--on-secondary-0);
  --lm-secondary-100: var(--secondary-100);
  --lm-on-secondary-100: var(--on-secondary-100);
  --lm-secondary-200: var(--secondary-200);
  --lm-on-secondary-200: var(--on-secondary-200);
  --lm-secondary-300: var(--secondary-300);
  --lm-on-secondary-300: var(--on-secondary-300);
  --lm-secondary-400: var(--secondary-400);
  --lm-on-secondary-400: var(--on-secondary-400);
  --lm-secondary-500: var(--secondary-500);
  --lm-on-secondary-500: var(--on-secondary-500);
  --lm-secondary-600: var(--secondary-600);
  --lm-on-secondary-600: var(--secondary-600);
  --lm-secondary-700: var(--secondary-700);
  --lm-on-secondary-700: var(--on-secondary-700);
  --lm-secondary-800: var(--secondary-800);
  --lm-on-secondary-800: var(--on-secondary-800);
  --lm-secondary-900: var(--secondary-900);
  --lm-on-secondary-900: var(--on-secondary-900);
  --lm-tertiary: var(--tertiary);
  --lm-on-tertiary: var(--on-tertiary);
  --lm-tertiary-0: var(--tertiary-0);
  --lm-on-tertiary-0: var(--on-tertiary-0);
  --lm-tertiary-100: var(--tertiary-100);
  --lm-on-tertiary-100: var(--on-tertiary-100);
  --lm-tertiary-200: var(--tertiary-200);
  --lm-on-tertiary-200: var(--on-tertiary-200);
  --lm-tertiary-300: var(--tertiary-300);
  --lm-on-tertiary-300: var(--on-tertiary-300);
  --lm-tertiary-400: var(--tertiary-400);
  --lm-on-tertiary-400: var(--on-tertiary-400);
  --lm-tertiary-500: var(--tertiary-500);
  --lm-on-tertiary-500: var(--on-tertiary-500);
  --lm-tertiary-600: var(--tertiary-600);
  --lm-on-tertiary-600: var(--on-tertiary-600);
  --lm-tertiary-700: var(--tertiary-700);
  --lm-on-tertiary-700: var(--on-tertiary-700);
  --lm-tertiary-800: var(--tertiary-800);
  --lm-on-tertiary-800: var(--on-tertiary-800);
  --lm-tertiary-900: var(--tertiary-900);
  --lm-on-tertiary-900: var(--on-tertiary-900);
  --lm-accent: var(--accent);
  --lm-on-accent: var(--on-accent);
  --lm-accent-0: var(--accent-0);
  --lm-on-accent-0: var(--on-accent-0);
  --lm-accent-100: var(--accent-100);
  --lm-on-accent-100: var(--on-accent-100);
  --lm-accent-200: var(--accent-200);
  --lm-on-accent-200: var(--on-accent-200);
  --lm-accent-300: var(--accent-300);
  --lm-on-accent-300: var(--on-accent-300);
  --lm-accent-400: var(--accent-400);
  --lm-on-accent-400: var(--on-accent-400);
  --lm-accent-500: var(--accent-500);
  --lm-on-accent-500: var(--on-accent-500);
  --lm-accent-600: var(--accent-600);
  --lm-on-accent-600: var(--on-accent-600);
  --lm-accent-700: var(--accent-700);
  --lm-on-accent-700: var(--on-accent-700);
  --lm-accent-800: var(--accent-800);
  --lm-on-accent-800: var(--on-accent-800);
  --lm-accent-900: var(--accent-900);
  --lm-on-accent-900: var(--on-accent-900);
  /* Dark mode */
  --dm-white: rgba(255,255,255,0.6);
  --dm-white-bg: var(--dm-midnight-600);
  --dm-on-white: #121212;
  --dm-on-white-bg: var(--dm-on-midnight-600);
  --dm-on-black: rgba(255, 255, 255, 0.6);
  --dm-nearblack: #181818;
  --dm-on-nearblack: rgba(255, 255, 255, 0.6);
  --dm-textLight: var(--dm-white);
  --dm-textDark: var(--black);
  --dm-gray-0: #dfdfdf;
  --dm-gray-100: #c8c8c8;
  --dm-gray-200: #b1b1b1;
  --dm-gray-300: #9b9b9b;
  --dm-gray-400: #858585;
  --dm-gray-500: #6a6a6a;
  --dm-gray-600: #505050;
  --dm-gray-700: #383838;
  --dm-gray-800: #212121;
  --dm-gray-900: #070707;
  --dm-on-gray: var(--black);
  --dm-on-gray-0: var(--black);
  --dm-on-gray-100: var(--black);
  --dm-on-gray-200: var(--black);
  --dm-on-gray-300: var(--black);
  --dm-on-gray-400: var(--black);
  --dm-on-gray-500: var(--white);
  --dm-on-gray-600: var(--white);
  --dm-on-gray-700: var(--white);
  --dm-on-gray-800: var(--white);
  --dm-on-gray-900: var(--white);
  /* Backgrounds */
  --dm-background: var(--primaryDarkBG);
  --dm-alt-background: color-mix(in lch, var(--primaryDarkBG), var(--black) 5%);
  --dm-on-background: rgba(255,255,255,0.6);
  /* Gradients */
  --dm-gradient1-a: #D8BAEC;
  --dm-on-gradient1-a: #121212;
  --dm-gradient1-b: #CCA5E6;
  --dm-on-gradient1-b: #121212;
  --dm-gradient-1: linear-gradient(45deg, var(--dm-gradient1-a) 0%, var(--dm-gradient1-b) 100%);
  --dm-on-gradient-1: var(--dm-on-gradient1-a);
  --dm-gradient2-a: #9CB8DD;
  --dm-on-gradient2-a: #121212;
  --dm-gradient2-b: #86A7D3;
  --dm-on-gradient2-b: #121212;
  --dm-gradient-2: linear-gradient(45deg, var(--dm-gradient2-a) 0%, var(--dm-gradient2-b) 100%);
  --dm-on-gradient-2: var(--dm-on-gradient2-a);
  --dm-gradient3-a: var(--dm-gray-700);
  --dm-on-gradient3-a: var(--dm-white);
  --dm-gradient3-b: var(--black);
  --dm-on-gradient3-b: var(--dm-white);
  --dm-gradient-3: linear-gradient(45deg, var(--dm-gradient3-a) 0%, var(--dm-gradient3-b) 110%);
  --dm-on-gradient-3: var(--dm-on-gradient3-a);
  /* Border Color */
  --dm-border: rgba(255,255,255,0.15);
  /* Text Decorations */
  --dm-text-gradient-a: #AA56DD;
  --dm-text-gradient-b: #307CDD;
  --dm-text-gradient: linear-gradient(45deg, var(--dm-text-gradient-a) 0%, var(--dm-text-gradient-b) 100%);
  --dm-color-drop: var(--black);
  /* Backgrounds */
  --dm-background: var(--primaryDarkBG);
  --dm-alt-background: var(--background-secondary);
  --dm-background-secondary: var(--background-secondary);
  --dm-on-background-secondary: var(--on-background-secondary);
  /* Surface */
  --dm-on-surface: var(--dm-white);
  --dm-on-surface: var(--dm-on-white);
  /* States */
  --dm-info: #307CDD;
  --dm-on-info: rgba(18,18,18,1);
  --dm-success: #418C44;
  --dm-on-success: rgba(18,18,18,1);
  --dm-warning: #AA701A;
  --dm-on-warning: rgba(18,18,18,1);
  --dm-danger: #D55050;
  --dm-on-danger: rgba(18,18,18,1);
  /* DELETE We do not need these state values */
  --dm-Info-0: #B3C8E5;
  --dm-on-Info-0: #121212;
  --dm-Info-100: #9CB8DD;
  --dm-on-Info-100: #121212;
  --dm-Info-200: #86A7D3;
  --dm-on-Info-200: #121212;
  --dm-Info-300: #6D95CB;
  --dm-on-Info-300: #121212;
  --dm-Info-400: #5282C3;
  --dm-on-Info-400: #121212;
  --dm-Info-500: #307CDD;
  --dm-on-Info-500: #121212;
  --dm-Info-600: #15449C;
  --dm-on-Info-600: rgba(255,255,255,0.6);
  --dm-Info-700: #0035AB;
  --dm-on-Info-700: rgba(255,255,255,0.6);
  --dm-Info-800: #002295;
  --dm-on-Info-800: rgba(255,255,255,0.6);
  --dm-Info-900: #000B76;
  --dm-on-Info-900: rgba(255,255,255,0.6);
  /* Inputs */
  --dm-input: color-mix(in lch, var(--dm-background), var(--white) 4%);
  --dm-on-input: rgba(255,255,255,0.6);
  /* Hotlinks */
  --dm-hotlink: #3384F2;
  --dm-hotlink-decoration: underline;
  --dm-hotlink-hover-decoration: none;
  /* Hotlink variations based on background color */
  --dm-hotlinkOnWhite: #0066EF;
  --dm-hotlinkOnWhite-decoration: none;
  --dm-hotlinkOnWhite-hover-decoration: underline;
  --dm-hotlinkOnBlack: #0066EF;
  --dm-hotlinkOnBlack-decoration: none;
  --dm-hotlinkOnBlack-hover-decoration: underline;
  --dm-hotlinkOnTertiary: #FFFFFF;
  --dm-hotlinkOnTertiary-decoration: none;
  --dm-hotlinkOnTertiary-hover-decoration: underline;
  /* Buttons */
  --dmbuttonOnWhite: #121212;
  --dmonbuttonOnWhite: var(--dm-white);
  --dmbuttonHalfOnWhite: rgba(18,18,18,0.5);
  --dmbuttonOnBlack: var(--dm-Info-400);
  --dmonbuttonOnBlack: #121212;
  --dmbuttonHalfOnBlack: var(--dm-Info-400);
  --dmbuttonOnTertiary: var(--lm-buttonOnTertiary);
  --dmonbuttonOnTertiary: var(--lm-onbuttonOnTertiary);
  --dmbuttonHalfOnTertiary: var(--lm-buttonHalfOnTertiary));
  --dmbuttonOnGradient1: #121212;
  --dmonbuttonOnGradient1: var(--dm-white);
  --dmbuttonHalfOnGradient1: rgba(18,18,18,0.5);
  --dmbuttonOnGradient2: #121212;
  --dmonbuttonOnGradient2: var(--dm-white);
  --dmbuttonHalfOnGradient2: rgba(18,18,18,0.5);
  --dmbuttonOnGradient3: rgba(255,255,255,0.6);
  --dmonbuttonOnGradient3: #121212;
  --dmbuttonHalfOnGradient3: rgba(255,255,255,0.3);
  --dm-button: var(--dm-Info-400);
  --dm-on-button: #121212;
  --dm-button-half: rgba(82,130,195,0.5);
  /* Icons */
  --dm-icon: var(--secondary-500);
  --dm-on-icon: #121212;
  --dm-icon-half: rgba(169,101,213,0.5);
  --dmiconOnWhite: #121212;
  --dmoniconOnWhite: var(--dm-white);
  --dmiconHalfOnWhite: rgba(18,18,18,0.5);
  --dmiconOnBlack: var(--dm-secondary-400);
  --dmoniconOnBlack: #121212;
  --dmiconHalfOnBlack: var(--dm-secondary-400);
  --dmiconOnTertiary: rgba(255,255,255,0.6);
  --dmoniconOnTertiary: #121212;
  --dmiconHalfOnTertiary: rgba(255,255,255,0.3);
  --dmiconOnGradient1: #121212;
  --dmoniconOnGradient1: var(--dm-white);
  --dmiconHalfOnGradient1: rgba(18,18,18,0.5);
  --dmiconOnGradient2: #121212;
  --dmoniconOnGradient2: var(--dm-white);
  --dmiconHalfOnGradient2: rgba(18,18,18,0.5);
  --dmiconOnGradient3: rgba(255,255,255,0.6);
  --dmoniconOnGradient3: #121212;
  --dmiconHalfOnGradient3: rgba(255,255,255,0.3);
  /* Charting Colors */
  --dm-line-color: rgba(255,255,255,0.05);
  /* Surface */
  --dm-surface: #121212;
  /* Theme Colors */
  --dm-primary: #AA56DD;
  --dm-primary-half: rgba(170,86,221,0.5);
  --dm-primary-quarter: rgba(170,86,221,0.25);
  --dm-on-primary: #121212;
  --dm-on-primary-half: rgba(18,18,18,0.5);
  --dm-on-primary-quarter: rgba(18,18,18,0.25);
  --dm-primary-0: #D8BAEC;
  --dm-on-primary-0: #121212;
  --dm-primary-100: #CCA5E6;
  --dm-on-primary-100: #121212;
  --dm-primary-200: #C190E1;
  --dm-on-primary-200: #121212;
  --dm-primary-300: #B57BDB;
  --dm-on-primary-300: #121212;
  --dm-primary-400: #A965D5;
  --dm-on-primary-400: #121212;
  --dm-primary-500: #AA56DD;
  --dm-on-primary-500: #121212;
  --dm-primary-600: #65328C;
  --dm-on-primary-600: rgba(255,255,255,0.6);
  --dm-primary-700: #5B2690;
  --dm-on-primary-700: rgba(255,255,255,0.6);
  --dm-primary-800: #3C1373;
  --dm-on-primary-800: rgba(255,255,255,0.6);
  --dm-primary-900: #1E0056;
  --dm-on-primary-900: rgba(255,255,255,0.6);
  --dm-secondary-0: #8FD4BE;
  --dm-on-secondary-0: #121212;
  --dm-secondary-100: #7BCDB3;
  --dm-on-secondary-100: #121212;
  --dm-secondary-200: #67C5A8;
  --dm-on-secondary-200: #121212;
  --dm-secondary-300: #53BD9C;
  --dm-on-secondary-300: #121212;
  --dm-secondary-400: #449F7F;
  --dm-on-secondary-400: #121212;
  --dm-secondary-500: #3D8B6B;
  --dm-on-secondary-500: #121212;
  --dm-secondary-600: #265536;
  --dm-on-secondary-600: rgba(255,255,255,0.6);
  --dm-secondary-700: #194D2F;
  --dm-on-secondary-700: rgba(255,255,255,0.6);
  --dm-secondary-800: #0C3416;
  --dm-on-secondary-800: rgba(255,255,255,0.6);
  --dm-secondary-900: #001D00;
  --dm-on-secondary-900: rgba(255,255,255,0.6);
  --dm-accent: #CCA5E6;
  --dm-on-accent: #121212;
  --dm-accent-0: #D8BAEC;
  --dm-on-accent-0: #121212;
  --dm-accent-100: #CCA5E6;
  --dm-on-accent-100: #121212;
  --dm-accent-200: #C190E1;
  --dm-on-accent-200: #121212;
  --dm-accent-300: #B57BDB;
  --dm-on-accent-300: #121212;
  --dm-accent-400: #A965D5;
  --dm-on-accent-400: #121212;
  --dm-accent-500: #AA56DD;
  --dm-on-accent-500: #121212;
  --dm-accent-600: #65328C;
  --dm-on-accent-600: rgba(255,255,255,0.6);
  --dm-accent-700: #5B2690;
  --dm-on-accent-700: rgba(255,255,255,0.6);
  --dm-accent-800: #3C1373;
  --dm-on-accent-800: rgba(255,255,255,0.6);
  --dm-accent-900: #1E0056;
  --dm-on-accent-900: rgba(255,255,255,0.6);
  --dm-tertiary: #D8BAEC;
  --dm-on-tertiary: #121212;
  --dm-tertiary-0: #D8BAEC;
  --dm-on-tertiary-0: #121212;
  --dm-tertiary-100: #CCA5E6;
  --dm-on-tertiary-100: #121212;
  --dm-tertiary-200: #C190E1;
  --dm-on-tertiary-200: #121212;
  --dm-tertiary-300: #B57BDB;
  --dm-on-tertiary-300: #121212;
  --dm-tertiary-400: #A965D5;
  --dm-on-tertiary-400: #121212;
  --dm-tertiary-500: #AA56DD;
  --dm-on-tertiary-500: #121212;
  --dm-tertiary-600: #65328C;
  --dm-on-tertiary-600: rgba(255,255,255,0.6);
  --dm-tertiary-700: #5B2690;
  --dm-on-tertiary-700: rgba(255,255,255,0.6);
  --dm-tertiary-800: #3C1373;
  --dm-on-tertiary-800: rgba(255,255,255,0.6);
  --dm-tertiary-900: #1E0056;
  --dm-on-tertiary-900: rgba(255,255,255,0.6);

  [data-mode="light"] {
    /* Core Colors */
    --body-bg: var(--lm-body-bg);
    --border-opacity: 15%;
    --overlay-opacity: .35;
    --alt-adjust: var(--white);
    --white: var(--lm-white);
    --on-white: var(--lm-on-white);
    --on-black: var(--lm-on-black);
    --nearblack: var(--lm-nearblack);
    --on-nearblack: var(--lm-on-nearblack);
    --textLight: var(--lm-textLight);
    --textDark: var(--lm-textDark);
    --gray-0: var(--lm-gray-0);
    --gray-100: var(--lm-gray-100);
    --gray-200: var(--lm-gray-200);
    --gray-300: var(--lm-gray-300);
    --gray-400: var(--lm-gray-400);
    --gray-500: var(--lm-gray-500);
    --gray-600: var(--lm-gray-600);
    --gray-700: var(--lm-gray-700);
    --gray-800: var(--lm-gray-800);
    --gray-900: var(--lm-gray-900);
    --on-gray: var(--lm-on-gray);
    --on-gray-0: var(--lm-on-gray-0);
    --on-gray-100: var(--lm-on-gray-100);
    --on-gray-200: var(--lm-on-gray-200);
    --on-gray-300: var(--lm-on-gray-300);
    --on-gray-400: var(--lm-on-gray-400);
    --on-gray-500: var(--lm-on-gray-500);
    --on-gray-600: var(--lm-on-gray-600);
    --on-gray-700: var(--lm-on-gray-700);
    --on-gray-800: var(--lm-on-gray-800);
    --on-gray-900: var(--lm-on-gray-900);
    --background-tertiary: var(--lm-background-tertiary);
    --on-background-tertiary: var(--lm-on-background-tertiary);
    --on-background-secondary: var(--lm-on-background-secondary);
    /* Backgrounds */
    --background: var(--lm-background);
    --alt-background: var(--lm-alt-background);
    --on-background: var(--lm-on-background);
    --background-tertiary: var(--lm-background-tertiary);
    --background-on-tertiary: var(--lm-background-on-tertiary);
    /* Gradients */
    --gradient1-a: var(--lm-gradient1-a);
    --on-gradient1-a: var(--lm-on-gradient1-a);
    --gradient1-b: var(--lm-gradient1-b);
    --on-gradient1-b: var(--lm-on-gradient1-b);
    --gradient-1: var(--lm-gradient-1);
    --on-gradient-1: var(--lm-on-gradient-1);
    --gradient2-a: var(--lm-gradient2-a);
    --on-gradient2-a: var(--lm-on-gradient2-a);
    --gradient2-b: var(--lm-gradient2-b);
    --on-gradient2-b: var(--lm-on-gradient2-b);
    --gradient-2: var(--lm-gradient-2);
    --on-gradient-2: var(--lm-on-gradient-2);
    --gradient3-a: var(--lm-gradient3-a);
    --on-gradient3-a: var(--lm-on-gradient3-a);
    --gradient3-b: var(--lm-gradient3-b);
    --on-gradient3-b: var(--lm-on-gradient3-b);
    --gradient-3: var(--lm-gradient-3);
    --on-gradient-3: var(--lm-on-gradient-3);
    /* Elevations */
    --elevations-bg-0: var(--lm-background);
    --on-elevations-bg-0: var(--lm-on-background);
    --elevations-bg-1: var(--lm-background);
    --on-elevations-bg-1: var(--lm-on-background);
    --elevations-bg-2: var(--lm-background);
    --on-elevations-bg-2: var(--lm-on-background);
    --elevations-bg-3: var(--lm-background);
    --on-elevations-bg-3: var(--lm-on-background);
    --elevations-bg-4: var(--lm-background);
    --on-elevations-bg-4: var(--lm-on-background);
    --elevations-bg-5: var(--lm-background);
    --on-elevations-bg-5: var(--lm-on-background);
    --elevations-bg-6: var(--lm-background);
    --on-elevations-bg-6: var(--lm-on-background);
    --elevations-bg-7:var(--lm-background);
    --on-elevations-bg-7: var(--lm-on-background);
    --elevations-bg-8:var(--lm-background);
    --on-elevations-bg-8: var(--lm-on-background);
    --elevations-bg-9:var(--lm-background);
    --on-elevations-bg-9: var(--lm-on-background);
    /* Border Color */
    --border: var(--lm-border);
    /* Text Decorations */
    --text-gradient-a: var(--lm-text-gradient-a);
    --text-gradient-b: var(--lm-text-gradient-b);
    --text-gradient: var(--lm-text-gradient);
    --color-drop: var(--lm-color-drop);
    /* Surface */
    --on-surface: var(--lm-on-surface);
    --on-surface: var(--lm-on-surface);
    /* States */
    --info: var(--lm-info);
    --on-info: var(--lm-on-info);
    --success: var(--lm-success);
    --on-success: var(--lm-on-success);
    --warning: var(--lm-warning);
    --on-warning: var(--lm-on-warning);
    --danger: var(--lm-danger);
    --on-danger: var(--lm-on-danger);
    /* images */
    --image-opacity: 1;
    /* Inputs */
    --input: var(--lm-input);
    --on-input: var(--lm-on-input);
    --input-disabled: var(--lm-input-disabled);
    --input-hover: var(--lm-input-hover);
    /* Hotlinks */
    --hotlink: var(--lm-hotlink);
    --hotlink-decoration: var(--lm-hotlink-decoration);
    --hotlink-hover-decoration: var(--lm-hotlink-hover-decoration);
    /* Hotlink variations based on background color */
    --hotlinkOnWhite: var(--lm-hotlinkOnWhite);
    --hotlinkOnWhite-decoration: var(--lm-hotlinkOnWhite-decoration);
    --hotlinkOnWhite-hover-decoration: var(--lm-hotlinkOnWhite-hover-decoration);
    --hotlinkOnBlack: var(--lm-hotlinkOnBlack);
    --hotlinkOnBlack-decoration: var(--lm-hotlinkOnBlack-decoration);
    --hotlinkOnBlack-hover-decoration: var(--lm-hotlinkOnBlack-hover-decoration);
    --hotlinkOnTertiary: var(--lm-hotlinkOnTertiary);
    --hotlinkOnTertiary-decoration: var(--lm-hotlinkOnTertiary-decoration);
    --hotlinkOnTertiary-hover-decoration: var(--lm-hotlinkOnTertiary-hover-decoration);
  /* Buttons */
    --buttonOnWhite: var(--lm-buttonOnWhite);
    --onbuttonOnWhite: var(--lm-onbuttonOnWhite);
    --buttonHalfOnWhite: var(--lm-buttonHalfOnWhite);
    --buttonOnBlack: var(--lm-buttonOnBlack);
    --onbuttonOnBlack: var(--lm-onbuttonOnBlack);
    --buttonHalfOnBlack: var(--lm-buttonHalfOnBlack);
    --buttonOnTertiary: var(--lm-buttonOnTertiary);
    --onbuttonOnTertiary: var(--lm-onbuttonOnTertiary);
    --buttonHalfOnTertiary: var(--lm-onbuttonOnTertiary);
    --buttonOnGradient1: var(--lm-buttonOnGradient1);
    --onbuttonOnGradient1: var(--lm-onbuttonOnGradient1);
    --buttonHalfOnGradient1: var(--lm-buttonHalfOnGradient1);
    --buttonOnGradient2: var(--lm-buttonOnGradient2);
    --onbuttonOnGradient2: var(--lm-onbuttonOnGradient2);
    --buttonHalfOnGradient2: var(--lm-buttonHalfOnGradient2);
    --buttonOnGradient3: var(--lm-buttonOnGradient3);
    --onbuttonOnGradient3: var(--lm-onbuttonOnGradient3);
    --buttonHalfOnGradient3: var(--lm-buttonHalfOnGradient3);
    --button: var(--lm-button);
    --on-button: var(--lm-on-button);
    --button-half: var(--lm-button-half);
    /* Icons */
    --icon: var(--lm-icon);
    --on-icon: var(--lm-on-icon);
    --icon-half: var(--lm-icon-half);
    --iconOnWhite: var(--lm-iconOnWhite);
    --oniconOnWhite: var(--lm-oniconOnWhite);
    --iconHalfOnWhite: var(--lm-iconHalfOnWhite);
    --iconOnBlack: var(--lm-iconOnBlack);
    --oniconOnBlack: var(--lm-oniconOnBlack);
    --iconHalfOnBlack: var(--lm-iconHalfOnBlack);
    --iconOnTertiary: var(--lm-iconOnTertiary);
    --oniconOnTertiary: var(--lm-oniconOnTertiary);
    --iconHalfOnTertiary: var(--lm-iconHalfOnTertiary);
    --iconOnGradient1: var(--lm-iconOnGradient1);
    --oniconOnGradient1: var(--lm-oniconOnGradient1);
    --iconHalfOnGradient1: var(--lm-iconHalfOnGradient1);
    --iconOnGradient2: var(--lm-iconOnGradient2);
    --oniconOnGradient2: var(--lm-oniconOnGradient2);
    --iconHalfOnGradient2: var(--lm-iconHalfOnGradient2);
    --iconOnGradient3: var(--lm-iconOnGradient3);
    --oniconOnGradient3: var(--lm-oniconOnGradient3);
    --iconHalfOnGradient3: var(--lm-iconHalfOnGradient3);
    /* Glow Colors */
    --white-glow-bright: rgba(255,255,255,.5);
    --white-glow-dim: rgba(255,255,255,.3);
    --white-glow-dimmer: rgba(255,255,255,.1);
    --bevel-light-opacity: 0.2;
    /* Charting Colors */
    --line-color: var(--lm-line-color);
    /* Surface */
    --surface: var(--lm-surface);
    /* Theme Colors */
    --primary: var(--lm-primary);
    --primary-half: var(--lm-primary-half);
    --primary-quarter: var(--lm-primary-quarter);
    --on-primary: var(--lm-on-primary);
    --on-primary-half: var(--lm-on-primary-half);
    --on-primary-quarter: var(--lm-on-primary-quarter);
    --primary-0: var(--lm-primary-0:);
    --on-primary-0: var(-dm-on-primary-0);
    --primary-100: var(-dm-primary-100);
    --on-primary-100: var(--lm-on-primary-100);
    --primary-200: var(-dm-primary-200);
    --on-primary-200: var(--lm-on-primary-200);
    --primary-300: var(--lm-primary-300);
    --on-primary-300: var(--lm-on-primary-300);
    --primary-400: var(--lm-primary-400);
    --on-primary-400: var(--lm-on-primary-400);
    --primary-500: var(--lm-primary-500);
    --on-primary-500: var(--lm-on-primary-500);
    --primary-600: var(--lm-primary-600);
    --on-primary-600: var(--lm-on-primary-600);
    --primary-700: var(--lm-primary-700);
    --on-primary-700: var(--lm-on-primary-700);
    --primary-800: var(--lm-primary-800);
    --on-primary-800: var(--lm-on-primary-800);
    --primary-900: var(-dm-primary-900);
    --on-primary-900: var(--lm-on-primary-900);
    --secondary: var(--lm-secondary);
    --on-secondary: var(--lm-on-secondary);
    --secondary-0: var(--lm-secondary-0);
    --on-secondary-0: var(--lm-on-secondary-0);
    --secondary-100: var(--lm-secondary-100);
    --on-secondary-100: var(--lm-on-secondary-100);
    --secondary-200: var(--lm-secondary-200);
    --on-secondary-200: var(--lm-on-secondary-200);
    --secondary-300: var(--lm-secondary-300);
    --on-secondary-300: var(--lm-on-secondary-300);
    --secondary-400: var(--lm-secondary-400);
    --on-secondary-400: var(--lm-on-secondary-400);
    --secondary-500: var(--lm-secondary-500);
    --on-secondary-500: var(--lm-on-secondary-500);
    --secondary-600: var(--lm-secondary-600);
    --on-secondary-600: var(--lm-secondary-600);
    --secondary-700: var(--lm-secondary-700);
    --on-secondary-700: var(--lm-on-secondary-700);
    --secondary-800: var(--lm-secondary-800);
    --on-secondary-800: var(--lm-on-secondary-800);
    --secondary-900: var(--lm-secondary-900);
    --on-secondary-900: var(--lm-on-secondary-900);
    --tertiary: var(--lm-tertiary);
    --on-tertiary: var(--lm-on-tertiary);
    --tertiary-0: var(--lm-tertiary-0);
    --on-tertiary-0: var(--lm-on-tertiary-0);
    --tertiary-100: var(--lm-tertiary-100);
    --on-tertiary-100: var(--lm-on-tertiary-100);
    --tertiary-200: var(--lm-tertiary-200);
    --on-tertiary-200: var(--lm-on-tertiary-200);
    --tertiary-300: var(--lm-tertiary-300);
    --on-tertiary-300: var(--lm-on-tertiary-300);
    --tertiary-400: var(--lm-tertiary-400);
    --on-tertiary-400: var(--lm-on-tertiary-400);
    --tertiary-500: var(--lm-tertiary-500);
    --on-tertiary-500: var(--lm-on-tertiary-500);
    --tertiary-600: var(--lm-tertiary-600);
    --on-tertiary-600: var(--lm-on-tertiary-600);
    --tertiary-700: var(--lm-tertiary-700);
    --on-tertiary-700: var(--lm-on-tertiary-700);
    --tertiary-800: var(--lm-tertiary-800);
    --on-tertiary-800: var(--lm-on-tertiary-800);
    --tertiary-900: var(--lm-tertiary-900);
    --on-tertiary-900: var(--lm-on-tertiary-900);
    --accent: var(--lm-accent);
    --on-accent: var(--lm-on-accent);
    --accent-0: var(--lm-accent-0);
    --on-accent-0: var(--lm-on-accent-0);
    --accent-100: var(--lm-accent-100);
    --on-accent-100: var(--lm-on-accent-100);
    --accent-200: var(--lm-accent-200);
    --on-accent-200: var(--lm-on-accent-200);
    --accent-300: var(--lm-accent-300);
    --on-accent-300: var(--lm-on-accent-300);
    --accent-400: var(--lm-accent-400);
    --on-accent-400: var(--lm-on-accent-400);
    --accent-500: var(--lm-accent-500);
    --on-accent-500: var(--lm-on-accent-500);
    --accent-600: var(--lm-accent-600);
    --on-accent-600: var(--lm-on-accent-600);
    --accent-700: var(--lm-accent-700);
    --on-accent-700: var(--lm-on-accent-700);
    --accent-800: var(--lm-accent-800);
    --on-accent-800: var(--lm-on-accent-800);
    --accent-900: var(--lm-accent-900);
    --on-accent-900: var(--lm-on-accent-900);
    /* border opacity */
    --border-opacity: 15%;
    /* Primary background */
    --primary-background: var(--lm-background);
    --primary-alt-background: var(--lm-alt-background);
    --primary-on-background: var(--lm-on-background);
    /* Button */
    --primary-button: var(--button);
    --primary-on-button: var(--on-button);
    --primary-button-half: var(--button-half);
    /* Icons */
    --primary-icon: var(--icon);
    --primary-on-icon: var(--on-icon);
    --primary-icon-half: var(--icon-half);
    /* Hotlink */
    --primary-hotlink: var(--lm-hotlink);
    --primary-hotlink-decoration: var(--lm-hotlink-decoration);
    --primary-hotlink-hover-decoration: var(--lm-hotlink-hover-decoration);
    /* Inputs */
    --primary-input: var(--lm-input);
    --primary-on-input: var(--lm-on-input);
    --primary-input-border: color-mix(in lch, var(--background), var(--on-background) 15%);
    /* Text Decoration */
    --primary-text-gradient-a: var(--text-gradient-a);
    --primary-text-gradient-b: var(--text-gradient-b);
    --primary-color-drop: var(--color-drop);

    /* bevel */
    --bevel-1: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 1)))),
     inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 1)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
     rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 1))));
    --bevel-2: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 2)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 2)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 2))));
    --bevel-3: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 3)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 3)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 3)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 3))));
    --bevel-4: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 4)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 4)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 4)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 4))));
    --bevel-5: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 5)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 5)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 5)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 5))));
    --bevel-6: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 6)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 6)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 6)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 6))));
    --bevel-7: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 7)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 7)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 7)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 7))));
    --bevel-8: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 8)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 8)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 8)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 8))));
    --bevel-9:
    inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 9)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 9)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 9)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 9))));
    /* reverse bevel */
    --reverse-bevel-1: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 1)))),
     inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 1)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
     rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 1))));
    --reverse-bevel-2: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 2)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 2)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255 ,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 2))));
    --reverse-bevel-3: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 3)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 3)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 3)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 3))));
    --reverse-bevel-4: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 4)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 4)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 4)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 4))));
    --reverse-bevel-5: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 5)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 5)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 5)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 5))));
    --reverse-bevel-6: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 6)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 6)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 6)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 6))));
    --reverse-bevel-7: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 7)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 7)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 7)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 7))));
    --reverse-bevel-8: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 8)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 8)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 8)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 8))));
    --reverse-bevel-9: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 9)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 9)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 9)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 9))));
    /* Ridges  */
    --ridge: 2px;
    --ridge-1: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1px 1px 1px 1px rgba(0,0,0,.3),
     calc(0px - var(--ridge)) calc(0px - var(--ridge)) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * 1)  calc(var(--ridge) * 1) calc(var(--ridge) * 1) calc(var(--ridge) * 1) rgba(0,0,0,.3),
     0px 0px 0px var(--ridge)  var(--white-glow-bright);
    --ridge-2: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1.5px 1.5px 1px 1px rgba(0,0,0,.3),
     calc(0px - calc(var(--ridge) * var(--change-2)))  calc(0px - calc(var(--ridge) * var(--change-2))) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * var(--change-2))  calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) rgba(0,0,0,.3),
    0px 0px 0px calc(var(--ridge) * var(--change-2))  var(--white-glow-bright);
    --ridge-3: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), 1px 1px 0 0 var(--white-glow-dim),
     inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1))
     rgba(0,0,0,.3),
     calc(0px - calc(var(--ridge) * var(--change-3)))  calc(0px - calc(var(--ridge) * var(--change-3))) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * var(--change-3))  calc(var(--ridge) * var(--change-3)) calc(var(--ridge) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) rgba(0,0,0,.3),
    0px 0px 0px calc(var(--ridge) * var(--change-3))  var(--white-glow-bright);
    --ridge-4: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2))
     rgba(0,0,0,.3),
     calc(0px - calc(var(--ridge) * var(--change-4)))  calc(0px - calc(var(--ridge) * var(--change-4))) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * var(--change-4))  calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) rgba(0,0,0,.3),
     0px 0px 0px calc(var(--ridge) * var(--change-4))  var(--white-glow-bright);
    --ridge-5: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3))
     rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-5)))  calc(0px - calc(var(--ridge) * var(--change-5))) var(--ridge) var(--ridge) var(--white-glow-dim),
      calc(var(--ridge) * var(--change-5))  calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) rgba(0,0,0,.3),
      0px 0px 0px calc(var(--ridge) * var(--change-5))  var(--white-glow-bright);
    --ridge-6: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4))
     rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-6)))  calc(0px - calc(var(--ridge) * var(--change-6))) var(--ridge) var(--ridge) var(--white-glow-dim),
      calc(var(--ridge) * var(--change-6))  calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) rgba(0,0,0,.3),
      0px 0px 0px calc(var(--ridge) * var(--change-6))  var(--white-glow-bright);
    --ridge-7: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5))
     rgba(0,0,0,.3),
     calc(0px - calc(var(--ridge) * var(--change-7)))  calc(0px - calc(var(--ridge) * var(--change-7))) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * var(--change-7))  calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-7)) calc(var(--ridge) * var(--change-7)) rgba(0,0,0,.3),
    0px 0px 0px calc(var(--ridge) * var(--change-7))  var(--white-glow-bright);
    --ridge-8: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6))
     rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-8)))  calc(0px - calc(var(--ridge) * var(--change-8))) var(--ridge) var(--ridge) var(--white-glow-dim),
      calc(var(--ridge) * var(--change-8))  calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-8)))  calc(var(--ridge) * var(--change-8)) var(--ridge) var(--ridge) rgba(0,0,0,.08),
      calc(var(--ridge) * var(--change-8))  calc(0px - calc(var(--ridge) * var(--change-8))) var(--ridge) var(--ridge) rgba(0,0,0,.08),
      0px 0px 0px calc(var(--ridge) * var(--change-8))  var(--white-glow-bright);

    --ridge-9: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7))
     rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-9)))  calc(0px - calc(var(--ridge) * var(--change-9))) var(--ridge) var(--ridge) var(--white-glow-dim),
      calc(var(--ridge) * var(--change-9))  calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-9)))  calc(var(--ridge) * var(--change-9)) var(--ridge) var(--ridge) rgba(0,0,0,.08),
      calc(var(--ridge) * var(--change-9))  calc(0px - calc(var(--ridge) * var(--change-9))) var(--ridge) var(--ridge) rgba(0,0,0,.08),
      0px 0px 0px calc(var(--ridge) * var(--change-9))  var(--white-glow-bright);
    /* Groove Shadows */
    --groove-1: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-1),
    calc(0px - calc(var(--elevation-horizontal) * 1))  calc(0px - calc(var(--elevation-vertical) * 1)) calc(var(--elevation-blur) * 1) calc(var(--elevation-spread) * 1) rgba(0,0,0,.3),
    calc(var(--elevation-horizontal) * 1)  calc(var(--elevation-vertical) * 1) calc(var(--elevation-blur) * 1) calc(var(--elevation-spread) * 1) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * 1))  calc(var(--elevation-vertical) * 1) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * 1)  calc(0px - calc(var(--elevation-vertical) * 1)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-2: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-2),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-2)))  calc(0px - calc(var(--elevation-vertical) * var(--change-2))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-2))  calc(var(--elevation-vertical) * var(--change-2)) calc(var(--elevation-blur) * var(--change-2)) calc(var(--elevation-spread) * var(--change-2)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-2)))  calc(var(--elevation-vertical) * var(--change-2)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-2))  calc(0px - calc(var(--elevation-vertical) * var(--change-2))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-3: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-3),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-3)))  calc(0px - calc(var(--elevation-vertical) * var(--change-3))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-3))  calc(var(--elevation-vertical) * var(--change-3)) calc(var(--elevation-blur) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-3)))  calc(var(--elevation-vertical) * var(--change-3)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-3))  calc(0px - calc(var(--elevation-vertical) * var(--change-3))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-4: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-4),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-4)))  calc(0px - calc(var(--elevation-vertical) * var(--change-4))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-4))  calc(var(--elevation-vertical) * var(--change-4)) calc(var(--elevation-blur) * var(--change-4)) calc(var(--elevation-spread) * var(--change-4)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-4)))  calc(var(--elevation-vertical) * var(--change-4)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-4))  calc(0px - calc(var(--elevation-vertical) * var(--change-4))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-5: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-5),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-5)))  calc(0px - calc(var(--elevation-vertical) * var(--change-5))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-5))  calc(var(--elevation-vertical) * var(--change-5)) calc(var(--elevation-blur) * var(--change-5)) calc(var(--elevation-spread) * var(--change-5)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-5)))  calc(var(--elevation-vertical) * var(--change-5)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-5))  calc(0px - calc(var(--elevation-vertical) * var(--change-5))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-6: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-6),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-6)))  calc(0px - calc(var(--elevation-vertical) * var(--change-6))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-6))  calc(var(--elevation-vertical) * var(--change-6)) calc(var(--elevation-blur) * var(--change-6)) calc(var(--elevation-spread) * var(--change-6)) var(--white-glow-dim);
    --groove-7: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-7),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-7)))  calc(0px - calc(var(--elevation-vertical) * var(--change-7))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-7))  calc(var(--elevation-vertical) * var(--change-7)) calc(var(--elevation-blur) * var(--change-7)) calc(var(--elevation-spread) * var(--change-7)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-7)))  calc(var(--elevation-vertical) * var(--change-7)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-7))  calc(0px - calc(var(--elevation-vertical) * var(--change-7))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-8: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-8),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-8)))  calc(0px - calc(var(--elevation-vertical) * var(--change-8))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-8))  calc(var(--elevation-vertical) * var(--change-8)) var(--elevation-blur) var(--elevation-spread)  var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-8)))  calc(var(--elevation-vertical) * var(--change-8)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-8))  calc(0px - calc(var(--elevation-vertical) * var(--change-8))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-9: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-9),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-9)))  calc(0px - calc(var(--elevation-vertical) * var(--change-9))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3),
    calc(var(--elevation-horizontal) * var(--change-9))  calc(var(--elevation-vertical) * var(--change-9)) var(--elevation-blur) var(--elevation-spread)  var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-9)))  calc(var(--elevation-vertical) * var(--change-9)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-9))  calc(0px - calc(var(--elevation-vertical) * var(--change-9))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);

  }
  [data-mode="dark"] {
    --body-bg: var(--dm-body-bg);
    --border-opacity: 40%;
    --overlay-opacity: .70;
    --alt-adjust: var(--black);
    --white: var(--dm-white);
    --on-white: var(--dm-on-white);
    --on-black: var(--dm-on-black);
    --nearblack: #181818;
    --on-nearblack: var(--dm-on-nearblack);
    --textLight: var(--dm-textLight);
    --textDark: var(--dm-textDark);
    --gray-0: var(--dm-gray-0);
    --gray-100: var(--dm-gray-100);
    --gray-200: var(--dm-gray-200);
    --gray-300: var(--dm-gray-300);
    --gray-400: var(--dm-gray-400);
    --gray-500: var(--dm-gray-500);
    --gray-600: var(--dm-gray-600);
    --gray-700: var(--dm-gray-700);
    --gray-800: var(--dm-gray-800);
    --gray-900: var(--dm-gray-900);
    --on-gray: var(--dm-on-gray);
    --on-gray-0: var(--dm-on-gray-0);
    --on-gray-100: var(--dm-on-gray-100);
    --on-gray-200: var(--dm-on-gray-200);
    --on-gray-300: var(--dm-on-gray-300);
    --on-gray-400: var(--dm-on-gray-400);
    --on-gray-500: var(--dm-on-gray-500);
    --on-gray-600: var(--dm-on-gray-600);
    --on-gray-700: var(--dm-on-gray-700);
    --on-gray-800: var(--dm-on-gray-800);
    --on-gray-900: var(--dm-on-gray-900);
    /* Backgrounds */
    --primary-background: var(--dm-background);
    --primary-alt-background: var(--dm-alt-background);
    --primary-on-background: var(--dm-on-background);
    --background: var(--primaryDarkBG);
    --alt-background: var(--secondaryDarkBG);
    --backround-secondary: var(--secondaryDarkBG);
    --on-background: var(--white);
    --background-tertiary: var(--primary);
    --on-background-on-tertiary: var(--on-primary);
    /* Gradients */
    --gradient1-a: var(--dm-gradient1-a);
    --on-gradient1-a: var(--dm-on-gradient1-a);
    --gradient1-b: var(--dm-gradient1-b);
    --on-gradient1-b: var(--dm-on-gradient1-b);
    --gradient-1: var(--dm-gradient-1);
    --on-gradient-1: var(--dm-on-gradient-1);
    --gradient2-a: var(--dm-gradient2-a);
    --on-gradient2-a: var(--dm-on-gradient2-a);
    --gradient2-b: var(--dm-gradient2-b);
    --on-gradient2-b: var(--dm-on-gradient2-b);
    --gradient-2: var(--dm-gradient-2);
    --on-gradient-2: var(--dm-on-gradient-2);
    --gradient3-a: var(--dm-gradient3-a);
    --on-gradient3-a: var(--dm-on-gradient3-a);
    --gradient3-b: var(--dm-gradient3-b);
    --on-gradient3-b: var(--dm-on-gradient3-b);
    --gradient-3: var(--dm-gradient-3);
    --on-gradient-3: var(--dm-on-gradient-3);
    /* Elevations */
    --elevations-bg-0: color-mix(in lch, var(--background), var(--white) 0%);
    --on-elevations-bg-0: var(--white);
    --elevations-bg-1: color-mix(in lch, var(--background), var(--white) 5%);
    --on-elevations-bg-1: var(--on-elevation-bg-1);
    --elevations-bg-2: color-mix(in lch, var(--background), var(--white) 7%);
    --on-elevations-bg-2: var(--on-elevation-bg-2);
    --elevations-bg-3: color-mix(in lch, var(--background), var(--white) 8%);
    --on-elevations-bg-3: var(--on-elevation-bg-3);
    --elevations-bg-4: color-mix(in lch, var(--background), var(--white) 9%);
    --on-elevations-bg-4: var(--on-elevation-bg-4);
    --elevations-bg-5: color-mix(in lch, var(--background), var(--white) 11%);
    --on-elevations-bg-5: var(--on-elevation-bg-5);
    --elevations-bg-6: color-mix(in lch, var(--background), var(--white) 12%);
    --on-elevations-bg-6: var(--on-elevation-bg-6);
    --elevations-bg-7: color-mix(in lch, var(--background), var(--white) 14%);
    --on-elevations-bg-7: var(--on-elevation-bg-7);
    --elevations-bg-8: color-mix(in lch, var(--background), var(--white) 15%);
    --on-elevations-bg-8: var(--on-elevation-bg-8);
    --elevations-bg-9: color-mix(in lch, var(--background), var(--white) 16%);
    --on-elevations-bg-9: var(--on-elevation-bg-9);
    /* Text Decorations */
    --text-gradient-a: var(--dm-text-gradient-a);
    --text-gradient-b: var(--dm-text-gradient-b);
    --text-gradient: var(--dm-text-gradient);
    --color-drop: var(--dm-color-drop);
    /* Surface */
    --on-surface: var(--dm-on-surface);
    --on-surface: var(--dm-on-surface);
   /* States */
    --info: var(--dm-info);
    --on-info: var(--dm-on-info);
    --success: var(--dm-success);
    --on-success: var(--dm-on-success);
    --warning: var(--dm-warning);
    --on-warning: var(--dm-on-warning);
    --danger: var(--dm-danger);
    --on-danger: var(--dm-on-danger);
    /* images */
    --image-opacity: .65;
    /* Border */
    --border: color-mix(in lch, var(--background), var(--on-background) 20%);
    /* Inputs */
    --input: var(--dm-input);
    --input-border: color-mix(in lch, var(--dm-background), var(--dm-on-background) 15%);
    --on-input: var(--dm-on-background);
    /* Hotlinks */
    --hotlink: var(--dm-hotlink);
    --hotlink-decoration: var(--dm-hotlink-decoration);
    --hotlink-hover-decoration: var(--dm-hotlink-hover-decoration);
    /* Hotlink variations based on background color */
    --hotlinkOnWhite: var(--black);
    --hotlinkOnWhite-decoration: underline;
    --hotlinkOnWhite-hover-decoration: none;
    --hotlinkOnBlack: var(--dm-hotlinkOnBlack);
    --hotlinkOnBlack-decoration: var(--dm-hotlinkOnBlack-decoration);
    --hotlinkOnBlack-hover-decoration: var(--dm-hotlinkOnBlack-hover-decoration);
    --hotlinkOnTertiary: var(--dm-hotlinkOnTertiary);
    --hotlinkOnTertiary-decoration: var(--dm-hotlinkOnTertiary-decoration);
    --hotlinkOnTertiary-hover-decoration: var(--dm-hotlinkOnTertiary-hover-decoration);
   /* Buttons */
    --buttonOnWhite: var(--dmbuttonOnWhite);
    --onbuttonOnWhite: var(--dmonbuttonOnWhite);
    --buttonHalfOnWhite: var(--dmbuttonHalfOnWhite);
    --buttonOnBlack: var(--dmbuttonOnBlack);
    --onbuttonOnBlack: var(--dmonbuttonOnBlack);
    --buttonHalfOnBlack: var(--dmbuttonHalfOnBlack);

    --buttonOnGradient1: var(--dmbuttonOnGradient1);
    --onbuttonOnGradient1: var(--dmonbuttonOnGradient1);
    --buttonHalfOnGradient1: var(--dmbuttonHalfOnGradient1);
    --buttonOnGradient2: var(--dmbuttonOnGradient2);
    --onbuttonOnGradient2: var(--dmonbuttonOnGradient2);
    --buttonHalfOnGradient2: var(--dmbuttonHalfOnGradient2);
    --buttonOnGradient3: var(--dmbuttonOnGradient3);
    --onbuttonOnGradient3: var(--dmonbuttonOnGradient3);
    --buttonHalfOnGradient3: var(--dmbuttonHalfOnGradient3);
    --button: var(--dm-button);
    --on-button: var(--dm-on-button);
    --button-half: var(--dm-button-half);
    /* Icons */
    --icon: var(--dm-icon);
    --on-icon: var(--dm-on-icon);
    --icon-half: var(--dm-icon-half);
    --iconOnWhite: var(--dmiconOnWhite);
    --oniconOnWhite: var(--dmoniconOnWhite);
    --iconHalfOnWhite: var(--dmiconHalfOnWhite);
    --iconOnBlack: var(--dmiconOnBlack);
    --oniconOnBlack: var(--dmoniconOnBlack);
    --iconHalfOnBlack: var(--dmiconHalfOnBlack);
    --iconOnTertiary: var(--dm-on-primary);
    --oniconOnTertiary: var(--dm-on-primary);
    --iconHalfOnTertiary: var(--dm-on-primary);
    --iconOnGradient1: var(--dmiconOnGradient1);
    --oniconOnGradient1: var(--dmoniconOnGradient1);
    --iconHalfOnGradient1: var(--dmiconHalfOnGradient1);
    --iconOnGradient2: var(--dmiconOnGradient2);
    --oniconOnGradient2: var(--dmoniconOnGradient2);
    --iconHalfOnGradient2: var(--dmiconHalfOnGradient2);
    --iconOnGradient3: var(--dmiconOnGradient3);
    --oniconOnGradient3: var(--dmoniconOnGradient3);
    --iconHalfOnGradient3: var(--dmiconHalfOnGradient3);
    /* Glow Colors */
    --white-glow-bright: rgba(255,255,255,.5);
    --white-glow-dim: rgba(255,255,255,.3);
    --white-glow-dimmer: rgba(255,255,255,.1);
    --bevel-light-opacity: 0.2;
    /* Charting Colors */
    --line-color: var(--dm-line-color);
    /* Surface */
    --surface: var(--dm-surface);
    /* Theme Colors */
    --primary: var(--dm-primary);
    --primary-half: var(--dm-primary-half);
    --primary-quarter: var(--dm-primary-quarter);
    --on-primary: var(--dm-on-primary);
    --on-primary-half: var(--dm-on-primary-half);
    --on-primary-quarter: var(--dm-on-primary-quarter);
    --primary-0: var(--dm-primary-0:);
    --on-primary-0: var(-dm-on-primary-0);
    --primary-100: var(-dm-primary-100);
    --on-primary-100: var(--dm-on-primary-100);
    --primary-200: var(-dm-primary-200);
    --on-primary-200: var(--dm-on-primary-200);
    --primary-300: var(--dm-primary-300);
    --on-primary-300: var(--dm-on-primary-300);
    --primary-400: var(--dm-primary-400);
    --on-primary-400: var(--dm-on-primary-400);
    --primary-500: var(--dm-primary-500);
    --on-primary-500: var(--dm-on-primary-500);
    --primary-600: var(--dm-primary-600);
    --on-primary-600: var(--dm-on-primary-600);
    --primary-700: var(--dm-primary-700);
    --on-primary-700: var(--dm-on-primary-700);
    --primary-800: var(--dm-primary-800);
    --on-primary-800: var(--dm-on-primary-800);
    --primary-900: var(-dm-primary-900);
    --on-primary-900: var(--dm-on-primary-900);
    --secondary: var(--dm-secondary);
    --on-secondary: var(--dm-on-secondary);
    --secondary-0: var(--dm-secondary-0);
    --on-secondary-0: var(--dm-on-secondary-0);
    --secondary-100: var(--dm-secondary-100);
    --on-secondary-100: var(--dm-on-secondary-100);
    --secondary-200: var(--dm-secondary-200);
    --on-secondary-200: var(--dm-on-secondary-200);
    --secondary-300: var(--dm-secondary-300);
    --on-secondary-300: var(--dm-on-secondary-300);
    --secondary-400: var(--dm-secondary-400);
    --on-secondary-400: var(--dm-on-secondary-400);
    --secondary-500: var(--dm-secondary-500);
    --on-secondary-500: var(--dm-on-secondary-500);
    --secondary-600: var(--dm-secondary-600);
    --on-secondary-600: var(--dm-secondary-600);
    --secondary-700: var(--dm-secondary-700);
    --on-secondary-700: var(--dm-on-secondary-700);
    --secondary-800: var(--dm-secondary-800);
    --on-secondary-800: var(--dm-on-secondary-800);
    --secondary-900: var(--dm-secondary-900);
    --on-secondary-900: var(--dm-on-secondary-900);
    --tertiary: var(--dm-tertiary);
    --on-tertiary: var(--dm-on-tertiary);
    --tertiary-0: var(--dm-tertiary-0);
    --on-tertiary-0: var(--dm-on-tertiary-0);
    --tertiary-100: var(--dm-tertiary-100);
    --on-tertiary-100: var(--dm-on-tertiary-100);
    --tertiary-200: var(--dm-tertiary-200);
    --on-tertiary-200: var(--dm-on-tertiary-200);
    --tertiary-300: var(--dm-tertiary-300);
    --on-tertiary-300: var(--dm-on-tertiary-300);
    --tertiary-400: var(--dm-tertiary-400);
    --on-tertiary-400: var(--dm-on-tertiary-400);
    --tertiary-500: var(--dm-tertiary-500);
    --on-tertiary-500: var(--dm-on-tertiary-500);
    --tertiary-600: var(--dm-tertiary-600);
    --on-tertiary-600: var(--dm-on-tertiary-600);
    --tertiary-700: var(--dm-tertiary-700);
    --on-tertiary-700: var(--dm-on-tertiary-700);
    --tertiary-800: var(--dm-tertiary-800);
    --on-tertiary-800: var(--dm-on-tertiary-800);
    --tertiary-900: var(--dm-tertiary-900);
    --on-tertiary-900: var(--dm-on-tertiary-900);
    --accent: var(--dm-accent);
    --on-accent: var(--dm-on-accent);
    --accent-0: var(--dm-accent-0);
    --on-accent-0: var(--dm-on-accent-0);
    --accent-100: var(--dm-accent-100);
    --on-accent-100: var(--dm-on-accent-100);
    --accent-200: var(--dm-accent-200);
    --on-accent-200: var(--dm-on-accent-200);
    --accent-300: var(--dm-accent-300);
    --on-accent-300: var(--dm-on-accent-300);
    --accent-400: var(--dm-accent-400);
    --on-accent-400: var(--dm-on-accent-400);
    --accent-500: var(--dm-accent-500);
    --on-accent-500: var(--dm-on-accent-500);
    --accent-600: var(--dm-accent-600);
    --on-accent-600: var(--dm-on-accent-600);
    --accent-700: var(--dm-accent-700);
    --on-accent-700: var(--dm-on-accent-700);
    --accent-800: var(--dm-accent-800);
    --on-accent-800: var(--dm-on-accent-800);
    --accent-900: var(--dm-accent-900);
    --on-accent-900: var(--dm-on-accent-900);
    /* border opacity */
    --border-opacity: 40%;
    /* Primary background */
    --primary-backround: var(--primaryDarkBG);
    --primary-alt-background: var(--secondaryDarkBG);
    --primary-on-background: var(--dm-on-background);
    /* Button */
    --primary-button: var(--dm-button);
    --primary-on-button: var(--dm-on-button);
    --primary-button-half: var(--dm-button-half);
    /* Icons */
    --primary-icon: var(--dm-icon);
    --primary-on-icon: var(--dm-on-icon);
    --primary-icon-half: var(--dm-icon-half);
    /* Hotlink */
    --primary-hotlink: var(--dm-hotlink);
    --primary-hotlink-decoration: var(--dm-hotlink-decoration);
    --primary-hotlink-hover-decoration: var(--dm-hotlink-hover-decoration);
    /* Inputs */
    --primary-input: var(--dm-input);
    --primary-on-input: var(--dm-on-input);
    --primary-input-border: color-mix(in lch, var(--dm-background), var(--dm-on-background) 15%);
    /* Inputs */
    --primary-text-gradient-a: var(--dm-text-gradient-a);
    --primary-text-gradient-b: var(--dm-text-gradient-b);
    --primary-color-drop: var(--dm-color-drop);
    /* charting colors */
    --chart-1: #000000;
    --chart-2: #000000;
    --chart-3: #000000;
    --chart-4: #000000;
    --chart-5: #000000;
    --chart-6: #000000;
    --chart-7: #000000;
    --chart-8: #000000;
    --chart-9: #000000;
    --chart-10: #000000;
    --dm-chart-1: #000000;
    --dm-chart-2: #000000;
    --dm-chart-3: #000000;
    --dm-chart-4: #000000;
    --dm-chart-5: #000000;
    --dm-chart-6: #000000;
    --dm-chart-7: #000000;
    --dm-chart-8: #000000;
    --dm-chart-9: #000000;
    --dm-chart-10: #000000;
    /* bevel */
    --bevel-1: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 1)))),
     inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 1)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
     rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 1))));
    --bevel-2: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 2)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 2)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 2))));
    --bevel-3: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 3)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 3)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 3)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 3))));
    --bevel-4: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 4)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 4)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 4)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 4))));
    --bevel-5: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 5)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 5)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 5)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 5))));
    --bevel-6: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 6)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 6)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 6)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 6))));
    --bevel-7: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 7)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 7)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 7)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 7))));
    --bevel-8: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 8)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 8)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 8)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 8))));
    --bevel-9:
    inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(255,255,255, calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 9)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 9)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 9)))) var(--bevel-blur) var(--bevel-spread)
      rgba(0,0,0,calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 9))));
    /* reverse bevel */
    --reverse-bevel-1: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 1)))),
     inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 1)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
     rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 1))));
    --reverse-bevel-2: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 2)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 2)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 1)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255 ,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 2))));
    --reverse-bevel-3: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 3)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 3)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 3)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 3))));
    --reverse-bevel-4: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 4)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 4)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 4)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 4))));
    --reverse-bevel-5: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 5)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 5)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 5)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 5))));
    --reverse-bevel-6: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 6)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 6)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 6)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 6))));
    --reverse-bevel-7: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 7)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 7)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 7)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 7))));
    --reverse-bevel-8: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 8)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 8)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 8)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 8))));
    --reverse-bevel-9: inset var(--bevel-horizontal) var(--bevel-vertical) var(--bevel-blur) var(--bevel-spread) rgba(0,0,0, calc(var(--bevel-dark-opacity) * calc(1 + calc(var(--bevel-change) * 9)))),
      inset calc(0px - calc(var(--bevel-horizontal) * calc(1 + calc(var(--bevel-change) * 9)))) calc(0px - calc(var(--bevel-vertical) * calc(1 + calc(var(--bevel-change) * 9)))) var(--bevel-blur) var(--bevel-spread)
      rgba(255,255,255,calc(var(--bevel-light-opacity) * calc(1 + calc(var(--bevel-change) * 9))));
    /* Ridges  */
    --ridge: 2px;
    --ridge-1: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1px 1px 1px 1px rgba(0,0,0,.3),
     calc(0px - var(--ridge)) calc(0px - var(--ridge)) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * 1)  calc(var(--ridge) * 1) calc(var(--ridge) * 1) calc(var(--ridge) * 1) rgba(0,0,0,.3),
     0px 0px 0px var(--ridge)  var(--white-glow-bright);
    --ridge-2: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), inset 1.5px 1.5px 1px 1px rgba(0,0,0,.3),
     calc(0px - calc(var(--ridge) * var(--change-2)))  calc(0px - calc(var(--ridge) * var(--change-2))) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * var(--change-2))  calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) calc(var(--ridge) * var(--change-2)) rgba(0,0,0,.3),
    0px 0px 0px calc(var(--ridge) * var(--change-2))  var(--white-glow-bright);
    --ridge-3: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2), 1px 1px 0 0 var(--white-glow-dim),
     inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1)) calc(1.5px * calc(1 + var(--bevel-change) * 1))
     rgba(0,0,0,.3),
     calc(0px - calc(var(--ridge) * var(--change-3)))  calc(0px - calc(var(--ridge) * var(--change-3))) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * var(--change-3))  calc(var(--ridge) * var(--change-3)) calc(var(--ridge) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) rgba(0,0,0,.3),
    0px 0px 0px calc(var(--ridge) * var(--change-3))  var(--white-glow-bright);
    --ridge-4: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2)) calc(1.5px * calc(1 + var(--bevel-change) * 2))
     rgba(0,0,0,.3),
     calc(0px - calc(var(--ridge) * var(--change-4)))  calc(0px - calc(var(--ridge) * var(--change-4))) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * var(--change-4))  calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) calc(var(--ridge) * var(--change-4)) rgba(0,0,0,.3),
     0px 0px 0px calc(var(--ridge) * var(--change-4))  var(--white-glow-bright);
    --ridge-5: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3)) calc(1.5px * calc(1 + var(--bevel-change) * 3))
     rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-5)))  calc(0px - calc(var(--ridge) * var(--change-5))) var(--ridge) var(--ridge) var(--white-glow-dim),
      calc(var(--ridge) * var(--change-5))  calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) calc(var(--ridge) * var(--change-5)) rgba(0,0,0,.3),
      0px 0px 0px calc(var(--ridge) * var(--change-5))  var(--white-glow-bright);
    --ridge-6: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4)) calc(1.5px * calc(1 + var(--bevel-change) * 4))
     rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-6)))  calc(0px - calc(var(--ridge) * var(--change-6))) var(--ridge) var(--ridge) var(--white-glow-dim),
      calc(var(--ridge) * var(--change-6))  calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) calc(var(--ridge) * var(--change-6)) rgba(0,0,0,.3),
      0px 0px 0px calc(var(--ridge) * var(--change-6))  var(--white-glow-bright);
    --ridge-7: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5)) calc(1.5px * calc(1 + var(--bevel-change) * 5))
     rgba(0,0,0,.3),
     calc(0px - calc(var(--ridge) * var(--change-7)))  calc(0px - calc(var(--ridge) * var(--change-7))) var(--ridge) var(--ridge) var(--white-glow-dim),
     calc(var(--ridge) * var(--change-7))  calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-7)) calc(var(--ridge) * var(--change-7)) rgba(0,0,0,.3),
    0px 0px 0px calc(var(--ridge) * var(--change-7))  var(--white-glow-bright);
    --ridge-8: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6)) calc(1.5px * calc(1 + var(--bevel-change) * 6))
     rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-8)))  calc(0px - calc(var(--ridge) * var(--change-8))) var(--ridge) var(--ridge) var(--white-glow-dim),
      calc(var(--ridge) * var(--change-8))  calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) calc(var(--ridge) * var(--change-8)) rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-8)))  calc(var(--ridge) * var(--change-8)) var(--ridge) var(--ridge) rgba(0,0,0,.08),
      calc(var(--ridge) * var(--change-8))  calc(0px - calc(var(--ridge) * var(--change-8))) var(--ridge) var(--ridge) rgba(0,0,0,.08),
      0px 0px 0px calc(var(--ridge) * var(--change-8))  var(--white-glow-bright);

    --ridge-9: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 var(--white-glow-dim), inset 1px 1px 0 0 rgba(0,0,0,.2),
    inset calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7)) calc(1.5px * calc(1 + var(--bevel-change) * 7))
     rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-9)))  calc(0px - calc(var(--ridge) * var(--change-9))) var(--ridge) var(--ridge) var(--white-glow-dim),
      calc(var(--ridge) * var(--change-9))  calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) calc(var(--ridge) * var(--change-9)) rgba(0,0,0,.3),
      calc(0px - calc(var(--ridge) * var(--change-9)))  calc(var(--ridge) * var(--change-9)) var(--ridge) var(--ridge) rgba(0,0,0,.08),
      calc(var(--ridge) * var(--change-9))  calc(0px - calc(var(--ridge) * var(--change-9))) var(--ridge) var(--ridge) rgba(0,0,0,.08),
      0px 0px 0px calc(var(--ridge) * var(--change-9))  var(--white-glow-bright);
    /* Groove Shadows */
    --groove-1: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-1),
    calc(0px - calc(var(--elevation-horizontal) * 1))  calc(0px - calc(var(--elevation-vertical) * 1)) calc(var(--elevation-blur) * 1) calc(var(--elevation-spread) * 1) rgba(0,0,0,.3),
    calc(var(--elevation-horizontal) * 1)  calc(var(--elevation-vertical) * 1) calc(var(--elevation-blur) * 1) calc(var(--elevation-spread) * 1) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * 1))  calc(var(--elevation-vertical) * 1) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * 1)  calc(0px - calc(var(--elevation-vertical) * 1)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-2: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-2),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-2)))  calc(0px - calc(var(--elevation-vertical) * var(--change-2))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-2))  calc(var(--elevation-vertical) * var(--change-2)) calc(var(--elevation-blur) * var(--change-2)) calc(var(--elevation-spread) * var(--change-2)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-2)))  calc(var(--elevation-vertical) * var(--change-2)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-2))  calc(0px - calc(var(--elevation-vertical) * var(--change-2))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-3: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-3),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-3)))  calc(0px - calc(var(--elevation-vertical) * var(--change-3))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-3))  calc(var(--elevation-vertical) * var(--change-3)) calc(var(--elevation-blur) * var(--change-3)) calc(var(--elevation-spread) * var(--change-3)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-3)))  calc(var(--elevation-vertical) * var(--change-3)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-3))  calc(0px - calc(var(--elevation-vertical) * var(--change-3))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-4: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-4),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-4)))  calc(0px - calc(var(--elevation-vertical) * var(--change-4))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-4))  calc(var(--elevation-vertical) * var(--change-4)) calc(var(--elevation-blur) * var(--change-4)) calc(var(--elevation-spread) * var(--change-4)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-4)))  calc(var(--elevation-vertical) * var(--change-4)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-4))  calc(0px - calc(var(--elevation-vertical) * var(--change-4))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-5: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-5),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-5)))  calc(0px - calc(var(--elevation-vertical) * var(--change-5))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-5))  calc(var(--elevation-vertical) * var(--change-5)) calc(var(--elevation-blur) * var(--change-5)) calc(var(--elevation-spread) * var(--change-5)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-5)))  calc(var(--elevation-vertical) * var(--change-5)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-5))  calc(0px - calc(var(--elevation-vertical) * var(--change-5))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-6: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-6),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-6)))  calc(0px - calc(var(--elevation-vertical) * var(--change-6))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-6))  calc(var(--elevation-vertical) * var(--change-6)) calc(var(--elevation-blur) * var(--change-6)) calc(var(--elevation-spread) * var(--change-6)) var(--white-glow-dim);
    --groove-7: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-7),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-7)))  calc(0px - calc(var(--elevation-vertical) * var(--change-7))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-7))  calc(var(--elevation-vertical) * var(--change-7)) calc(var(--elevation-blur) * var(--change-7)) calc(var(--elevation-spread) * var(--change-7)) var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-7)))  calc(var(--elevation-vertical) * var(--change-7)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-7))  calc(0px - calc(var(--elevation-vertical) * var(--change-7))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-8: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-8),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-8)))  calc(0px - calc(var(--elevation-vertical) * var(--change-8))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3) ,
    calc(var(--elevation-horizontal) * var(--change-8))  calc(var(--elevation-vertical) * var(--change-8)) var(--elevation-blur) var(--elevation-spread)  var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-8)))  calc(var(--elevation-vertical) * var(--change-8)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-8))  calc(0px - calc(var(--elevation-vertical) * var(--change-8))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
    --groove-9: -1px -1px 0 0 var(--white-glow-dimmer),  1px 1px 0 0 rgba(0,0,0,.3), var(--bevel-9),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-9)))  calc(0px - calc(var(--elevation-vertical) * var(--change-9))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.3),
    calc(var(--elevation-horizontal) * var(--change-9))  calc(var(--elevation-vertical) * var(--change-9)) var(--elevation-blur) var(--elevation-spread)  var(--white-glow-dim),
    calc(0px - calc(var(--elevation-horizontal) * var(--change-9)))  calc(var(--elevation-vertical) * var(--change-9)) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08),
    calc(var(--elevation-horizontal) * var(--change-9))  calc(0px - calc(var(--elevation-vertical) * var(--change-9))) var(--elevation-blur) var(--elevation-spread) rgba(0,0,0,.08);
}
  [data-typography="dyslexic"] {
    --primaryFont: 'OpenDyslexic';
    --secondaryFont: 'OpenDyslexic';
    --fontWeight-0: 400;
    --fontWeight-1: 400;
    --fontWeight-2: 400;
    --fontWeight-3: 700;
    --fontWeight-4: 700;
    --standard-LineHeight: 180%;
    --sm-LineHeight: 150%;
    --buttonTypography: 400 var(--CTAFontSize) / var(--CTALineHeight) 'OpenDyslexic';
    --sm-buttonTypography: 400 var(--CTA-SmallFontSize) / var(--CTA-SmallLineHeight) 'OpenDyslexic';
    --chipTypography:400 var(--captionFontSize) / var(--captionLineHeight) 'OpenDyslexic';
    --hero-heroTitleTypography: 700 var(--Display1FontSize) / var(--Display1LineHeight) 'OpenDyslexic';
    --hero-heroBodyTypography: 400 var(--body1FontSize) / var(--body1LineHeight) 'OpenDyslexic';
    --tableheaderTypography: 700 var(--label-1FontSize) / var(--label-1LineHeight) 'OpenDyslexic';
    --tablebodyTypography: 400 var(--body1FontSize) / var(--body1LineHeight) 'OpenDyslexic';
    --Display1FontWeight: 400;
    --Display1FontFamily: var(--secondaryFont);
    --Display1LineHeight: var(--sm-LineHeight);
    --Display2FontWeight: 400;
    --Display2FontFamily: var(--secondaryFont);
    --Display2LineHeight: var(--sm-LineHeight);
    --h1FontWeight: 400;
    --h1FontFamily: var(--secondaryFont);
    --h1LineHeight: var(--sm-LineHeight);
    --h2FontWeight: 400;
    --h2FontFamily: var(--secondaryFont);
    --h2LineHeight: var(--sm-LineHeight);
    --h3FontWeight: 400;
    --h3FontFamily: var(--secondaryFont);
    --h3LineHeight: var(--sm-LineHeight);
    --h4FontWeight: 400;
    --h4FontFamily: var(--secondaryFont);
    --h4LineHeight: var(--sm-LineHeight);
    --h5FontWeight: 400;
    --h5FontFamily: var(--secondaryFont);
    --h5LineHeight: var(--sm-LineHeight);
    --h6FontWeight: 400;
    --h6FontFamily: var(--secondaryFont);
    --h6LineHeight: var(--sm-LineHeight);
    --body1FontWeight: 400;
    --body1FontFamily: var(--primaryFont);
    --body1LineHeight: var(--standard-LineHeight);
    --body1-boldFontWeight: 700;
    --body1-boldFontFamily: var(--primaryFont);
    --body1-boldLineHeight:  var(--standard-LineHeight);
    --body2FontWeight: 400;
    --body2FontFamily: var(--primaryFont);
    --body2LineHeight:  var(--standard-LineHeight);
    --body2-boldFontWeight: 700;
    --body2-boldFontFamily: var(--primaryFont);
    --body2-boldLineHeight:  var(----standard-LineHeight);
    --body3FontWeight: 400;
    --body3FontFamily: var(--primaryFont);
    --body3LineHeight:  var(--standard-LineHeight);
    --body3-boldFontWeight: 700;
    --body3-boldFontFamily: var(--primaryFont);
    --body3-boldLineHeight: var(--standard-LineHeight);
    --subtitle1FontWeight: 400;
    --subtitle1FontFamily: var(--primaryFont);
    --subtitle1LineHeight: var(--sm-LineHeight);
    --subtitle2FontWeight: 400;
    --subtitle2FontFamily: var(--primaryFont);
    --subtitle2LineHeight: var(--sm-LineHeight);
    --captionFontWeight: 400;
    --captionFontFamily: var(--primaryFont);
    --captionLineHeight: var(--sm-LineHeight);
    --caption-boldFontWeight: 700;
    --caption-boldFontFamily: var(--primaryFont);
    --caption-boldLineHeight: var(--sm-LineHeight);
    --overlineFontWeight: 400;
    --overlineFontFamily: var(--primaryFont);
    --overlineLineHeight: var(--sm-LineHeight);
    --overline-largeFontWeight: 400;
    --overline-largeFontFamily: var(--primaryFont);
    --overline-largeLineHeight: var(--sm-LineHeight);
    --overline-XLFontWeight: 400;
    --overline-XLFontFamily: var(--primaryFont);
    --overline-XLLineHeight: var(--sm-LineHeight);
    --label-1FontWeight: 400;
    --label-1FontFamily: var(--primaryFont);
    --label-1LineHeight: var(--sm-LineHeight);
    --label-1-allCapsFontWeight: 400;
    --label-1-allCapsFontFamily: var(--primaryFont);
    --label-1-allCapsLineHeight: var(--sm-LineHeight);
    --label-2FontWeight: 400;
    --label-2FontFamily: var(--primaryFont);
    --label-2LineHeight: var(--sm-LineHeight);
    --label-2-allCapsFontWeight: 400;
    --label-2-allCapsFontFamily: var(--primaryFont);
    --label-2-allCapsLineHeight: var(--sm-LineHeight);
    --label-smallFontWeight: 400;
    --label-smallFontFamily: var(--primaryFont);
    --label-smallLineHeight: var(--sm-LineHeight);
    --CTAFontWeight: 400;
    --CTAFontFamily: var(--primaryFont);
    --CTALineHeight: var(--sm-LineHeight);
    --CTA-SmallFontWeight: 400;
    --CTA-SmallFontFamily: var(--primaryFont);
    --CTA-SmallLineHeight: var(--sm-LineHeight);
    --smallFontWeight: 400;
    --smallFontFamily: var(--primaryFont);
    --smallLineHeight: var(--sm-LineHeight);
    --small-semiboldFontWeight: 700;
    --small-semiboldFontFamily: var(--primaryFont);
    --small-semiboldLineHeight: var(--sm-LineHeight);
    --statFontWeight: 700;
    --statFontFamily: var(--primaryFont);
    --statLineHeight: var(--sm-LineHeight);
  }
  [data-animation="motionSensative"] {
    --animation-speed: 0ms;
    --animation-distance: 0px;
    --animation-focus-distance: 0px;
  }

  [data-background="primary"] {
    --background: var(--primary-background);
    --alt-background: var(--primary-alt-background);
    --on-background: var(--primary-on-background);
    /* Button */
    --button: var(--primary-button);
    --on-button: var(--primary-on-button);
    --button-half: var(--primary-button-half);
    /* Icons */
    --icon: var(--primary-icon);
    --on-icon: var(--primary-on-icon);
    --icon-half: var(--primary-icon-half);
    /* Hotlink */
    --hotlink: var(--primary-hotlink);
    --hotlink-decoration: var(--primary-hotlink-decoration);
    --hotlink-hover-decoration: var(--primary-hotlink-decoration);
    /* Gradient Colors */
    --color-1: var(--primary-background);
    --color-2: var(--primary-background);
    /* Border */
    --border: color-mix(in lch, var(--background), var(--on-background) var(--border-opacity));
    /* Inputs */
    --input: var(--primary-input);
    --input-border: color-mix(in lch, var(--background), var(--on-background) 20%);
    /* Text Decorations */
    --text-gradient-a: var(--primary-text-gradient-a);
    --text-gradient-b: var(--primary-text-gradient-b);
    --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
    --primary-color-drop: var(--primary-color-drop);
    --color-1: var(--primary-background);
    --color-2: var(--primary-background);

  }
  [data-background="alt"] {
    --background: var(--alt-background);
    --alt-background: color-mix(in lch, var(--alt-background)), var(--black) 5%));
    --on-background: var(--on-background);
    /* Button */
    --button: var(--primary-button);
    --on-button: var(--primary-on-button);
    --button-half: var(--primary-button-half);
    /* Icons */
    --icon: var(--primary-icon);
    --on-icon: var(--primary-on-icon);
    --icon-half: var(--primary-icon-half);
    /* Hotlink */
    --hotlink: var(--primary-hotlink);
    --hotlink-decoration: var(--primary-hotlink-decoration);
    --hotlink-hover-decoration: var(--hotlink-hover-decoration);
    /* overlay values */
    --color-1: var(--primary-alt-background);
    --color-2: var(--primary-alt-background);
    /* Border */
    --border: color-mix(in lch, var(--background), var(--on-background) var(--border-opacity));
    /* Inputs */
    --input: var(--primary-input);
    --input-border: color-mix(in lch, var(--background), var(--on-background) 20%);
    /* Text Decorations */
    --text-gradient-a: var(--primary-text-gradient-a);
    --text-gradient-b: var(--primary-text-gradient-b);
    --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
    --color-drop: var(--primary-color-drop);
  }
  [data-background="white"] {
    --alt-background: var(--gray-100);
    --background: var(--white);
    --on-background: var(--black);
    /* Button */
    --button: var(--buttonOnWhite);
    --on-button: var(--onbuttonOnWhite);
    --button-half: var(--buttonHalfOnWhite);
    /* Icons */
    --icon: var(--iconOnWhite);
    --on-icon: var(--oniconOnWhite);
    --icon-half: var(--iconHalfOnWhite);
    /* Hotlink */
    --hotlink: var(--hotlinkOnWhite);
    --hotlink-decoration: var(--hotlinkOnWhite-decoration);
    --hotlink-hover-decoration: var(--hotlinkOnWhite-hover-decoration);
    /* overlay values */
    --color-1: var(--white);
    --color-2: var(--white);
    /* Border */
    --border: color-mix(in lch, var(--background), var(--on-background) var(--border-opacity));
    /* Inputs */
    --input: color-mix(in lch, var(--background), var(--on-background) 5%);
    --input-border: color-mix(in lch, var(--background), var(--on-background) 20%);
    /* Text Decorations */
    --text-gradient-a: var(--white);
    --text-gradient-b: var(--gray-300);
    --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
    --color-drop: var(--primary-color-drop);
    --color-1: var(--white);
    --color-2: var(--white);
  }
  [data-background="black"] {
    --background: var(--nearblack);
    --alt-background: var(--black);
    --on-background: var(--on-black);
    /* Button */
    --button: var(--buttonOnBlack);
    --on-button: var(--onbuttonOnBlack);
    --button-half: var(--buttonHalfOnBlack);
    /* Icons */
    --icon: var(--iconOnBlack);
    --on-icon: var(--oniconOnBlack);
    --icon-half: var(--iconHalfOnBlack);
    /* Hotlink */
    --hotlink: var(--on-black);
    --hotlink-decoration: underline;
    --hotlink-hover-decoration: none;
    /* overlay values */
    --color-1: var(--black);
    --color-2: var(--black);
    /* Border */
    --border: color-mix(in lch, var(--background), var(--on-background) var(--border-opacity));
    /* Inputs */
    --input: color-mix(in lch, var(--background), var(--on-background) 5%);
    --input-border: color-mix(in lch, var(--background), var(--on-background) 20%);
    /* Text Decorations */
    --text-gradient-a: var(--white);
    --text-gradient-b: var(--gray-300);
    --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
    --color-drop: var(--nearblack);
  }
  [data-background="colored"] {
    --background: var(--primary);
    --alt-background: color-mix(in lch, var(--background-tertiary), var(--alt-adjust) 8%);
    --on-background: var(--on-background-tertiary);
    /* Button */
    --button: var(--buttonOnTertiary);
    --on-button: var(--onbuttonOnTertiary);
    --button-half: var(--buttonHalfOnTertiary);
    /* Icons */
    --icon: var(--iconOnTertiary);
    --on-icon: var(--oniconOnTertiary);
    --icon-half: var(--iconHalfOnTertiary);
    /* Hotlink */
    --hotlink: var(--on-background-tertiary);
    --hotlink-decoration: underline;
    --hotlink-hover-decoration: none;
    /* overlay values */
    --color-1: var(--background-tertiary);
    --color-2: var(--background-tertiary);
    /* Border */
    --border: color-mix(in lch, var(--background-tertiary), var(--on-background-tertiary) var(--border-opacity));
    /* Inputs */
    --input: color-mix(in lch, var(--background-tertiary), var(--white) 5%);
    --input-border: color-mix(in lch, var(--background-tertiary), var(--on-background) 20%);
    /* Text Decorations */
    --text-gradient-a: var(--on-background-tertiary);
    --text-gradient-b: var(--on-background-tertiary);
    --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
    --color-drop: var(--gray-200);
    --color-1: var(--primary);
    --color-2: var(--primary);
  }
  [data-background="gradient1"] {
    --background: var(--gradient-1);
    --on-background: var(--on-gradient-1);
    --alt-background: color-mix(in lch, var(---gradient-1a), var(--alt-adjust) 8%);
    /* Button */
    --button: var(--buttonOnGradient1);
    --on-button: var(--onbuttonOnGradient1);
    --button-half: var(--buttonHalfOnGradient1);
    /* Icons */
    --icon: var(--iconOnGradient1);
    --on-icon: var(--oniconOnGradient1);
    --icon-half: var(--iconHalfOnGradient1);
    /* Hotlink */
    --hotlink: var(--on-gradient1);
    --hotlink-decoration: underline;
    --hotlink-hover-decoration: none;
    /* Border */
    --border: color-mix(in lch, var(--gradient-1a), var(--on-background) var(--border-opacity));
    /* Inputs */
    --input: color-mix(in lch, var(--white), var(--on-background) 5%);
    --input-border: color-mix(in lch, var(--white), var(--on-background) 20%);
    /* overlay values */
    --color-1: var(--gradient1-a);
    --color-2: var(--gradient1-b);
    /* Text Decorations */
    --text-gradient-a: var(--on-background);
    --text-gradient-b: var(--on-background);
    --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
    --color-drop: rgba(0,0,0,.2);

  }
  [data-background="gradient2"] {
    --background: var(--gradient-2);
    --on-background: var(--on-gradient-2);
    --alt-background: color-mix(in lch, var(---gradient-2a), var(--alt-adjust) 8%);
    /* Button */
    --button: var(--buttonOnGradient2);
    --on-button: var(--onbuttonOnGradient2);
    --button-half: var(--buttonHalfOnGradient2);
    /* Icons */
    --icon: var(--iconOnGradient2);
    --on-icon: var(--oniconOnGradient2);
    --icon-half: var(--iconHalfOnGradient2);
    /* Hotlink */
    --hotlink: var(--on-gradient2);
    --hotlink-decoration: underline;
    --hotlink-hover-decoration: none;
    /* Border */
    --border: color-mix(in lch, var(--gradient-2a), var(--on-background) var(--border-opacity));
    /* Inputs */
    --input: color-mix(in lch, var(--white), var(--on-background) 5%);
    --input-border: color-mix(in lch, var(--white), var(--on-background) 20%);
    /* overlay values */
    --color-1: var(--gradient2-a);
    --color-2: var(--gradient2-b);

    /* Text Decorations */
    --text-gradient-a: var(--on-background);
    --text-gradient-b: var(--on-background);
    --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
    --color-drop: rgba(0,0,0,.2);
  }
  [data-background="gradient3"] {
    --background: var(--gradient-3);
    --on-background: var(--on-gradient-3);
    --alt-background: color-mix(in lch, var(---gradient-3a), var(--alt-adjust) 8%);
    /* Button */
    --button: var(--buttonOnGradient3);
    --on-button: var(--onbuttonOnGradient3);
    --button-half: var(--buttonHalfOnGradient3);
    /* Icons */
    --icon: var(--iconOnGradient3);
    --on-icon: var(--oniconOnGradient3);
    --icon-half: var(--iconHalfOnGradient3);
    /* Hotlink */
    --hotlink: var(--on-gradient-3);
    --hotlink-decoration: underline;
    --hotlink-hover-decoration: none;
    /* Border */
    --border: color-mix(in lch, var(--gradient-3a), var(--on-background) var(--border-opacity));
    /* Inputs */
    --input: color-mix(in lch, var(--white), var(--on-background) 5%);
    --input-border: color-mix(in lch, var(--white), var(--on-background) 20%);
    /* overlay values */
    --color-1: var(--gradient3-a);
    --color-2: var(--gradient3-b);
    /* Text Decorations */
    --text-gradient-a: var(--on-background);
    --text-gradient-b: var(--on-background);
    --text-gradient: linear-gradient(45deg, var(--text-gradient-a) 0%, var(--text-gradient-b) 100%);
    --color-drop: rgba(0,0,0,.2);
  }
  [data-device="tablet"] {
    --min-target: var(--mobile-min-target);
    --h1FontSize: 40px;
    --h2FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 4) +  var(--h6FontSize));
    --h3FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 3) +  var(--h6FontSize));
    --h4FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 2) +  var(--h6FontSize));
    --h5FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 1) +  var(--h6FontSize));
    --h6FontSize: 16px;

  }
  [data-device="mobile"] {
    --min-target: var(--mobile-min-target);
    --h1FontSize: 32px;
    --h2FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 4) +  var(--h6FontSize));
    --h3FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 3) +  var(--h6FontSize));
    --h4FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 2) +  var(--h6FontSize));
    --h5FontSize: calc(calc(calc( calc(var(--h1FontSize) - var(--h6FontSize))/5) * 1) +  var(--h6FontSize));
    --h6FontSize: 16px;
  }
  [data-animation="sensitive"] {
    --animation-speed: 0;
    --animation-focus-distance: 0px;
  }
  [data-color="standard"] {
    --c-1: var(--chart-1);
    --c-2: var(--chart-2);
    --c-3: var(--chart-3);
    --c-4: var(--chart-4);
    --c-5: var(--chart-5);
    --c-6: var(--chart-6);
    --c-7: var(--chart-7);
    --c-8: var(--chart-8);
    --c-9: var(--chart-9);
    --c-10: var(--chart-10);
    --dm-c-1: var(--chart-1);
    --dm-c-2: var(--chart-2);
    --dm-c-3: var(--chart-3);
    --dm-c-4: var(--chart-4);
    --dm-c-5: var(--chart-5);
    --dm-c-6: var(--chart-6);
    --dm-c-7: var(--chart-7);
    --dm-c-8: var(--chart-8);
    --dm-c-9: var(--chart-9);
    --dm-c-10: var(--chart-10);
  }
  [data-color="red-weak"] {
    --c-1: var(--chart-1);
    --c-2: var(--chart-2);
    --c-3: var(--chart-3);
    --c-4: var(--chart-4);
    --c-5: var(--chart-5);
    --c-6: var(--chart-6);
    --c-7: var(--chart-7);
    --c-8: var(--chart-8);
    --c-9: var(--chart-9);
    --c-10: var(--chart-10);
    --dm-c-1: var(--chart-1);
    --dm-c-2: var(--chart-2);
    --dm-c-3: var(--chart-3);
    --dm-c-4: var(--chart-4);
    --dm-c-5: var(--chart-5);
    --dm-c-6: var(--chart-6);
    --dm-c-7: var(--chart-7);
    --dm-c-8: var(--chart-8);
    --dm-c-9: var(--chart-9);
    --dm-c-10: var(--chart-10);
  }
}
