:root {
  /**
   * Scale ratio variables
   */
  --scale-ratio-minor-second: 1.067;
  --scale-ratio-major-second: 1.125;
  --scale-ratio-minor-third: 1.2;
  --scale-ratio-major-third: 1.25;
  --scale-ratio-perfect-fourth: 1.333;
  --scale-ratio-augmented-fourth: 1.414;
  --scale-ratio-perfect-fifth: 1.5;
  --scale-ratio-golden: 1.618;
  --scale-ratio: var(--scale-ratio-minor-third);
  --scale-ratio-pow-1: var(--scale-ratio);
  --scale-ratio-pow-2: calc(var(--scale-ratio-pow-1) * var(--scale-ratio));
  --scale-ratio-pow-3: calc(var(--scale-ratio-pow-2) * var(--scale-ratio));
  --scale-ratio-pow-4: calc(var(--scale-ratio-pow-3) * var(--scale-ratio));
  --scale-ratio-pow-5: calc(var(--scale-ratio-pow-4) * var(--scale-ratio));
  --scale-ratio-pow-6: calc(var(--scale-ratio-pow-5) * var(--scale-ratio));
}

:root {
  /**
   * Size multiplier variable
   */
  --size-multiplier: 1;
  /**
   * Size percentage variables
   */
  --size-percentages-0: 0%;
  --size-percentages-25: 25%;
  --size-percentages-50: 50%;
  --size-percentages-75: 75%;
  --size-percentages-100: 100%;
  /**
   * Size multiplier variants variables
   */
  --size-multiplier-2xs: calc(var(--size-multiplier) / var(--scale-ratio-pow-3));
  --size-multiplier-xs: calc(var(--size-multiplier) / var(--scale-ratio-pow-2));
  --size-multiplier-sm: calc(var(--size-multiplier) / var(--scale-ratio-pow-1));
  --size-multiplier-md: var(--size-multiplier);
  --size-multiplier-lg: calc(var(--size-multiplier) * var(--scale-ratio-pow-1));
  --size-multiplier-xl: calc(var(--size-multiplier) * var(--scale-ratio-pow-2));
  --size-multiplier-2xl: calc(var(--size-multiplier) * var(--scale-ratio-pow-3));
}

:root {
  /**
   * Animation variables
   */
  --transition-duration: 300ms;
  --transition-timing-function: ease;
}

:root {
  /**
   * Border variables
   */
  --border-top-width: 1px;
  --border-right-width: 1px;
  --border-bottom-width: 1px;
  --border-left-width: 1px;
  --border-width: var(--border-top-width) var(--border-right-width) var(--border-bottom-width) var(--border-left-width);
  --border-top-style: solid;
  --border-right-style: solid;
  --border-bottom-style: solid;
  --border-left-style: solid;
  --border-style: var(--border-top-style) var(--border-right-style) var(--border-bottom-style) var(--border-left-style);
  --border-top-color: var(--color-gray-200);
  --border-right-color: var(--color-gray-200);
  --border-bottom-color: var(--color-gray-200);
  --border-left-color: var(--color-gray-200);
  --border-color: var(--border-top-color) var(--border-right-color) var(--border-bottom-color) var(--border-left-color);
}

:root {
  /**
   * Border radius variables
   */
  --border-top-left-radius: 4px;
  --border-top-right-radius: 4px;
  --border-bottom-right-radius: 4px;
  --border-bottom-left-radius: 4px;
  --border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
  /**
   * Border radius xs variant variables
   */
  --border-top-left-radius-xs: calc(var(--border-top-left-radius) * var(--size-multiplier-xs));
  --border-top-right-radius-xs: calc(var(--border-top-right-radius) * var(--size-multiplier-xs));
  --border-bottom-right-radius-xs: calc(var(--border-bottom-right-radius) * var(--size-multiplier-xs));
  --border-bottom-left-radius-xs: calc(var(--border-bottom-left-radius) * var(--size-multiplier-xs));
  --border-radius-xs: var(--border-top-left-radius-xs) var(--border-top-right-radius-xs) var(--border-bottom-right-radius-xs) var(--border-bottom-left-radius-xs);
  /**
   * Border radius sm variant variables
   */
  --border-top-left-radius-sm: calc(var(--border-top-left-radius) * var(--size-multiplier-sm));
  --border-top-right-radius-sm: calc(var(--border-top-right-radius) * var(--size-multiplier-sm));
  --border-bottom-right-radius-sm: calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm));
  --border-bottom-left-radius-sm: calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm));
  --border-radius-sm: var(--border-top-left-radius-sm) var(--border-top-right-radius-sm) var(--border-bottom-right-radius-sm) var(--border-bottom-left-radius-sm);
  /**
   * Border radius md variant variables
   */
  --border-top-left-radius-md: calc(var(--border-top-left-radius) * var(--size-multiplier-md));
  --border-top-right-radius-md: calc(var(--border-top-right-radius) * var(--size-multiplier-md));
  --border-bottom-right-radius-md: calc(var(--border-bottom-right-radius) * var(--size-multiplier-md));
  --border-bottom-left-radius-md: calc(var(--border-bottom-left-radius) * var(--size-multiplier-md));
  --border-radius-md: var(--border-top-left-radius-md) var(--border-top-right-radius-md) var(--border-bottom-right-radius-md) var(--border-bottom-left-radius-md);
  /**
   * Border radius lg variant variables
   */
  --border-top-left-radius-lg: calc(var(--border-top-left-radius) * var(--size-multiplier-lg));
  --border-top-right-radius-lg: calc(var(--border-top-right-radius) * var(--size-multiplier-lg));
  --border-bottom-right-radius-lg: calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg));
  --border-bottom-left-radius-lg: calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg));
  --border-radius-lg: var(--border-top-left-radius-lg) var(--border-top-right-radius-lg) var(--border-bottom-right-radius-lg) var(--border-bottom-left-radius-lg);
  /**
   * Border radius xl variant variables
   */
  --border-top-left-radius-xl: calc(var(--border-top-left-radius) * var(--size-multiplier-xl));
  --border-top-right-radius-xl: calc(var(--border-top-right-radius) * var(--size-multiplier-xl));
  --border-bottom-right-radius-xl: calc(var(--border-bottom-right-radius) * var(--size-multiplier-xl));
  --border-bottom-left-radius-xl: calc(var(--border-bottom-left-radius) * var(--size-multiplier-xl));
  --border-radius-xl: var(--border-top-left-radius-xl) var(--border-top-right-radius-xl) var(--border-bottom-right-radius-xl) var(--border-bottom-left-radius-xl);
}

:root {
  /**
   * Box shadow variables
   */
  --box-shadow-offset-x: 0;
  --box-shadow-offset-y: 0.5rem;
  --box-shadow-blur-radius: 1rem;
  --box-shadow-spread-radius: -0.75rem;
  --box-shadow-color: rgba(0, 0, 0, 0.15);
  --box-shadow: var(--box-shadow-offset-x) var(--box-shadow-offset-y) var(--box-shadow-blur-radius) var(--box-shadow-spread-radius) var(--box-shadow-color);
}

:root {
  /**
   * Breakpoint variables
   */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
}

:root {
  /**
   * Color red variables
   */
  --color-red-h: 1.3259668508287064;
  --color-red-s: 87.43961352657004%;
  --color-red-l: 59.411764705882355%;
  --color-red-a: 1;
  --color-red: hsla(var(--color-red-h), var(--color-red-s), var(--color-red-l), var(--color-red-a));
  /**
   * Color orange variables
   */
  --color-orange-h: 19.622641509433947;
  --color-orange-s: 92.9824561403509%;
  --color-orange-l: 66.47058823529412%;
  --color-orange-a: 1;
  --color-orange: hsla(var(--color-orange-h), var(--color-orange-s), var(--color-orange-l), var(--color-orange-a));
  /**
   * Color yellow variables
   */
  --color-yellow-h: 43.676470588235304;
  --color-yellow-s: 100%;
  --color-yellow-l: 73.33333333333334%;
  --color-yellow-a: 1;
  --color-yellow: hsla(var(--color-yellow-h), var(--color-yellow-s), var(--color-yellow-l), var(--color-yellow-a));
  /**
   * Color green variables
   */
  --color-green-h: 154.4186046511628;
  --color-green-s: 57.847533632286996%;
  --color-green-l: 43.72549019607843%;
  --color-green-a: 1;
  --color-green: hsla(var(--color-green-h), var(--color-green-s), var(--color-green-l), var(--color-green-a));
  /**
   * Color teal variables
   */
  --color-teal-h: 173.8888888888889;
  --color-teal-s: 42.85714285714286%;
  --color-teal-l: 49.411764705882355%;
  --color-teal-a: 1;
  --color-teal: hsla(var(--color-teal-h), var(--color-teal-s), var(--color-teal-l), var(--color-teal-a));
  /**
   * Color blue variables
   */
  --color-blue-h: 195.0967741935484;
  --color-blue-s: 77.11442786069651%;
  --color-blue-l: 39.411764705882355%;
  --color-blue-a: 1;
  --color-blue: hsla(var(--color-blue-h), var(--color-blue-s), var(--color-blue-l), var(--color-blue-a));
  /**
   * Color purple variables
   */
  --color-purple-h: 262.2857142857142;
  --color-purple-s: 30.172413793103452%;
  --color-purple-l: 54.50980392156863%;
  --color-purple-a: 1;
  --color-purple: hsla(var(--color-purple-h), var(--color-purple-s), var(--color-purple-l), var(--color-purple-a));
  /**
   * Color pink variables
   */
  --color-pink-h: 351.42857142857144;
  --color-pink-s: 95.68345323741009%;
  --color-pink-l: 72.74509803921569%;
  --color-pink-a: 1;
  --color-pink: hsla(var(--color-pink-h), var(--color-pink-s), var(--color-pink-l), var(--color-pink-a));
  /**
   * Color white variables
   */
  --color-white-h: 0;
  --color-white-s: 0%;
  --color-white-l: 100%;
  --color-white-a: 1;
  --color-white: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--color-white-a));
  /**
   * Color light variables
   */
  --color-light-h: var(--color-gray-100-h);
  --color-light-s: var(--color-gray-100-s);
  --color-light-l: var(--color-gray-100-l);
  --color-light-a: var(--color-gray-100-a);
  --color-light: hsla(var(--color-light-h), var(--color-light-s), var(--color-light-l), var(--color-light-a));
  /**
   * Color gray variables
   */
  --color-gray-h: 193.63636363636363;
  --color-gray-s: 10.784313725490199%;
  --color-gray-l: 60.00000000000001%;
  --color-gray-a: 1;
  --color-gray: hsla(var(--color-gray-h), var(--color-gray-s), var(--color-gray-l), var(--color-gray-a));
  /**
   * Color dark variables
   */
  --color-dark-h: var(--color-gray-800-h);
  --color-dark-s: var(--color-gray-800-s);
  --color-dark-l: var(--color-gray-800-l);
  --color-dark-a: var(--color-gray-800-a);
  --color-dark: hsla(var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), var(--color-dark-a));
  /**
   * Color black variables
   */
  --color-black-h: 0;
  --color-black-s: 0%;
  --color-black-l: 0%;
  --color-black-a: 1;
  --color-black: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--color-black-a));
  /**
   * Color primary variables
   */
  --color-primary-h: 195.0967741935484;
  --color-primary-s: 77.11442786069651%;
  --color-primary-l: 39.411764705882355%;
  --color-primary-a: 1;
  --color-primary: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--color-primary-a));
  /**
   * Color secondary variables
   */
  --color-secondary-h: 262.2857142857142;
  --color-secondary-s: 30.172413793103452%;
  --color-secondary-l: 54.50980392156863%;
  --color-secondary-a: 1;
  --color-secondary: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), var(--color-secondary-a));
  /**
   * Color info variables
   */
  --color-info-h: 173.8888888888889;
  --color-info-s: 42.85714285714286%;
  --color-info-l: 49.411764705882355%;
  --color-info-a: 1;
  --color-info: hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), var(--color-info-a));
  /**
   * Color success variables
   */
  --color-success-h: 154.4186046511628;
  --color-success-s: 57.847533632286996%;
  --color-success-l: 43.72549019607843%;
  --color-success-a: 1;
  --color-success: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--color-success-a));
  /**
   * Color warning variables
   */
  --color-warning-h: 43.676470588235304;
  --color-warning-s: 100%;
  --color-warning-l: 73.33333333333334%;
  --color-warning-a: 1;
  --color-warning: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--color-warning-a));
  /**
   * Color danger variables
   */
  --color-danger-h: 1.3259668508287064;
  --color-danger-s: 87.43961352657004%;
  --color-danger-l: 59.411764705882355%;
  --color-danger-a: 1;
  --color-danger: hsla(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l), var(--color-danger-a));
  /**
   * Color primary-50 variant variables
   */
  --color-primary-50-h: var(--color-primary-h);
  --color-primary-50-s: var(--color-primary-s);
  --color-primary-50-l: 95%;
  --color-primary-50-a: var(--color-primary-a);
  --color-primary-50: hsla(var(--color-primary-50-h), var(--color-primary-50-s), var(--color-primary-50-l), var(--color-primary-50-a));
  /**
   * Color primary-100 variant variables
   */
  --color-primary-100-h: var(--color-primary-h);
  --color-primary-100-s: var(--color-primary-s);
  --color-primary-100-l: 90%;
  --color-primary-100-a: var(--color-primary-a);
  --color-primary-100: hsla(var(--color-primary-100-h), var(--color-primary-100-s), var(--color-primary-100-l), var(--color-primary-100-a));
  /**
   * Color primary-200 variant variables
   */
  --color-primary-200-h: var(--color-primary-h);
  --color-primary-200-s: var(--color-primary-s);
  --color-primary-200-l: 80%;
  --color-primary-200-a: var(--color-primary-a);
  --color-primary-200: hsla(var(--color-primary-200-h), var(--color-primary-200-s), var(--color-primary-200-l), var(--color-primary-200-a));
  /**
   * Color primary-300 variant variables
   */
  --color-primary-300-h: var(--color-primary-h);
  --color-primary-300-s: var(--color-primary-s);
  --color-primary-300-l: 70%;
  --color-primary-300-a: var(--color-primary-a);
  --color-primary-300: hsla(var(--color-primary-300-h), var(--color-primary-300-s), var(--color-primary-300-l), var(--color-primary-300-a));
  /**
   * Color primary-400 variant variables
   */
  --color-primary-400-h: var(--color-primary-h);
  --color-primary-400-s: var(--color-primary-s);
  --color-primary-400-l: 60%;
  --color-primary-400-a: var(--color-primary-a);
  --color-primary-400: hsla(var(--color-primary-400-h), var(--color-primary-400-s), var(--color-primary-400-l), var(--color-primary-400-a));
  /**
   * Color primary-500 variant variables
   */
  --color-primary-500-h: var(--color-primary-h);
  --color-primary-500-s: var(--color-primary-s);
  --color-primary-500-l: 50%;
  --color-primary-500-a: var(--color-primary-a);
  --color-primary-500: hsla(var(--color-primary-500-h), var(--color-primary-500-s), var(--color-primary-500-l), var(--color-primary-500-a));
  /**
   * Color primary-600 variant variables
   */
  --color-primary-600-h: var(--color-primary-h);
  --color-primary-600-s: var(--color-primary-s);
  --color-primary-600-l: 40%;
  --color-primary-600-a: var(--color-primary-a);
  --color-primary-600: hsla(var(--color-primary-600-h), var(--color-primary-600-s), var(--color-primary-600-l), var(--color-primary-600-a));
  /**
   * Color primary-700 variant variables
   */
  --color-primary-700-h: var(--color-primary-h);
  --color-primary-700-s: var(--color-primary-s);
  --color-primary-700-l: 30%;
  --color-primary-700-a: var(--color-primary-a);
  --color-primary-700: hsla(var(--color-primary-700-h), var(--color-primary-700-s), var(--color-primary-700-l), var(--color-primary-700-a));
  /**
   * Color primary-800 variant variables
   */
  --color-primary-800-h: var(--color-primary-h);
  --color-primary-800-s: var(--color-primary-s);
  --color-primary-800-l: 20%;
  --color-primary-800-a: var(--color-primary-a);
  --color-primary-800: hsla(var(--color-primary-800-h), var(--color-primary-800-s), var(--color-primary-800-l), var(--color-primary-800-a));
  /**
   * Color primary-900 variant variables
   */
  --color-primary-900-h: var(--color-primary-h);
  --color-primary-900-s: var(--color-primary-s);
  --color-primary-900-l: 10%;
  --color-primary-900-a: var(--color-primary-a);
  --color-primary-900: hsla(var(--color-primary-900-h), var(--color-primary-900-s), var(--color-primary-900-l), var(--color-primary-900-a));
  /**
   * Color primary-shade-150 variant variables
   */
  --color-primary-shade-150-h: var(--color-primary-h);
  --color-primary-shade-150-s: var(--color-primary-s);
  --color-primary-shade-150-l: calc(var(--color-primary-l) - 15%);
  --color-primary-shade-150-a: var(--color-primary-a);
  --color-primary-shade-150: hsla(var(--color-primary-shade-150-h), var(--color-primary-shade-150-s), var(--color-primary-shade-150-l), var(--color-primary-shade-150-a));
  /**
   * Color primary-shade-100 variant variables
   */
  --color-primary-shade-100-h: var(--color-primary-h);
  --color-primary-shade-100-s: var(--color-primary-s);
  --color-primary-shade-100-l: calc(var(--color-primary-l) - 10%);
  --color-primary-shade-100-a: var(--color-primary-a);
  --color-primary-shade-100: hsla(var(--color-primary-shade-100-h), var(--color-primary-shade-100-s), var(--color-primary-shade-100-l), var(--color-primary-shade-100-a));
  /**
   * Color primary-shade-50 variant variables
   */
  --color-primary-shade-50-h: var(--color-primary-h);
  --color-primary-shade-50-s: var(--color-primary-s);
  --color-primary-shade-50-l: calc(var(--color-primary-l) - 5%);
  --color-primary-shade-50-a: var(--color-primary-a);
  --color-primary-shade-50: hsla(var(--color-primary-shade-50-h), var(--color-primary-shade-50-s), var(--color-primary-shade-50-l), var(--color-primary-shade-50-a));
  /**
   * Color primary-tint-50 variant variables
   */
  --color-primary-tint-50-h: var(--color-primary-h);
  --color-primary-tint-50-s: var(--color-primary-s);
  --color-primary-tint-50-l: calc(var(--color-primary-l) + 5%);
  --color-primary-tint-50-a: var(--color-primary-a);
  --color-primary-tint-50: hsla(var(--color-primary-tint-50-h), var(--color-primary-tint-50-s), var(--color-primary-tint-50-l), var(--color-primary-tint-50-a));
  /**
   * Color primary-tint-100 variant variables
   */
  --color-primary-tint-100-h: var(--color-primary-h);
  --color-primary-tint-100-s: var(--color-primary-s);
  --color-primary-tint-100-l: calc(var(--color-primary-l) + 10%);
  --color-primary-tint-100-a: var(--color-primary-a);
  --color-primary-tint-100: hsla(var(--color-primary-tint-100-h), var(--color-primary-tint-100-s), var(--color-primary-tint-100-l), var(--color-primary-tint-100-a));
  /**
   * Color primary-tint-150 variant variables
   */
  --color-primary-tint-150-h: var(--color-primary-h);
  --color-primary-tint-150-s: var(--color-primary-s);
  --color-primary-tint-150-l: calc(var(--color-primary-l) + 15%);
  --color-primary-tint-150-a: var(--color-primary-a);
  --color-primary-tint-150: hsla(var(--color-primary-tint-150-h), var(--color-primary-tint-150-s), var(--color-primary-tint-150-l), var(--color-primary-tint-150-a));
  /**
   * Color secondary-50 variant variables
   */
  --color-secondary-50-h: var(--color-secondary-h);
  --color-secondary-50-s: var(--color-secondary-s);
  --color-secondary-50-l: 95%;
  --color-secondary-50-a: var(--color-secondary-a);
  --color-secondary-50: hsla(var(--color-secondary-50-h), var(--color-secondary-50-s), var(--color-secondary-50-l), var(--color-secondary-50-a));
  /**
   * Color secondary-100 variant variables
   */
  --color-secondary-100-h: var(--color-secondary-h);
  --color-secondary-100-s: var(--color-secondary-s);
  --color-secondary-100-l: 90%;
  --color-secondary-100-a: var(--color-secondary-a);
  --color-secondary-100: hsla(var(--color-secondary-100-h), var(--color-secondary-100-s), var(--color-secondary-100-l), var(--color-secondary-100-a));
  /**
   * Color secondary-200 variant variables
   */
  --color-secondary-200-h: var(--color-secondary-h);
  --color-secondary-200-s: var(--color-secondary-s);
  --color-secondary-200-l: 80%;
  --color-secondary-200-a: var(--color-secondary-a);
  --color-secondary-200: hsla(var(--color-secondary-200-h), var(--color-secondary-200-s), var(--color-secondary-200-l), var(--color-secondary-200-a));
  /**
   * Color secondary-300 variant variables
   */
  --color-secondary-300-h: var(--color-secondary-h);
  --color-secondary-300-s: var(--color-secondary-s);
  --color-secondary-300-l: 70%;
  --color-secondary-300-a: var(--color-secondary-a);
  --color-secondary-300: hsla(var(--color-secondary-300-h), var(--color-secondary-300-s), var(--color-secondary-300-l), var(--color-secondary-300-a));
  /**
   * Color secondary-400 variant variables
   */
  --color-secondary-400-h: var(--color-secondary-h);
  --color-secondary-400-s: var(--color-secondary-s);
  --color-secondary-400-l: 60%;
  --color-secondary-400-a: var(--color-secondary-a);
  --color-secondary-400: hsla(var(--color-secondary-400-h), var(--color-secondary-400-s), var(--color-secondary-400-l), var(--color-secondary-400-a));
  /**
   * Color secondary-500 variant variables
   */
  --color-secondary-500-h: var(--color-secondary-h);
  --color-secondary-500-s: var(--color-secondary-s);
  --color-secondary-500-l: 50%;
  --color-secondary-500-a: var(--color-secondary-a);
  --color-secondary-500: hsla(var(--color-secondary-500-h), var(--color-secondary-500-s), var(--color-secondary-500-l), var(--color-secondary-500-a));
  /**
   * Color secondary-600 variant variables
   */
  --color-secondary-600-h: var(--color-secondary-h);
  --color-secondary-600-s: var(--color-secondary-s);
  --color-secondary-600-l: 40%;
  --color-secondary-600-a: var(--color-secondary-a);
  --color-secondary-600: hsla(var(--color-secondary-600-h), var(--color-secondary-600-s), var(--color-secondary-600-l), var(--color-secondary-600-a));
  /**
   * Color secondary-700 variant variables
   */
  --color-secondary-700-h: var(--color-secondary-h);
  --color-secondary-700-s: var(--color-secondary-s);
  --color-secondary-700-l: 30%;
  --color-secondary-700-a: var(--color-secondary-a);
  --color-secondary-700: hsla(var(--color-secondary-700-h), var(--color-secondary-700-s), var(--color-secondary-700-l), var(--color-secondary-700-a));
  /**
   * Color secondary-800 variant variables
   */
  --color-secondary-800-h: var(--color-secondary-h);
  --color-secondary-800-s: var(--color-secondary-s);
  --color-secondary-800-l: 20%;
  --color-secondary-800-a: var(--color-secondary-a);
  --color-secondary-800: hsla(var(--color-secondary-800-h), var(--color-secondary-800-s), var(--color-secondary-800-l), var(--color-secondary-800-a));
  /**
   * Color secondary-900 variant variables
   */
  --color-secondary-900-h: var(--color-secondary-h);
  --color-secondary-900-s: var(--color-secondary-s);
  --color-secondary-900-l: 10%;
  --color-secondary-900-a: var(--color-secondary-a);
  --color-secondary-900: hsla(var(--color-secondary-900-h), var(--color-secondary-900-s), var(--color-secondary-900-l), var(--color-secondary-900-a));
  /**
   * Color secondary-shade-150 variant variables
   */
  --color-secondary-shade-150-h: var(--color-secondary-h);
  --color-secondary-shade-150-s: var(--color-secondary-s);
  --color-secondary-shade-150-l: calc(var(--color-secondary-l) - 15%);
  --color-secondary-shade-150-a: var(--color-secondary-a);
  --color-secondary-shade-150: hsla(var(--color-secondary-shade-150-h), var(--color-secondary-shade-150-s), var(--color-secondary-shade-150-l), var(--color-secondary-shade-150-a));
  /**
   * Color secondary-shade-100 variant variables
   */
  --color-secondary-shade-100-h: var(--color-secondary-h);
  --color-secondary-shade-100-s: var(--color-secondary-s);
  --color-secondary-shade-100-l: calc(var(--color-secondary-l) - 10%);
  --color-secondary-shade-100-a: var(--color-secondary-a);
  --color-secondary-shade-100: hsla(var(--color-secondary-shade-100-h), var(--color-secondary-shade-100-s), var(--color-secondary-shade-100-l), var(--color-secondary-shade-100-a));
  /**
   * Color secondary-shade-50 variant variables
   */
  --color-secondary-shade-50-h: var(--color-secondary-h);
  --color-secondary-shade-50-s: var(--color-secondary-s);
  --color-secondary-shade-50-l: calc(var(--color-secondary-l) - 5%);
  --color-secondary-shade-50-a: var(--color-secondary-a);
  --color-secondary-shade-50: hsla(var(--color-secondary-shade-50-h), var(--color-secondary-shade-50-s), var(--color-secondary-shade-50-l), var(--color-secondary-shade-50-a));
  /**
   * Color secondary-tint-50 variant variables
   */
  --color-secondary-tint-50-h: var(--color-secondary-h);
  --color-secondary-tint-50-s: var(--color-secondary-s);
  --color-secondary-tint-50-l: calc(var(--color-secondary-l) + 5%);
  --color-secondary-tint-50-a: var(--color-secondary-a);
  --color-secondary-tint-50: hsla(var(--color-secondary-tint-50-h), var(--color-secondary-tint-50-s), var(--color-secondary-tint-50-l), var(--color-secondary-tint-50-a));
  /**
   * Color secondary-tint-100 variant variables
   */
  --color-secondary-tint-100-h: var(--color-secondary-h);
  --color-secondary-tint-100-s: var(--color-secondary-s);
  --color-secondary-tint-100-l: calc(var(--color-secondary-l) + 10%);
  --color-secondary-tint-100-a: var(--color-secondary-a);
  --color-secondary-tint-100: hsla(var(--color-secondary-tint-100-h), var(--color-secondary-tint-100-s), var(--color-secondary-tint-100-l), var(--color-secondary-tint-100-a));
  /**
   * Color secondary-tint-150 variant variables
   */
  --color-secondary-tint-150-h: var(--color-secondary-h);
  --color-secondary-tint-150-s: var(--color-secondary-s);
  --color-secondary-tint-150-l: calc(var(--color-secondary-l) + 15%);
  --color-secondary-tint-150-a: var(--color-secondary-a);
  --color-secondary-tint-150: hsla(var(--color-secondary-tint-150-h), var(--color-secondary-tint-150-s), var(--color-secondary-tint-150-l), var(--color-secondary-tint-150-a));
  /**
   * Color info-50 variant variables
   */
  --color-info-50-h: var(--color-info-h);
  --color-info-50-s: var(--color-info-s);
  --color-info-50-l: 95%;
  --color-info-50-a: var(--color-info-a);
  --color-info-50: hsla(var(--color-info-50-h), var(--color-info-50-s), var(--color-info-50-l), var(--color-info-50-a));
  /**
   * Color info-100 variant variables
   */
  --color-info-100-h: var(--color-info-h);
  --color-info-100-s: var(--color-info-s);
  --color-info-100-l: 90%;
  --color-info-100-a: var(--color-info-a);
  --color-info-100: hsla(var(--color-info-100-h), var(--color-info-100-s), var(--color-info-100-l), var(--color-info-100-a));
  /**
   * Color info-200 variant variables
   */
  --color-info-200-h: var(--color-info-h);
  --color-info-200-s: var(--color-info-s);
  --color-info-200-l: 80%;
  --color-info-200-a: var(--color-info-a);
  --color-info-200: hsla(var(--color-info-200-h), var(--color-info-200-s), var(--color-info-200-l), var(--color-info-200-a));
  /**
   * Color info-300 variant variables
   */
  --color-info-300-h: var(--color-info-h);
  --color-info-300-s: var(--color-info-s);
  --color-info-300-l: 70%;
  --color-info-300-a: var(--color-info-a);
  --color-info-300: hsla(var(--color-info-300-h), var(--color-info-300-s), var(--color-info-300-l), var(--color-info-300-a));
  /**
   * Color info-400 variant variables
   */
  --color-info-400-h: var(--color-info-h);
  --color-info-400-s: var(--color-info-s);
  --color-info-400-l: 60%;
  --color-info-400-a: var(--color-info-a);
  --color-info-400: hsla(var(--color-info-400-h), var(--color-info-400-s), var(--color-info-400-l), var(--color-info-400-a));
  /**
   * Color info-500 variant variables
   */
  --color-info-500-h: var(--color-info-h);
  --color-info-500-s: var(--color-info-s);
  --color-info-500-l: 50%;
  --color-info-500-a: var(--color-info-a);
  --color-info-500: hsla(var(--color-info-500-h), var(--color-info-500-s), var(--color-info-500-l), var(--color-info-500-a));
  /**
   * Color info-600 variant variables
   */
  --color-info-600-h: var(--color-info-h);
  --color-info-600-s: var(--color-info-s);
  --color-info-600-l: 40%;
  --color-info-600-a: var(--color-info-a);
  --color-info-600: hsla(var(--color-info-600-h), var(--color-info-600-s), var(--color-info-600-l), var(--color-info-600-a));
  /**
   * Color info-700 variant variables
   */
  --color-info-700-h: var(--color-info-h);
  --color-info-700-s: var(--color-info-s);
  --color-info-700-l: 30%;
  --color-info-700-a: var(--color-info-a);
  --color-info-700: hsla(var(--color-info-700-h), var(--color-info-700-s), var(--color-info-700-l), var(--color-info-700-a));
  /**
   * Color info-800 variant variables
   */
  --color-info-800-h: var(--color-info-h);
  --color-info-800-s: var(--color-info-s);
  --color-info-800-l: 20%;
  --color-info-800-a: var(--color-info-a);
  --color-info-800: hsla(var(--color-info-800-h), var(--color-info-800-s), var(--color-info-800-l), var(--color-info-800-a));
  /**
   * Color info-900 variant variables
   */
  --color-info-900-h: var(--color-info-h);
  --color-info-900-s: var(--color-info-s);
  --color-info-900-l: 10%;
  --color-info-900-a: var(--color-info-a);
  --color-info-900: hsla(var(--color-info-900-h), var(--color-info-900-s), var(--color-info-900-l), var(--color-info-900-a));
  /**
   * Color info-shade-150 variant variables
   */
  --color-info-shade-150-h: var(--color-info-h);
  --color-info-shade-150-s: var(--color-info-s);
  --color-info-shade-150-l: calc(var(--color-info-l) - 15%);
  --color-info-shade-150-a: var(--color-info-a);
  --color-info-shade-150: hsla(var(--color-info-shade-150-h), var(--color-info-shade-150-s), var(--color-info-shade-150-l), var(--color-info-shade-150-a));
  /**
   * Color info-shade-100 variant variables
   */
  --color-info-shade-100-h: var(--color-info-h);
  --color-info-shade-100-s: var(--color-info-s);
  --color-info-shade-100-l: calc(var(--color-info-l) - 10%);
  --color-info-shade-100-a: var(--color-info-a);
  --color-info-shade-100: hsla(var(--color-info-shade-100-h), var(--color-info-shade-100-s), var(--color-info-shade-100-l), var(--color-info-shade-100-a));
  /**
   * Color info-shade-50 variant variables
   */
  --color-info-shade-50-h: var(--color-info-h);
  --color-info-shade-50-s: var(--color-info-s);
  --color-info-shade-50-l: calc(var(--color-info-l) - 5%);
  --color-info-shade-50-a: var(--color-info-a);
  --color-info-shade-50: hsla(var(--color-info-shade-50-h), var(--color-info-shade-50-s), var(--color-info-shade-50-l), var(--color-info-shade-50-a));
  /**
   * Color info-tint-50 variant variables
   */
  --color-info-tint-50-h: var(--color-info-h);
  --color-info-tint-50-s: var(--color-info-s);
  --color-info-tint-50-l: calc(var(--color-info-l) + 5%);
  --color-info-tint-50-a: var(--color-info-a);
  --color-info-tint-50: hsla(var(--color-info-tint-50-h), var(--color-info-tint-50-s), var(--color-info-tint-50-l), var(--color-info-tint-50-a));
  /**
   * Color info-tint-100 variant variables
   */
  --color-info-tint-100-h: var(--color-info-h);
  --color-info-tint-100-s: var(--color-info-s);
  --color-info-tint-100-l: calc(var(--color-info-l) + 10%);
  --color-info-tint-100-a: var(--color-info-a);
  --color-info-tint-100: hsla(var(--color-info-tint-100-h), var(--color-info-tint-100-s), var(--color-info-tint-100-l), var(--color-info-tint-100-a));
  /**
   * Color info-tint-150 variant variables
   */
  --color-info-tint-150-h: var(--color-info-h);
  --color-info-tint-150-s: var(--color-info-s);
  --color-info-tint-150-l: calc(var(--color-info-l) + 15%);
  --color-info-tint-150-a: var(--color-info-a);
  --color-info-tint-150: hsla(var(--color-info-tint-150-h), var(--color-info-tint-150-s), var(--color-info-tint-150-l), var(--color-info-tint-150-a));
  /**
   * Color success-50 variant variables
   */
  --color-success-50-h: var(--color-success-h);
  --color-success-50-s: var(--color-success-s);
  --color-success-50-l: 95%;
  --color-success-50-a: var(--color-success-a);
  --color-success-50: hsla(var(--color-success-50-h), var(--color-success-50-s), var(--color-success-50-l), var(--color-success-50-a));
  /**
   * Color success-100 variant variables
   */
  --color-success-100-h: var(--color-success-h);
  --color-success-100-s: var(--color-success-s);
  --color-success-100-l: 90%;
  --color-success-100-a: var(--color-success-a);
  --color-success-100: hsla(var(--color-success-100-h), var(--color-success-100-s), var(--color-success-100-l), var(--color-success-100-a));
  /**
   * Color success-200 variant variables
   */
  --color-success-200-h: var(--color-success-h);
  --color-success-200-s: var(--color-success-s);
  --color-success-200-l: 80%;
  --color-success-200-a: var(--color-success-a);
  --color-success-200: hsla(var(--color-success-200-h), var(--color-success-200-s), var(--color-success-200-l), var(--color-success-200-a));
  /**
   * Color success-300 variant variables
   */
  --color-success-300-h: var(--color-success-h);
  --color-success-300-s: var(--color-success-s);
  --color-success-300-l: 70%;
  --color-success-300-a: var(--color-success-a);
  --color-success-300: hsla(var(--color-success-300-h), var(--color-success-300-s), var(--color-success-300-l), var(--color-success-300-a));
  /**
   * Color success-400 variant variables
   */
  --color-success-400-h: var(--color-success-h);
  --color-success-400-s: var(--color-success-s);
  --color-success-400-l: 60%;
  --color-success-400-a: var(--color-success-a);
  --color-success-400: hsla(var(--color-success-400-h), var(--color-success-400-s), var(--color-success-400-l), var(--color-success-400-a));
  /**
   * Color success-500 variant variables
   */
  --color-success-500-h: var(--color-success-h);
  --color-success-500-s: var(--color-success-s);
  --color-success-500-l: 50%;
  --color-success-500-a: var(--color-success-a);
  --color-success-500: hsla(var(--color-success-500-h), var(--color-success-500-s), var(--color-success-500-l), var(--color-success-500-a));
  /**
   * Color success-600 variant variables
   */
  --color-success-600-h: var(--color-success-h);
  --color-success-600-s: var(--color-success-s);
  --color-success-600-l: 40%;
  --color-success-600-a: var(--color-success-a);
  --color-success-600: hsla(var(--color-success-600-h), var(--color-success-600-s), var(--color-success-600-l), var(--color-success-600-a));
  /**
   * Color success-700 variant variables
   */
  --color-success-700-h: var(--color-success-h);
  --color-success-700-s: var(--color-success-s);
  --color-success-700-l: 30%;
  --color-success-700-a: var(--color-success-a);
  --color-success-700: hsla(var(--color-success-700-h), var(--color-success-700-s), var(--color-success-700-l), var(--color-success-700-a));
  /**
   * Color success-800 variant variables
   */
  --color-success-800-h: var(--color-success-h);
  --color-success-800-s: var(--color-success-s);
  --color-success-800-l: 20%;
  --color-success-800-a: var(--color-success-a);
  --color-success-800: hsla(var(--color-success-800-h), var(--color-success-800-s), var(--color-success-800-l), var(--color-success-800-a));
  /**
   * Color success-900 variant variables
   */
  --color-success-900-h: var(--color-success-h);
  --color-success-900-s: var(--color-success-s);
  --color-success-900-l: 10%;
  --color-success-900-a: var(--color-success-a);
  --color-success-900: hsla(var(--color-success-900-h), var(--color-success-900-s), var(--color-success-900-l), var(--color-success-900-a));
  /**
   * Color success-shade-150 variant variables
   */
  --color-success-shade-150-h: var(--color-success-h);
  --color-success-shade-150-s: var(--color-success-s);
  --color-success-shade-150-l: calc(var(--color-success-l) - 15%);
  --color-success-shade-150-a: var(--color-success-a);
  --color-success-shade-150: hsla(var(--color-success-shade-150-h), var(--color-success-shade-150-s), var(--color-success-shade-150-l), var(--color-success-shade-150-a));
  /**
   * Color success-shade-100 variant variables
   */
  --color-success-shade-100-h: var(--color-success-h);
  --color-success-shade-100-s: var(--color-success-s);
  --color-success-shade-100-l: calc(var(--color-success-l) - 10%);
  --color-success-shade-100-a: var(--color-success-a);
  --color-success-shade-100: hsla(var(--color-success-shade-100-h), var(--color-success-shade-100-s), var(--color-success-shade-100-l), var(--color-success-shade-100-a));
  /**
   * Color success-shade-50 variant variables
   */
  --color-success-shade-50-h: var(--color-success-h);
  --color-success-shade-50-s: var(--color-success-s);
  --color-success-shade-50-l: calc(var(--color-success-l) - 5%);
  --color-success-shade-50-a: var(--color-success-a);
  --color-success-shade-50: hsla(var(--color-success-shade-50-h), var(--color-success-shade-50-s), var(--color-success-shade-50-l), var(--color-success-shade-50-a));
  /**
   * Color success-tint-50 variant variables
   */
  --color-success-tint-50-h: var(--color-success-h);
  --color-success-tint-50-s: var(--color-success-s);
  --color-success-tint-50-l: calc(var(--color-success-l) + 5%);
  --color-success-tint-50-a: var(--color-success-a);
  --color-success-tint-50: hsla(var(--color-success-tint-50-h), var(--color-success-tint-50-s), var(--color-success-tint-50-l), var(--color-success-tint-50-a));
  /**
   * Color success-tint-100 variant variables
   */
  --color-success-tint-100-h: var(--color-success-h);
  --color-success-tint-100-s: var(--color-success-s);
  --color-success-tint-100-l: calc(var(--color-success-l) + 10%);
  --color-success-tint-100-a: var(--color-success-a);
  --color-success-tint-100: hsla(var(--color-success-tint-100-h), var(--color-success-tint-100-s), var(--color-success-tint-100-l), var(--color-success-tint-100-a));
  /**
   * Color success-tint-150 variant variables
   */
  --color-success-tint-150-h: var(--color-success-h);
  --color-success-tint-150-s: var(--color-success-s);
  --color-success-tint-150-l: calc(var(--color-success-l) + 15%);
  --color-success-tint-150-a: var(--color-success-a);
  --color-success-tint-150: hsla(var(--color-success-tint-150-h), var(--color-success-tint-150-s), var(--color-success-tint-150-l), var(--color-success-tint-150-a));
  /**
   * Color warning-50 variant variables
   */
  --color-warning-50-h: var(--color-warning-h);
  --color-warning-50-s: var(--color-warning-s);
  --color-warning-50-l: 95%;
  --color-warning-50-a: var(--color-warning-a);
  --color-warning-50: hsla(var(--color-warning-50-h), var(--color-warning-50-s), var(--color-warning-50-l), var(--color-warning-50-a));
  /**
   * Color warning-100 variant variables
   */
  --color-warning-100-h: var(--color-warning-h);
  --color-warning-100-s: var(--color-warning-s);
  --color-warning-100-l: 90%;
  --color-warning-100-a: var(--color-warning-a);
  --color-warning-100: hsla(var(--color-warning-100-h), var(--color-warning-100-s), var(--color-warning-100-l), var(--color-warning-100-a));
  /**
   * Color warning-200 variant variables
   */
  --color-warning-200-h: var(--color-warning-h);
  --color-warning-200-s: var(--color-warning-s);
  --color-warning-200-l: 80%;
  --color-warning-200-a: var(--color-warning-a);
  --color-warning-200: hsla(var(--color-warning-200-h), var(--color-warning-200-s), var(--color-warning-200-l), var(--color-warning-200-a));
  /**
   * Color warning-300 variant variables
   */
  --color-warning-300-h: var(--color-warning-h);
  --color-warning-300-s: var(--color-warning-s);
  --color-warning-300-l: 70%;
  --color-warning-300-a: var(--color-warning-a);
  --color-warning-300: hsla(var(--color-warning-300-h), var(--color-warning-300-s), var(--color-warning-300-l), var(--color-warning-300-a));
  /**
   * Color warning-400 variant variables
   */
  --color-warning-400-h: var(--color-warning-h);
  --color-warning-400-s: var(--color-warning-s);
  --color-warning-400-l: 60%;
  --color-warning-400-a: var(--color-warning-a);
  --color-warning-400: hsla(var(--color-warning-400-h), var(--color-warning-400-s), var(--color-warning-400-l), var(--color-warning-400-a));
  /**
   * Color warning-500 variant variables
   */
  --color-warning-500-h: var(--color-warning-h);
  --color-warning-500-s: var(--color-warning-s);
  --color-warning-500-l: 50%;
  --color-warning-500-a: var(--color-warning-a);
  --color-warning-500: hsla(var(--color-warning-500-h), var(--color-warning-500-s), var(--color-warning-500-l), var(--color-warning-500-a));
  /**
   * Color warning-600 variant variables
   */
  --color-warning-600-h: var(--color-warning-h);
  --color-warning-600-s: var(--color-warning-s);
  --color-warning-600-l: 40%;
  --color-warning-600-a: var(--color-warning-a);
  --color-warning-600: hsla(var(--color-warning-600-h), var(--color-warning-600-s), var(--color-warning-600-l), var(--color-warning-600-a));
  /**
   * Color warning-700 variant variables
   */
  --color-warning-700-h: var(--color-warning-h);
  --color-warning-700-s: var(--color-warning-s);
  --color-warning-700-l: 30%;
  --color-warning-700-a: var(--color-warning-a);
  --color-warning-700: hsla(var(--color-warning-700-h), var(--color-warning-700-s), var(--color-warning-700-l), var(--color-warning-700-a));
  /**
   * Color warning-800 variant variables
   */
  --color-warning-800-h: var(--color-warning-h);
  --color-warning-800-s: var(--color-warning-s);
  --color-warning-800-l: 20%;
  --color-warning-800-a: var(--color-warning-a);
  --color-warning-800: hsla(var(--color-warning-800-h), var(--color-warning-800-s), var(--color-warning-800-l), var(--color-warning-800-a));
  /**
   * Color warning-900 variant variables
   */
  --color-warning-900-h: var(--color-warning-h);
  --color-warning-900-s: var(--color-warning-s);
  --color-warning-900-l: 10%;
  --color-warning-900-a: var(--color-warning-a);
  --color-warning-900: hsla(var(--color-warning-900-h), var(--color-warning-900-s), var(--color-warning-900-l), var(--color-warning-900-a));
  /**
   * Color warning-shade-150 variant variables
   */
  --color-warning-shade-150-h: var(--color-warning-h);
  --color-warning-shade-150-s: var(--color-warning-s);
  --color-warning-shade-150-l: calc(var(--color-warning-l) - 15%);
  --color-warning-shade-150-a: var(--color-warning-a);
  --color-warning-shade-150: hsla(var(--color-warning-shade-150-h), var(--color-warning-shade-150-s), var(--color-warning-shade-150-l), var(--color-warning-shade-150-a));
  /**
   * Color warning-shade-100 variant variables
   */
  --color-warning-shade-100-h: var(--color-warning-h);
  --color-warning-shade-100-s: var(--color-warning-s);
  --color-warning-shade-100-l: calc(var(--color-warning-l) - 10%);
  --color-warning-shade-100-a: var(--color-warning-a);
  --color-warning-shade-100: hsla(var(--color-warning-shade-100-h), var(--color-warning-shade-100-s), var(--color-warning-shade-100-l), var(--color-warning-shade-100-a));
  /**
   * Color warning-shade-50 variant variables
   */
  --color-warning-shade-50-h: var(--color-warning-h);
  --color-warning-shade-50-s: var(--color-warning-s);
  --color-warning-shade-50-l: calc(var(--color-warning-l) - 5%);
  --color-warning-shade-50-a: var(--color-warning-a);
  --color-warning-shade-50: hsla(var(--color-warning-shade-50-h), var(--color-warning-shade-50-s), var(--color-warning-shade-50-l), var(--color-warning-shade-50-a));
  /**
   * Color warning-tint-50 variant variables
   */
  --color-warning-tint-50-h: var(--color-warning-h);
  --color-warning-tint-50-s: var(--color-warning-s);
  --color-warning-tint-50-l: calc(var(--color-warning-l) + 5%);
  --color-warning-tint-50-a: var(--color-warning-a);
  --color-warning-tint-50: hsla(var(--color-warning-tint-50-h), var(--color-warning-tint-50-s), var(--color-warning-tint-50-l), var(--color-warning-tint-50-a));
  /**
   * Color warning-tint-100 variant variables
   */
  --color-warning-tint-100-h: var(--color-warning-h);
  --color-warning-tint-100-s: var(--color-warning-s);
  --color-warning-tint-100-l: calc(var(--color-warning-l) + 10%);
  --color-warning-tint-100-a: var(--color-warning-a);
  --color-warning-tint-100: hsla(var(--color-warning-tint-100-h), var(--color-warning-tint-100-s), var(--color-warning-tint-100-l), var(--color-warning-tint-100-a));
  /**
   * Color warning-tint-150 variant variables
   */
  --color-warning-tint-150-h: var(--color-warning-h);
  --color-warning-tint-150-s: var(--color-warning-s);
  --color-warning-tint-150-l: calc(var(--color-warning-l) + 15%);
  --color-warning-tint-150-a: var(--color-warning-a);
  --color-warning-tint-150: hsla(var(--color-warning-tint-150-h), var(--color-warning-tint-150-s), var(--color-warning-tint-150-l), var(--color-warning-tint-150-a));
  /**
   * Color danger-50 variant variables
   */
  --color-danger-50-h: var(--color-danger-h);
  --color-danger-50-s: var(--color-danger-s);
  --color-danger-50-l: 95%;
  --color-danger-50-a: var(--color-danger-a);
  --color-danger-50: hsla(var(--color-danger-50-h), var(--color-danger-50-s), var(--color-danger-50-l), var(--color-danger-50-a));
  /**
   * Color danger-100 variant variables
   */
  --color-danger-100-h: var(--color-danger-h);
  --color-danger-100-s: var(--color-danger-s);
  --color-danger-100-l: 90%;
  --color-danger-100-a: var(--color-danger-a);
  --color-danger-100: hsla(var(--color-danger-100-h), var(--color-danger-100-s), var(--color-danger-100-l), var(--color-danger-100-a));
  /**
   * Color danger-200 variant variables
   */
  --color-danger-200-h: var(--color-danger-h);
  --color-danger-200-s: var(--color-danger-s);
  --color-danger-200-l: 80%;
  --color-danger-200-a: var(--color-danger-a);
  --color-danger-200: hsla(var(--color-danger-200-h), var(--color-danger-200-s), var(--color-danger-200-l), var(--color-danger-200-a));
  /**
   * Color danger-300 variant variables
   */
  --color-danger-300-h: var(--color-danger-h);
  --color-danger-300-s: var(--color-danger-s);
  --color-danger-300-l: 70%;
  --color-danger-300-a: var(--color-danger-a);
  --color-danger-300: hsla(var(--color-danger-300-h), var(--color-danger-300-s), var(--color-danger-300-l), var(--color-danger-300-a));
  /**
   * Color danger-400 variant variables
   */
  --color-danger-400-h: var(--color-danger-h);
  --color-danger-400-s: var(--color-danger-s);
  --color-danger-400-l: 60%;
  --color-danger-400-a: var(--color-danger-a);
  --color-danger-400: hsla(var(--color-danger-400-h), var(--color-danger-400-s), var(--color-danger-400-l), var(--color-danger-400-a));
  /**
   * Color danger-500 variant variables
   */
  --color-danger-500-h: var(--color-danger-h);
  --color-danger-500-s: var(--color-danger-s);
  --color-danger-500-l: 50%;
  --color-danger-500-a: var(--color-danger-a);
  --color-danger-500: hsla(var(--color-danger-500-h), var(--color-danger-500-s), var(--color-danger-500-l), var(--color-danger-500-a));
  /**
   * Color danger-600 variant variables
   */
  --color-danger-600-h: var(--color-danger-h);
  --color-danger-600-s: var(--color-danger-s);
  --color-danger-600-l: 40%;
  --color-danger-600-a: var(--color-danger-a);
  --color-danger-600: hsla(var(--color-danger-600-h), var(--color-danger-600-s), var(--color-danger-600-l), var(--color-danger-600-a));
  /**
   * Color danger-700 variant variables
   */
  --color-danger-700-h: var(--color-danger-h);
  --color-danger-700-s: var(--color-danger-s);
  --color-danger-700-l: 30%;
  --color-danger-700-a: var(--color-danger-a);
  --color-danger-700: hsla(var(--color-danger-700-h), var(--color-danger-700-s), var(--color-danger-700-l), var(--color-danger-700-a));
  /**
   * Color danger-800 variant variables
   */
  --color-danger-800-h: var(--color-danger-h);
  --color-danger-800-s: var(--color-danger-s);
  --color-danger-800-l: 20%;
  --color-danger-800-a: var(--color-danger-a);
  --color-danger-800: hsla(var(--color-danger-800-h), var(--color-danger-800-s), var(--color-danger-800-l), var(--color-danger-800-a));
  /**
   * Color danger-900 variant variables
   */
  --color-danger-900-h: var(--color-danger-h);
  --color-danger-900-s: var(--color-danger-s);
  --color-danger-900-l: 10%;
  --color-danger-900-a: var(--color-danger-a);
  --color-danger-900: hsla(var(--color-danger-900-h), var(--color-danger-900-s), var(--color-danger-900-l), var(--color-danger-900-a));
  /**
   * Color danger-shade-150 variant variables
   */
  --color-danger-shade-150-h: var(--color-danger-h);
  --color-danger-shade-150-s: var(--color-danger-s);
  --color-danger-shade-150-l: calc(var(--color-danger-l) - 15%);
  --color-danger-shade-150-a: var(--color-danger-a);
  --color-danger-shade-150: hsla(var(--color-danger-shade-150-h), var(--color-danger-shade-150-s), var(--color-danger-shade-150-l), var(--color-danger-shade-150-a));
  /**
   * Color danger-shade-100 variant variables
   */
  --color-danger-shade-100-h: var(--color-danger-h);
  --color-danger-shade-100-s: var(--color-danger-s);
  --color-danger-shade-100-l: calc(var(--color-danger-l) - 10%);
  --color-danger-shade-100-a: var(--color-danger-a);
  --color-danger-shade-100: hsla(var(--color-danger-shade-100-h), var(--color-danger-shade-100-s), var(--color-danger-shade-100-l), var(--color-danger-shade-100-a));
  /**
   * Color danger-shade-50 variant variables
   */
  --color-danger-shade-50-h: var(--color-danger-h);
  --color-danger-shade-50-s: var(--color-danger-s);
  --color-danger-shade-50-l: calc(var(--color-danger-l) - 5%);
  --color-danger-shade-50-a: var(--color-danger-a);
  --color-danger-shade-50: hsla(var(--color-danger-shade-50-h), var(--color-danger-shade-50-s), var(--color-danger-shade-50-l), var(--color-danger-shade-50-a));
  /**
   * Color danger-tint-50 variant variables
   */
  --color-danger-tint-50-h: var(--color-danger-h);
  --color-danger-tint-50-s: var(--color-danger-s);
  --color-danger-tint-50-l: calc(var(--color-danger-l) + 5%);
  --color-danger-tint-50-a: var(--color-danger-a);
  --color-danger-tint-50: hsla(var(--color-danger-tint-50-h), var(--color-danger-tint-50-s), var(--color-danger-tint-50-l), var(--color-danger-tint-50-a));
  /**
   * Color danger-tint-100 variant variables
   */
  --color-danger-tint-100-h: var(--color-danger-h);
  --color-danger-tint-100-s: var(--color-danger-s);
  --color-danger-tint-100-l: calc(var(--color-danger-l) + 10%);
  --color-danger-tint-100-a: var(--color-danger-a);
  --color-danger-tint-100: hsla(var(--color-danger-tint-100-h), var(--color-danger-tint-100-s), var(--color-danger-tint-100-l), var(--color-danger-tint-100-a));
  /**
   * Color danger-tint-150 variant variables
   */
  --color-danger-tint-150-h: var(--color-danger-h);
  --color-danger-tint-150-s: var(--color-danger-s);
  --color-danger-tint-150-l: calc(var(--color-danger-l) + 15%);
  --color-danger-tint-150-a: var(--color-danger-a);
  --color-danger-tint-150: hsla(var(--color-danger-tint-150-h), var(--color-danger-tint-150-s), var(--color-danger-tint-150-l), var(--color-danger-tint-150-a));
  /**
   * Color gray-50 variant variables
   */
  --color-gray-50-h: var(--color-gray-h);
  --color-gray-50-s: var(--color-gray-s);
  --color-gray-50-l: 95%;
  --color-gray-50-a: var(--color-gray-a);
  --color-gray-50: hsla(var(--color-gray-50-h), var(--color-gray-50-s), var(--color-gray-50-l), var(--color-gray-50-a));
  /**
   * Color gray-100 variant variables
   */
  --color-gray-100-h: var(--color-gray-h);
  --color-gray-100-s: var(--color-gray-s);
  --color-gray-100-l: 90%;
  --color-gray-100-a: var(--color-gray-a);
  --color-gray-100: hsla(var(--color-gray-100-h), var(--color-gray-100-s), var(--color-gray-100-l), var(--color-gray-100-a));
  /**
   * Color gray-200 variant variables
   */
  --color-gray-200-h: var(--color-gray-h);
  --color-gray-200-s: var(--color-gray-s);
  --color-gray-200-l: 80%;
  --color-gray-200-a: var(--color-gray-a);
  --color-gray-200: hsla(var(--color-gray-200-h), var(--color-gray-200-s), var(--color-gray-200-l), var(--color-gray-200-a));
  /**
   * Color gray-300 variant variables
   */
  --color-gray-300-h: var(--color-gray-h);
  --color-gray-300-s: var(--color-gray-s);
  --color-gray-300-l: 70%;
  --color-gray-300-a: var(--color-gray-a);
  --color-gray-300: hsla(var(--color-gray-300-h), var(--color-gray-300-s), var(--color-gray-300-l), var(--color-gray-300-a));
  /**
   * Color gray-400 variant variables
   */
  --color-gray-400-h: var(--color-gray-h);
  --color-gray-400-s: var(--color-gray-s);
  --color-gray-400-l: 60%;
  --color-gray-400-a: var(--color-gray-a);
  --color-gray-400: hsla(var(--color-gray-400-h), var(--color-gray-400-s), var(--color-gray-400-l), var(--color-gray-400-a));
  /**
   * Color gray-500 variant variables
   */
  --color-gray-500-h: var(--color-gray-h);
  --color-gray-500-s: var(--color-gray-s);
  --color-gray-500-l: 50%;
  --color-gray-500-a: var(--color-gray-a);
  --color-gray-500: hsla(var(--color-gray-500-h), var(--color-gray-500-s), var(--color-gray-500-l), var(--color-gray-500-a));
  /**
   * Color gray-600 variant variables
   */
  --color-gray-600-h: var(--color-gray-h);
  --color-gray-600-s: var(--color-gray-s);
  --color-gray-600-l: 40%;
  --color-gray-600-a: var(--color-gray-a);
  --color-gray-600: hsla(var(--color-gray-600-h), var(--color-gray-600-s), var(--color-gray-600-l), var(--color-gray-600-a));
  /**
   * Color gray-700 variant variables
   */
  --color-gray-700-h: var(--color-gray-h);
  --color-gray-700-s: var(--color-gray-s);
  --color-gray-700-l: 30%;
  --color-gray-700-a: var(--color-gray-a);
  --color-gray-700: hsla(var(--color-gray-700-h), var(--color-gray-700-s), var(--color-gray-700-l), var(--color-gray-700-a));
  /**
   * Color gray-800 variant variables
   */
  --color-gray-800-h: var(--color-gray-h);
  --color-gray-800-s: var(--color-gray-s);
  --color-gray-800-l: 20%;
  --color-gray-800-a: var(--color-gray-a);
  --color-gray-800: hsla(var(--color-gray-800-h), var(--color-gray-800-s), var(--color-gray-800-l), var(--color-gray-800-a));
  /**
   * Color gray-900 variant variables
   */
  --color-gray-900-h: var(--color-gray-h);
  --color-gray-900-s: var(--color-gray-s);
  --color-gray-900-l: 10%;
  --color-gray-900-a: var(--color-gray-a);
  --color-gray-900: hsla(var(--color-gray-900-h), var(--color-gray-900-s), var(--color-gray-900-l), var(--color-gray-900-a));
  /**
   * Color gray-shade-150 variant variables
   */
  --color-gray-shade-150-h: var(--color-gray-h);
  --color-gray-shade-150-s: var(--color-gray-s);
  --color-gray-shade-150-l: calc(var(--color-gray-l) - 15%);
  --color-gray-shade-150-a: var(--color-gray-a);
  --color-gray-shade-150: hsla(var(--color-gray-shade-150-h), var(--color-gray-shade-150-s), var(--color-gray-shade-150-l), var(--color-gray-shade-150-a));
  /**
   * Color gray-shade-100 variant variables
   */
  --color-gray-shade-100-h: var(--color-gray-h);
  --color-gray-shade-100-s: var(--color-gray-s);
  --color-gray-shade-100-l: calc(var(--color-gray-l) - 10%);
  --color-gray-shade-100-a: var(--color-gray-a);
  --color-gray-shade-100: hsla(var(--color-gray-shade-100-h), var(--color-gray-shade-100-s), var(--color-gray-shade-100-l), var(--color-gray-shade-100-a));
  /**
   * Color gray-shade-50 variant variables
   */
  --color-gray-shade-50-h: var(--color-gray-h);
  --color-gray-shade-50-s: var(--color-gray-s);
  --color-gray-shade-50-l: calc(var(--color-gray-l) - 5%);
  --color-gray-shade-50-a: var(--color-gray-a);
  --color-gray-shade-50: hsla(var(--color-gray-shade-50-h), var(--color-gray-shade-50-s), var(--color-gray-shade-50-l), var(--color-gray-shade-50-a));
  /**
   * Color gray-tint-50 variant variables
   */
  --color-gray-tint-50-h: var(--color-gray-h);
  --color-gray-tint-50-s: var(--color-gray-s);
  --color-gray-tint-50-l: calc(var(--color-gray-l) + 5%);
  --color-gray-tint-50-a: var(--color-gray-a);
  --color-gray-tint-50: hsla(var(--color-gray-tint-50-h), var(--color-gray-tint-50-s), var(--color-gray-tint-50-l), var(--color-gray-tint-50-a));
  /**
   * Color gray-tint-100 variant variables
   */
  --color-gray-tint-100-h: var(--color-gray-h);
  --color-gray-tint-100-s: var(--color-gray-s);
  --color-gray-tint-100-l: calc(var(--color-gray-l) + 10%);
  --color-gray-tint-100-a: var(--color-gray-a);
  --color-gray-tint-100: hsla(var(--color-gray-tint-100-h), var(--color-gray-tint-100-s), var(--color-gray-tint-100-l), var(--color-gray-tint-100-a));
  /**
   * Color gray-tint-150 variant variables
   */
  --color-gray-tint-150-h: var(--color-gray-h);
  --color-gray-tint-150-s: var(--color-gray-s);
  --color-gray-tint-150-l: calc(var(--color-gray-l) + 15%);
  --color-gray-tint-150-a: var(--color-gray-a);
  --color-gray-tint-150: hsla(var(--color-gray-tint-150-h), var(--color-gray-tint-150-s), var(--color-gray-tint-150-l), var(--color-gray-tint-150-a));
  /**
   * Color light-shade-150 variant variables
   */
  --color-light-shade-150-h: var(--color-light-h);
  --color-light-shade-150-s: var(--color-light-s);
  --color-light-shade-150-l: calc(var(--color-light-l) - 15%);
  --color-light-shade-150-a: var(--color-light-a);
  --color-light-shade-150: hsla(var(--color-light-shade-150-h), var(--color-light-shade-150-s), var(--color-light-shade-150-l), var(--color-light-shade-150-a));
  /**
   * Color light-shade-100 variant variables
   */
  --color-light-shade-100-h: var(--color-light-h);
  --color-light-shade-100-s: var(--color-light-s);
  --color-light-shade-100-l: calc(var(--color-light-l) - 10%);
  --color-light-shade-100-a: var(--color-light-a);
  --color-light-shade-100: hsla(var(--color-light-shade-100-h), var(--color-light-shade-100-s), var(--color-light-shade-100-l), var(--color-light-shade-100-a));
  /**
   * Color light-shade-50 variant variables
   */
  --color-light-shade-50-h: var(--color-light-h);
  --color-light-shade-50-s: var(--color-light-s);
  --color-light-shade-50-l: calc(var(--color-light-l) - 5%);
  --color-light-shade-50-a: var(--color-light-a);
  --color-light-shade-50: hsla(var(--color-light-shade-50-h), var(--color-light-shade-50-s), var(--color-light-shade-50-l), var(--color-light-shade-50-a));
  /**
   * Color light-tint-50 variant variables
   */
  --color-light-tint-50-h: var(--color-light-h);
  --color-light-tint-50-s: var(--color-light-s);
  --color-light-tint-50-l: calc(var(--color-light-l) + 5%);
  --color-light-tint-50-a: var(--color-light-a);
  --color-light-tint-50: hsla(var(--color-light-tint-50-h), var(--color-light-tint-50-s), var(--color-light-tint-50-l), var(--color-light-tint-50-a));
  /**
   * Color light-tint-100 variant variables
   */
  --color-light-tint-100-h: var(--color-light-h);
  --color-light-tint-100-s: var(--color-light-s);
  --color-light-tint-100-l: calc(var(--color-light-l) + 10%);
  --color-light-tint-100-a: var(--color-light-a);
  --color-light-tint-100: hsla(var(--color-light-tint-100-h), var(--color-light-tint-100-s), var(--color-light-tint-100-l), var(--color-light-tint-100-a));
  /**
   * Color light-tint-150 variant variables
   */
  --color-light-tint-150-h: var(--color-light-h);
  --color-light-tint-150-s: var(--color-light-s);
  --color-light-tint-150-l: calc(var(--color-light-l) + 15%);
  --color-light-tint-150-a: var(--color-light-a);
  --color-light-tint-150: hsla(var(--color-light-tint-150-h), var(--color-light-tint-150-s), var(--color-light-tint-150-l), var(--color-light-tint-150-a));
  /**
   * Color dark-shade-150 variant variables
   */
  --color-dark-shade-150-h: var(--color-dark-h);
  --color-dark-shade-150-s: var(--color-dark-s);
  --color-dark-shade-150-l: calc(var(--color-dark-l) - 15%);
  --color-dark-shade-150-a: var(--color-dark-a);
  --color-dark-shade-150: hsla(var(--color-dark-shade-150-h), var(--color-dark-shade-150-s), var(--color-dark-shade-150-l), var(--color-dark-shade-150-a));
  /**
   * Color dark-shade-100 variant variables
   */
  --color-dark-shade-100-h: var(--color-dark-h);
  --color-dark-shade-100-s: var(--color-dark-s);
  --color-dark-shade-100-l: calc(var(--color-dark-l) - 10%);
  --color-dark-shade-100-a: var(--color-dark-a);
  --color-dark-shade-100: hsla(var(--color-dark-shade-100-h), var(--color-dark-shade-100-s), var(--color-dark-shade-100-l), var(--color-dark-shade-100-a));
  /**
   * Color dark-shade-50 variant variables
   */
  --color-dark-shade-50-h: var(--color-dark-h);
  --color-dark-shade-50-s: var(--color-dark-s);
  --color-dark-shade-50-l: calc(var(--color-dark-l) - 5%);
  --color-dark-shade-50-a: var(--color-dark-a);
  --color-dark-shade-50: hsla(var(--color-dark-shade-50-h), var(--color-dark-shade-50-s), var(--color-dark-shade-50-l), var(--color-dark-shade-50-a));
  /**
   * Color dark-tint-50 variant variables
   */
  --color-dark-tint-50-h: var(--color-dark-h);
  --color-dark-tint-50-s: var(--color-dark-s);
  --color-dark-tint-50-l: calc(var(--color-dark-l) + 5%);
  --color-dark-tint-50-a: var(--color-dark-a);
  --color-dark-tint-50: hsla(var(--color-dark-tint-50-h), var(--color-dark-tint-50-s), var(--color-dark-tint-50-l), var(--color-dark-tint-50-a));
  /**
   * Color dark-tint-100 variant variables
   */
  --color-dark-tint-100-h: var(--color-dark-h);
  --color-dark-tint-100-s: var(--color-dark-s);
  --color-dark-tint-100-l: calc(var(--color-dark-l) + 10%);
  --color-dark-tint-100-a: var(--color-dark-a);
  --color-dark-tint-100: hsla(var(--color-dark-tint-100-h), var(--color-dark-tint-100-s), var(--color-dark-tint-100-l), var(--color-dark-tint-100-a));
  /**
   * Color dark-tint-150 variant variables
   */
  --color-dark-tint-150-h: var(--color-dark-h);
  --color-dark-tint-150-s: var(--color-dark-s);
  --color-dark-tint-150-l: calc(var(--color-dark-l) + 15%);
  --color-dark-tint-150-a: var(--color-dark-a);
  --color-dark-tint-150: hsla(var(--color-dark-tint-150-h), var(--color-dark-tint-150-s), var(--color-dark-tint-150-l), var(--color-dark-tint-150-a));
  /**
   * Text color variables
   */
  --text-color-dark-h: var(--color-dark-h);
  --text-color-dark-s: var(--color-dark-s);
  --text-color-dark-l: var(--color-dark-l);
  --text-color-dark-a: var(--color-dark-a);
  --text-color-dark: hsla(var(--text-color-dark-h), var(--text-color-dark-s), var(--text-color-dark-l), var(--text-color-dark-a));
  --text-color-weak-h: var(--color-gray-700-h);
  --text-color-weak-s: var(--color-gray-700-s);
  --text-color-weak-l: var(--color-gray-700-l);
  --text-color-weak-a: var(--color-gray-700-a);
  --text-color-weak: hsla(var(--text-color-weak-h), var(--text-color-weak-s), var(--text-color-weak-l), var(--text-color-weak-a));
  --text-color-weaker-h: var(--color-gray-500-h);
  --text-color-weaker-s: var(--color-gray-500-s);
  --text-color-weaker-l: var(--color-gray-500-l);
  --text-color-weaker-a: var(--color-gray-500-a);
  --text-color-weaker: hsla(var(--text-color-weaker-h), var(--text-color-weaker-s), var(--text-color-weaker-l), var(--text-color-weaker-a));
  --text-color-weakest-h: var(--color-gray-300-h);
  --text-color-weakest-s: var(--color-gray-300-s);
  --text-color-weakest-l: var(--color-gray-300-l);
  --text-color-weakest-a: var(--color-gray-300-a);
  --text-color-weakest: hsla(var(--text-color-weakest-h), var(--text-color-weakest-s), var(--text-color-weakest-l), var(--text-color-weakest-a));
  --text-color-light-h: var(--color-light-h);
  --text-color-light-s: var(--color-light-s);
  --text-color-light-l: var(--color-light-l);
  --text-color-light-a: var(--color-light-a);
  --text-color-light: hsla(var(--text-color-light-h), var(--text-color-light-s), var(--text-color-light-l), var(--text-color-light-a));
  /**
   * Contrast text color variables
   */
  --contrast-text-color-dark: var(--color-white);
  --contrast-text-color-light: var(--color-gray-900);
  --contrast-text-color-red: var(--contrast-text-color-light);
  --contrast-text-color-orange: var(--contrast-text-color-light);
  --contrast-text-color-yellow: var(--contrast-text-color-light);
  --contrast-text-color-green: var(--contrast-text-color-light);
  --contrast-text-color-teal: var(--contrast-text-color-light);
  --contrast-text-color-blue: var(--contrast-text-color-dark);
  --contrast-text-color-purple: var(--contrast-text-color-dark);
  --contrast-text-color-pink: var(--contrast-text-color-light);
  --contrast-text-color-white: var(--contrast-text-color-light);
  --contrast-text-color-gray: var(--contrast-text-color-light);
  --contrast-text-color-black: var(--contrast-text-color-dark);
  --contrast-text-color-primary: var(--contrast-text-color-dark);
  --contrast-text-color-secondary: var(--contrast-text-color-dark);
  --contrast-text-color-info: var(--contrast-text-color-light);
  --contrast-text-color-success: var(--contrast-text-color-light);
  --contrast-text-color-warning: var(--contrast-text-color-light);
  --contrast-text-color-danger: var(--contrast-text-color-light);
}

:root {
  /**
   * Code variables
   */
  --code--color: var(--color-red);
  --code--background: var(--color-gray-50);
  /**
   * Body variables
   */
  --body--background: var(--color-white);
  --body--color: var(--color-gray-900);
  /**
   * Grid variables
   */
  --grid--columns: 12;
  --grid--gutter: 28px;
  --grid--xs--gutter: calc(var(--grid--gutter) * var(--size-multiplier-xs));
  --grid--xs--width: 100%;
  --grid--sm--gutter: calc(var(--grid--gutter) * var(--size-multiplier-sm));
  --grid--sm--width: calc(var(--breakpoint-sm) - var(--grid--sm--gutter));
  --grid--md--gutter: calc(var(--grid--gutter) * var(--size-multiplier-md));
  --grid--md--width: calc(var(--breakpoint-md) - var(--grid--md--gutter));
  --grid--lg--gutter: calc(var(--grid--gutter) * var(--size-multiplier-lg));
  --grid--lg--width: calc(var(--breakpoint-lg) - var(--grid--lg--gutter));
  --grid--xl--gutter: calc(var(--grid--gutter) * var(--size-multiplier-xl));
  --grid--xl--width: calc(var(--breakpoint-xl) - var(--grid--xl--gutter));
  --grid--2xl--gutter: calc(var(--grid--gutter) * var(--size-multiplier-2xl));
  --grid--2xl--width: calc(var(--breakpoint-2xl) - var(--grid--2xl--gutter));
  /**
   * D1 variables
   */
  --d1--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-5));
  /**
   * D2 variables
   */
  --d2--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-4));
  /**
   * D3 variables
   */
  --d3--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-3));
  /**
   * D4 variables
   */
  --d4--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-2));
  /**
   * D5 variables
   */
  --d5--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-1));
  /**
   * D6 variables
   */
  --d6--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5));
  /**
   * H1 variables
   */
  --h1--font-size: calc(var(--font-size) * var(--scale-ratio-pow-5));
  /**
   * H2 variables
   */
  --h2--font-size: calc(var(--font-size) * var(--scale-ratio-pow-4));
  /**
   * H3 variables
   */
  --h3--font-size: calc(var(--font-size) * var(--scale-ratio-pow-3));
  /**
   * H4 variables
   */
  --h4--font-size: calc(var(--font-size) * var(--scale-ratio-pow-2));
  /**
   * H5 variables
   */
  --h5--font-size: calc(var(--font-size) * var(--scale-ratio-pow-1));
  /**
   * H6 variables
   */
  --h6--font-size: var(--font-size);
}

/**
 * Breakpoint mixins
 */
:root {
  /**
   * Margin variables
   */
  --margin-top: 1rem;
  --margin-right: 1rem;
  --margin-bottom: 1rem;
  --margin-left: 1rem;
  --margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
  /**
   * Padding variables
   */
  --padding-top: 1rem;
  --padding-right: 1rem;
  --padding-bottom: 1rem;
  --padding-left: 1rem;
  --padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
  /**
   * Margin 2 variant variables
   */
  --margin-top-2: calc(var(--margin-top) * 2);
  --margin-right-2: calc(var(--margin-right) * 2);
  --margin-bottom-2: calc(var(--margin-bottom) * 2);
  --margin-left-2: calc(var(--margin-left) * 2);
  --margin-2: var(--margin-top-2) var(--margin-right-2) var(--margin-bottom-2) var(--margin-left-2);
  /**
   * Margin 3 variant variables
   */
  --margin-top-3: calc(var(--margin-top) * 3);
  --margin-right-3: calc(var(--margin-right) * 3);
  --margin-bottom-3: calc(var(--margin-bottom) * 3);
  --margin-left-3: calc(var(--margin-left) * 3);
  --margin-3: var(--margin-top-3) var(--margin-right-3) var(--margin-bottom-3) var(--margin-left-3);
  /**
   * Margin 4 variant variables
   */
  --margin-top-4: calc(var(--margin-top) * 4);
  --margin-right-4: calc(var(--margin-right) * 4);
  --margin-bottom-4: calc(var(--margin-bottom) * 4);
  --margin-left-4: calc(var(--margin-left) * 4);
  --margin-4: var(--margin-top-4) var(--margin-right-4) var(--margin-bottom-4) var(--margin-left-4);
  /**
   * Margin 5 variant variables
   */
  --margin-top-5: calc(var(--margin-top) * 5);
  --margin-right-5: calc(var(--margin-right) * 5);
  --margin-bottom-5: calc(var(--margin-bottom) * 5);
  --margin-left-5: calc(var(--margin-left) * 5);
  --margin-5: var(--margin-top-5) var(--margin-right-5) var(--margin-bottom-5) var(--margin-left-5);
  /**
   * Margin xs variant variables
   */
  --margin-top-xs: calc(var(--margin-top) * var(--size-multiplier-xs));
  --margin-right-xs: calc(var(--margin-right) * var(--size-multiplier-xs));
  --margin-bottom-xs: calc(var(--margin-bottom) * var(--size-multiplier-xs));
  --margin-left-xs: calc(var(--margin-left) * var(--size-multiplier-xs));
  --margin-xs: var(--margin-top-xs) var(--margin-right-xs) var(--margin-bottom-xs) var(--margin-left-xs);
  /**
   * Margin sm variant variables
   */
  --margin-top-sm: calc(var(--margin-top) * var(--size-multiplier-sm));
  --margin-right-sm: calc(var(--margin-right) * var(--size-multiplier-sm));
  --margin-bottom-sm: calc(var(--margin-bottom) * var(--size-multiplier-sm));
  --margin-left-sm: calc(var(--margin-left) * var(--size-multiplier-sm));
  --margin-sm: var(--margin-top-sm) var(--margin-right-sm) var(--margin-bottom-sm) var(--margin-left-sm);
  /**
   * Margin md variant variables
   */
  --margin-top-md: calc(var(--margin-top) * var(--size-multiplier-md));
  --margin-right-md: calc(var(--margin-right) * var(--size-multiplier-md));
  --margin-bottom-md: calc(var(--margin-bottom) * var(--size-multiplier-md));
  --margin-left-md: calc(var(--margin-left) * var(--size-multiplier-md));
  --margin-md: var(--margin-top-md) var(--margin-right-md) var(--margin-bottom-md) var(--margin-left-md);
  /**
   * Margin lg variant variables
   */
  --margin-top-lg: calc(var(--margin-top) * var(--size-multiplier-lg));
  --margin-right-lg: calc(var(--margin-right) * var(--size-multiplier-lg));
  --margin-bottom-lg: calc(var(--margin-bottom) * var(--size-multiplier-lg));
  --margin-left-lg: calc(var(--margin-left) * var(--size-multiplier-lg));
  --margin-lg: var(--margin-top-lg) var(--margin-right-lg) var(--margin-bottom-lg) var(--margin-left-lg);
  /**
   * Margin xl variant variables
   */
  --margin-top-xl: calc(var(--margin-top) * var(--size-multiplier-xl));
  --margin-right-xl: calc(var(--margin-right) * var(--size-multiplier-xl));
  --margin-bottom-xl: calc(var(--margin-bottom) * var(--size-multiplier-xl));
  --margin-left-xl: calc(var(--margin-left) * var(--size-multiplier-xl));
  --margin-xl: var(--margin-top-xl) var(--margin-right-xl) var(--margin-bottom-xl) var(--margin-left-xl);
  /**
   * Margin 1-5 variant variables
   */
  --margin-top-1-5: calc(var(--margin-top) / 5);
  --margin-right-1-5: calc(var(--margin-right) / 5);
  --margin-bottom-1-5: calc(var(--margin-bottom) / 5);
  --margin-left-1-5: calc(var(--margin-left) / 5);
  --margin-1-5: var(--margin-top-1-5) var(--margin-right-1-5) var(--margin-bottom-1-5) var(--margin-left-1-5);
  /**
   * Margin 1-4 variant variables
   */
  --margin-top-1-4: calc(var(--margin-top) / 4);
  --margin-right-1-4: calc(var(--margin-right) / 4);
  --margin-bottom-1-4: calc(var(--margin-bottom) / 4);
  --margin-left-1-4: calc(var(--margin-left) / 4);
  --margin-1-4: var(--margin-top-1-4) var(--margin-right-1-4) var(--margin-bottom-1-4) var(--margin-left-1-4);
  /**
   * Margin 3-4 variant variables
   */
  --margin-top-3-4: calc(calc(var(--margin-top) / 4) * 3);
  --margin-right-3-4: calc(calc(var(--margin-right) / 4) * 3);
  --margin-bottom-3-4: calc(calc(var(--margin-bottom) / 4) * 3);
  --margin-left-3-4: calc(calc(var(--margin-left) / 4) * 3);
  --margin-3-4: var(--margin-top-3-4) var(--margin-right-3-4) var(--margin-bottom-3-4) var(--margin-left-3-4);
  /**
   * Margin 1-3 variant variables
   */
  --margin-top-1-3: calc(var(--margin-top) / 3);
  --margin-right-1-3: calc(var(--margin-right) / 3);
  --margin-bottom-1-3: calc(var(--margin-bottom) / 3);
  --margin-left-1-3: calc(var(--margin-left) / 3);
  --margin-1-3: var(--margin-top-1-3) var(--margin-right-1-3) var(--margin-bottom-1-3) var(--margin-left-1-3);
  /**
   * Margin 2-3 variant variables
   */
  --margin-top-2-3: calc(calc(var(--margin-top) / 3) * 2);
  --margin-right-2-3: calc(calc(var(--margin-right) / 3) * 2);
  --margin-bottom-2-3: calc(calc(var(--margin-bottom) / 3) * 2);
  --margin-left-2-3: calc(calc(var(--margin-left) / 3) * 2);
  --margin-2-3: var(--margin-top-2-3) var(--margin-right-2-3) var(--margin-bottom-2-3) var(--margin-left-2-3);
  /**
   * Margin 1-2 variant variables
   */
  --margin-top-1-2: calc(var(--margin-top) / 2);
  --margin-right-1-2: calc(var(--margin-right) / 2);
  --margin-bottom-1-2: calc(var(--margin-bottom) / 2);
  --margin-left-1-2: calc(var(--margin-left) / 2);
  --margin-1-2: var(--margin-top-1-2) var(--margin-right-1-2) var(--margin-bottom-1-2) var(--margin-left-1-2);
  /**
   * Padding 2 variant variables
   */
  --padding-top-2: calc(var(--padding-top) * 2);
  --padding-right-2: calc(var(--padding-right) * 2);
  --padding-bottom-2: calc(var(--padding-bottom) * 2);
  --padding-left-2: calc(var(--padding-left) * 2);
  --padding-2: var(--padding-top-2) var(--padding-right-2) var(--padding-bottom-2) var(--padding-left-2);
  /**
   * Padding 3 variant variables
   */
  --padding-top-3: calc(var(--padding-top) * 3);
  --padding-right-3: calc(var(--padding-right) * 3);
  --padding-bottom-3: calc(var(--padding-bottom) * 3);
  --padding-left-3: calc(var(--padding-left) * 3);
  --padding-3: var(--padding-top-3) var(--padding-right-3) var(--padding-bottom-3) var(--padding-left-3);
  /**
   * Padding 4 variant variables
   */
  --padding-top-4: calc(var(--padding-top) * 4);
  --padding-right-4: calc(var(--padding-right) * 4);
  --padding-bottom-4: calc(var(--padding-bottom) * 4);
  --padding-left-4: calc(var(--padding-left) * 4);
  --padding-4: var(--padding-top-4) var(--padding-right-4) var(--padding-bottom-4) var(--padding-left-4);
  /**
   * Padding 5 variant variables
   */
  --padding-top-5: calc(var(--padding-top) * 5);
  --padding-right-5: calc(var(--padding-right) * 5);
  --padding-bottom-5: calc(var(--padding-bottom) * 5);
  --padding-left-5: calc(var(--padding-left) * 5);
  --padding-5: var(--padding-top-5) var(--padding-right-5) var(--padding-bottom-5) var(--padding-left-5);
  /**
   * Padding xs variant variables
   */
  --padding-top-xs: calc(var(--padding-top) * var(--size-multiplier-xs));
  --padding-right-xs: calc(var(--padding-right) * var(--size-multiplier-xs));
  --padding-bottom-xs: calc(var(--padding-bottom) * var(--size-multiplier-xs));
  --padding-left-xs: calc(var(--padding-left) * var(--size-multiplier-xs));
  --padding-xs: var(--padding-top-xs) var(--padding-right-xs) var(--padding-bottom-xs) var(--padding-left-xs);
  /**
   * Padding sm variant variables
   */
  --padding-top-sm: calc(var(--padding-top) * var(--size-multiplier-sm));
  --padding-right-sm: calc(var(--padding-right) * var(--size-multiplier-sm));
  --padding-bottom-sm: calc(var(--padding-bottom) * var(--size-multiplier-sm));
  --padding-left-sm: calc(var(--padding-left) * var(--size-multiplier-sm));
  --padding-sm: var(--padding-top-sm) var(--padding-right-sm) var(--padding-bottom-sm) var(--padding-left-sm);
  /**
   * Padding md variant variables
   */
  --padding-top-md: calc(var(--padding-top) * var(--size-multiplier-md));
  --padding-right-md: calc(var(--padding-right) * var(--size-multiplier-md));
  --padding-bottom-md: calc(var(--padding-bottom) * var(--size-multiplier-md));
  --padding-left-md: calc(var(--padding-left) * var(--size-multiplier-md));
  --padding-md: var(--padding-top-md) var(--padding-right-md) var(--padding-bottom-md) var(--padding-left-md);
  /**
   * Padding lg variant variables
   */
  --padding-top-lg: calc(var(--padding-top) * var(--size-multiplier-lg));
  --padding-right-lg: calc(var(--padding-right) * var(--size-multiplier-lg));
  --padding-bottom-lg: calc(var(--padding-bottom) * var(--size-multiplier-lg));
  --padding-left-lg: calc(var(--padding-left) * var(--size-multiplier-lg));
  --padding-lg: var(--padding-top-lg) var(--padding-right-lg) var(--padding-bottom-lg) var(--padding-left-lg);
  /**
   * Padding xl variant variables
   */
  --padding-top-xl: calc(var(--padding-top) * var(--size-multiplier-xl));
  --padding-right-xl: calc(var(--padding-right) * var(--size-multiplier-xl));
  --padding-bottom-xl: calc(var(--padding-bottom) * var(--size-multiplier-xl));
  --padding-left-xl: calc(var(--padding-left) * var(--size-multiplier-xl));
  --padding-xl: var(--padding-top-xl) var(--padding-right-xl) var(--padding-bottom-xl) var(--padding-left-xl);
  /**
   * Padding 1-5 variant variables
   */
  --padding-top-1-5: calc(var(--padding-top) / 5);
  --padding-right-1-5: calc(var(--padding-right) / 5);
  --padding-bottom-1-5: calc(var(--padding-bottom) / 5);
  --padding-left-1-5: calc(var(--padding-left) / 5);
  --padding-1-5: var(--padding-top-1-5) var(--padding-right-1-5) var(--padding-bottom-1-5) var(--padding-left-1-5);
  /**
   * Padding 1-4 variant variables
   */
  --padding-top-1-4: calc(var(--padding-top) / 4);
  --padding-right-1-4: calc(var(--padding-right) / 4);
  --padding-bottom-1-4: calc(var(--padding-bottom) / 4);
  --padding-left-1-4: calc(var(--padding-left) / 4);
  --padding-1-4: var(--padding-top-1-4) var(--padding-right-1-4) var(--padding-bottom-1-4) var(--padding-left-1-4);
  /**
   * Padding 3-4 variant variables
   */
  --padding-top-3-4: calc(calc(var(--padding-top) / 4) * 3);
  --padding-right-3-4: calc(calc(var(--padding-right) / 4) * 3);
  --padding-bottom-3-4: calc(calc(var(--padding-bottom) / 4) * 3);
  --padding-left-3-4: calc(calc(var(--padding-left) / 4) * 3);
  --padding-3-4: var(--padding-top-3-4) var(--padding-right-3-4) var(--padding-bottom-3-4) var(--padding-left-3-4);
  /**
   * Padding 1-3 variant variables
   */
  --padding-top-1-3: calc(var(--padding-top) / 3);
  --padding-right-1-3: calc(var(--padding-right) / 3);
  --padding-bottom-1-3: calc(var(--padding-bottom) / 3);
  --padding-left-1-3: calc(var(--padding-left) / 3);
  --padding-1-3: var(--padding-top-1-3) var(--padding-right-1-3) var(--padding-bottom-1-3) var(--padding-left-1-3);
  /**
   * Padding 2-3 variant variables
   */
  --padding-top-2-3: calc(calc(var(--padding-top) / 3) * 2);
  --padding-right-2-3: calc(calc(var(--padding-right) / 3) * 2);
  --padding-bottom-2-3: calc(calc(var(--padding-bottom) / 3) * 2);
  --padding-left-2-3: calc(calc(var(--padding-left) / 3) * 2);
  --padding-2-3: var(--padding-top-2-3) var(--padding-right-2-3) var(--padding-bottom-2-3) var(--padding-left-2-3);
  /**
   * Padding 1-2 variant variables
   */
  --padding-top-1-2: calc(var(--padding-top) / 2);
  --padding-right-1-2: calc(var(--padding-right) / 2);
  --padding-bottom-1-2: calc(var(--padding-bottom) / 2);
  --padding-left-1-2: calc(var(--padding-left) / 2);
  --padding-1-2: var(--padding-top-1-2) var(--padding-right-1-2) var(--padding-bottom-1-2) var(--padding-left-1-2);
}

:root {
  /**
   * Typography - Font family variables
   */
  --font-family-primary-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-family-primary-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-family-primary-print: "Georgia", "Times New Roman", "Times", serif;
  --font-family-secondary-base: var(--font-family-primary-base);
  --font-family-secondary-monospace: var(--font-family-primary-monospace);
  --font-family-secondary-print: var(--font-family-primary-print);
  /**
   * Typography - Font weight variables
   */
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: normal;
  --font-weight-semibold: 600;
  --font-weight-bold: bold;
  --font-weight-black: 900;
  --font-weight-lighter: lighter;
  --font-weight-bolder: bolder;
  /**
   * Typography font-size variable
   */
  --font-size: 1rem;
  /**
   * Typography line-height variable
   */
  --line-height: 1.5;
  /**
   * Typography letter-spacing variable
   */
  --letter-spacing: 0;
  /**
   * Contrast color variables
   */
  --contrast-color--light: var(--color-gray-900);
  --contrast-color--dark: var(--color-white);
  /**
   * Typography font size variants variables
   */
  --font-size-xs: calc(var(--font-size) * var(--size-multiplier-xs));
  --font-size-sm: calc(var(--font-size) * var(--size-multiplier-sm));
  --font-size-md: calc(var(--font-size) * var(--size-multiplier-md));
  --font-size-lg: calc(var(--font-size) * var(--size-multiplier-lg));
  --font-size-xl: calc(var(--font-size) * var(--size-multiplier-xl));
}

.dark-theme {
  /**
   * Border variables
   */
  --border-top-color: var(--color-gray-700);
  --border-right-color: var(--color-gray-700);
  --border-bottom-color: var(--color-gray-700);
  --border-left-color: var(--color-gray-700);
  --border-color: var(--border-top-color) var(--border-right-color) var(--border-bottom-color) var(--border-left-color);
}

.dark-theme {
  /**
   * Code variables
   */
  --code--color: var(--color-red);
  --code--background: var(--color-gray-900);
  /**
   * Body variables
   */
  --body--background: var(--color-dark-shade-50);
  --body--color: var(--color-gray-100);
}

.dark-theme {
  /**
   * Text color variables
   */
  --text-color-weak-h: var(--color-gray-300-h);
  --text-color-weak-s: var(--color-gray-300-s);
  --text-color-weak-l: var(--color-gray-300-l);
  --text-color-weak-a: var(--color-gray-300-a);
  --text-color-weak: hsla(var(--text-color-weak-h), var(--text-color-weak-s), var(--text-color-weak-l), var(--text-color-weak-a));
  --text-color-weaker-h: var(--color-gray-500-h);
  --text-color-weaker-s: var(--color-gray-500-s);
  --text-color-weaker-l: var(--color-gray-500-l);
  --text-color-weaker-a: var(--color-gray-500-a);
  --text-color-weaker: hsla(var(--text-color-weaker-h), var(--text-color-weaker-s), var(--text-color-weaker-l), var(--text-color-weaker-a));
  --text-color-weakest-h: var(--color-gray-700-h);
  --text-color-weakest-s: var(--color-gray-700-s);
  --text-color-weakest-l: var(--color-gray-700-l);
  --text-color-weakest-a: var(--color-gray-700-a);
  --text-color-weakest: hsla(var(--text-color-weakest-h), var(--text-color-weakest-s), var(--text-color-weakest-l), var(--text-color-weakest-a));
}