/** Colors */
html, :host {
  --Neutral-50: #fafafa;
  --Neutral-100: #efefef;
  --Neutral-200: #dcfcfc;
  --Neutral-300: #bdbdbd;
  --Neutral-400: #989898;
  --Neutral-500: #7c7c7c;
  --Neutral-600: #656565;
  --Neutral-700: #525252;
  --Neutral-800: #464646;
  --Neutral-900: #3d3d3d;
  --Neutral-950: #292929;

  --Base-Shades-White: #fff;
  --Base-Shades-Black: #000;

  --RDX-Orange-50: #fff6ed;
  --RDX-Orange-100: #feecd6;
  --RDX-Orange-200: #fcd4ac;
  --RDX-Orange-300: #f9b678;
  --RDX-Orange-400: #f68d41;
  --RDX-Orange-500: #f37021;
  --RDX-Orange-600: #e45312;
  --RDX-Orange-700: #bd3d11;
  --RDX-Orange-800: #963216;
  --RDX-Orange-900: #792b15;
  --RDX-Orange-950: #411309;

  --RDX-Blue-50: #f3f6fc;
  --RDX-Blue-100: #e5edf9;
  --RDX-Blue-200: #c6d9f1;
  --RDX-Blue-300: #93bae6;
  --RDX-Blue-400: #5997d7;
  --RDX-Blue-500: #347ac3;
  --RDX-Blue-600: #2665af;
  --RDX-Blue-700: #1e4c86;
  --RDX-Blue-800: #1d426f;
  --RDX-Blue-900: #1d395d;
  --RDX-Blue-950: #13243e;

  --RDX-Green-50: #f1f9ec;
  --RDX-Green-100: #dff1d6;
  --RDX-Green-200: #c2e4b2;
  --RDX-Green-300: #9bd185;
  --RDX-Green-400: #78bd5e;
  --RDX-Green-500: #62b246;
  --RDX-Green-600: #43812f;
  --RDX-Green-700: #366328;
  --RDX-Green-800: #2e5024;
  --RDX-Green-900: #294522;
  --RDX-Green-950: #12250e;

  --RDX-Violet-50: #fbf6fd;
  --RDX-Violet-100: #f4edfa;
  --RDX-Violet-200: #eadaf4;
  --RDX-Violet-300: #dbbceb;
  --RDX-Violet-400: #c694de;
  --RDX-Violet-500: #ab6acb;
  --RDX-Violet-600: #904bae;
  --RDX-Violet-700: #7f3f98;
  --RDX-Violet-800: #643276;
  --RDX-Violet-900: #552d62;
  --RDX-Violet-950: #34143e;
}

body, :host {
  color: var(--Neutral-950, #292929);
}

.display-2xl, h1 {
  font: normal 400 72px/90px 'Lato', sans-serif;
  letter-spacing: -1.44px;
}

.display-xl, h2 {
  font: normal 400 60px/72px 'Lato', sans-serif;
  letter-spacing: -1.2px;
}

.display-lg, h3 {
  font: normal 400 48px/60px 'Lato', sans-serif;
  letter-spacing: -0.96px;
}

.display-md, h4 {
  font: normal 400 36px/44px 'Lato', sans-serif;
  letter-spacing: -0.72px;
}

.display-sm, h5 {
  font: normal 400 30px/38px 'Lato', sans-serif;
}

.display-xs, h6 {
  font: normal 400 24px/32px 'Lato', sans-serif;
}

.text-xxxl {
  font: normal 400 30px/38px 'Noto Sans', sans-serif;
}

.text-xl {
  font: normal 400 20px/30px 'Noto Sans', sans-serif;
}

.text-lg {
  font: normal 400 18px/28px 'Noto Sans', sans-serif;
}

.text-md, body {
  font: normal 400 16px/24px 'Noto Sans', sans-serif;
}

.text-sm {
  font: normal 400 14px/20px 'Noto Sans', sans-serif;
}

.text-xs {
  font: normal 400 12px/18px 'Noto Sans', sans-serif;
}
.semi-bold, .semiBold {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}

/** Spacing, Radius, Grids */
html, :host {
  --spacing-none: 0;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;

  --radius-none: 0;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 999px;

  --shadow-xs: drop-shadow(0 1px 2px #0a0a0a0d);
  --shadow-sm: drop-shadow(0 1px 3px rgba(10, 10, 10, 0.10)) drop-shadow(0 1px 2px rgba(10, 10, 10, 0.25));
  --shadow-md: drop-shadow(0 2px 4px rgba(10, 10, 10, 0.06)) drop-shadow(0 4px 6px rgba(10, 10, 10, 0.10));
  --shadow-lg: drop-shadow(0 12px 16px rgba(10, 10, 10, 0.08)) drop-shadow(0 4px 6px rgba(10, 10, 10, 0.03)) drop-shadow(0 2px 2px rgba(10, 10, 10, 0.04));
  --shadow-xl: drop-shadow(0 20px 24px rgba(10, 10, 10, 0.08)) drop-shadow(0 8px 8px rgba(10, 10, 10, 0.03)) drop-shadow(0 3px 3px rgba(10, 10, 10, 0.04));
  --shadow-2xl: drop-shadow(0 24px 48px rgba(10, 10, 10, 0.18)) drop-shadow(0 4px 4px rgba(10, 10, 10, 0.04));
  --shadow-3xl: drop-shadow(0 32px 64px rgba(10, 10, 10, 0.14)) drop-shadow(0 5px 5px rgba(10, 10, 10, 0.04));
}

.shadow-xs {
  filter: var(--shadow-xs);
}
.shadow-sm {
  filter: var(--shadow-sm);
}
.shadow-md {
  filter: var(--shadow-md);
}
.shadow-lg {
  filter: var(--shadow-lg);
}
.shadow-xl {
  filter: var(--shadow-xl);
}
.shadow-2xl {
  filter: var(--shadow-2xl);
}
.shadow-3xl {
  filter: var(--shadow-3xl);
}

.mb-auto {
  margin-bottom: auto;
}
.mt-auto {
  margin-top: auto;
}
.mx-auto {
  margin-inline: auto;
}
.my-auto {
  margin-block: auto;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}