:root {
  /* Swatches - Neutral */
  --swatches-neutral-0: #ffffff;
  --swatches-neutral-50: #f6f7f8;
  --swatches-neutral-100: #ebecee;
  --swatches-neutral-200: #dcdee1;
  --swatches-neutral-300: #c3c7cd;
  --swatches-neutral-400: #a1a6af;
  --swatches-neutral-500: #9095a1;
  --swatches-neutral-600: #808490;
  --swatches-neutral-700: #727583;
  --swatches-neutral-800: #60626d;
  --swatches-neutral-900: #4f5159;
  --swatches-neutral-950: #333438;
  --swatches-neutral-1000: #000000;
  --swatches-neutral-950-alpha-5: #3334380d;
  --swatches-neutral-950-alpha-10: #3334381a;
  --swatches-neutral-950-alpha-20: #33343833;
  --swatches-neutral-950-alpha-80: #333438cc;

  /* Swatches - Primary */
  --swatches-primary-50: #edf7ff;
  --swatches-primary-100: #d7eaff;
  --swatches-primary-200: #b9dcff;
  --swatches-primary-300: #88c8ff;
  --swatches-primary-400: #50a9ff;
  --swatches-primary-500: #2885ff;
  --swatches-primary-600: #085eff;
  --swatches-primary-700: #0a4deb;
  --swatches-primary-800: #0f3ebe;
  --swatches-primary-900: #133a95;
  --swatches-primary-950: #11255a;

  /* Swatches - Yellow */
  --swatches-yellow-50: #fefde8;
  --swatches-yellow-100: #fffdc2;
  --swatches-yellow-200: #fff787;
  --swatches-yellow-300: #ffeb43;
  --swatches-yellow-400: #ffd703;
  --swatches-yellow-500: #efc003;
  --swatches-yellow-600: #ce9500;
  --swatches-yellow-700: #a46a04;
  --swatches-yellow-800: #88520b;
  --swatches-yellow-900: #734310;
  --swatches-yellow-950: #432305;

  /* Swatches - Orange */
  --swatches-orange-50: #fdf9ed;
  --swatches-orange-100: #f9eccc;
  --swatches-orange-200: #f3d894;
  --swatches-orange-300: #ecbf5d;
  --swatches-orange-400: #e7a738;
  --swatches-orange-500: #e18d29;
  --swatches-orange-600: #c66719;
  --swatches-orange-700: #a44919;
  --swatches-orange-800: #863a1a;
  --swatches-orange-900: #6e3119;
  --swatches-orange-950: #3f1709;

  /* Swatches - Red */
  --swatches-red-50: #fef2f2;
  --swatches-red-100: #fee2e2;
  --swatches-red-200: #fecaca;
  --swatches-red-300: #fca5a5;
  --swatches-red-400: #f87171;
  --swatches-red-500: #ef4444;
  --swatches-red-600: #dc2626;
  --swatches-red-700: #b91c1c;
  --swatches-red-800: #991b1b;
  --swatches-red-900: #7f1d1d;
  --swatches-red-950: #450a0a;

  /* Swatches - Pink */
  --swatches-pink-50: #fcf3f8;
  --swatches-pink-100: #fae9f2;
  --swatches-pink-200: #f7d3e6;
  --swatches-pink-300: #f1b0d0;
  --swatches-pink-400: #e87eb1;
  --swatches-pink-500: #dd5794;
  --swatches-pink-600: #ca3873;
  --swatches-pink-700: #ae285b;
  --swatches-pink-800: #90244b;
  --swatches-pink-900: #792242;
  --swatches-pink-950: #641330;

  /* Swatches - Purple */
  --swatches-purple-50: #faf7fd;
  --swatches-purple-100: #f3ecfb;
  --swatches-purple-200: #e9dcf8;
  --swatches-purple-300: #d9c0f2;
  --swatches-purple-400: #c197e9;
  --swatches-purple-500: #a96ede;
  --swatches-purple-600: #9450cd;
  --swatches-purple-700: #8440bc;
  --swatches-purple-800: #6a3693;
  --swatches-purple-900: #572d76;
  --swatches-purple-950: #3a1655;

  /* Swatches - Blue */
  --swatches-blue-50: #edf7ff;
  --swatches-blue-100: #d7eaff;
  --swatches-blue-200: #b9dcff;
  --swatches-blue-300: #88c8ff;
  --swatches-blue-400: #50a9ff;
  --swatches-blue-500: #2885ff;
  --swatches-blue-600: #085eff;
  --swatches-blue-700: #0a4deb;
  --swatches-blue-800: #0f3ebe;
  --swatches-blue-900: #133a95;
  --swatches-blue-950: #11255a;

  /* Swatches - Cyan */
  --swatches-cyan-50: #ecfdff;
  --swatches-cyan-100: #d0f8fd;
  --swatches-cyan-200: #a6eefb;
  --swatches-cyan-300: #69e1f7;
  --swatches-cyan-400: #24c8ec;
  --swatches-cyan-500: #08a1c5;
  --swatches-cyan-600: #0a89b0;
  --swatches-cyan-700: #106d8e;
  --swatches-cyan-800: #165974;
  --swatches-cyan-900: #174b62;
  --swatches-cyan-950: #093043;

  /* Swatches - Teal */
  --swatches-teal-50: #f1fcf9;
  --swatches-teal-100: #cff8f0;
  --swatches-teal-200: #a0efe1;
  --swatches-teal-300: #68e0cf;
  --swatches-teal-400: #39c8b8;
  --swatches-teal-500: #20ac9f;
  --swatches-teal-600: #178a82;
  --swatches-teal-700: #176e69;
  --swatches-teal-800: #175855;
  --swatches-teal-900: #174a47;
  --swatches-teal-950: #072c2c;

  /* Swatches - Green */
  --swatches-green-50: #f5fee7;
  --swatches-green-100: #e9fccb;
  --swatches-green-200: #d5f99d;
  --swatches-green-300: #baf264;
  --swatches-green-400: #a0e635;
  --swatches-green-500: #84cc16;
  --swatches-green-600: #68a30d;
  --swatches-green-700: #517c0f;
  --swatches-green-800: #426212;
  --swatches-green-900: #3a5314;
  --swatches-green-950: #1e2e05;

  /* Color on Surface - Neutral */
  --color-on-surface-neutral-primary: var(--swatches-neutral-950);
  --color-on-surface-neutral-secondary: var(--swatches-neutral-800);
  --color-on-surface-neutral-disabled: var(--swatches-neutral-300);

  /* Color on Surface - Brand */
  --color-on-surface-brand-primary: var(--swatches-primary-700);
  --color-on-surface-brand-disabled: var(--swatches-primary-200);

  /* Color on Surface - Alt */
  --color-on-surface-alt-primary: var(--swatches-neutral-0);
  --color-on-surface-alt-secondary: var(--swatches-neutral-200);
  --color-on-surface-alt-disabled: var(--swatches-neutral-900);

  /* Color on Surface - Success */
  --color-on-surface-success-primary: var(--swatches-teal-700);
  --color-on-surface-success-disabled: var(--swatches-teal-200);

  /* Color on Surface - Info */
  --color-on-surface-info-primary: var(--swatches-cyan-700);
  --color-on-surface-info-disabled: var(--swatches-cyan-200);

  /* Color on Surface - Warning */
  --color-on-surface-warning-primary: var(--swatches-orange-700);
  --color-on-surface-warning-disabled: var(--swatches-orange-200);

  /* Color on Surface - Danger */
  --color-on-surface-danger-primary: var(--swatches-pink-700);
  --color-on-surface-danger-disabled: var(--swatches-pink-200);

  /* Color Surface - Neutral */
  --color-surface-neutral-idle: var(--swatches-neutral-0);
  --color-surface-neutral-hover: var(--swatches-neutral-100);
  --color-surface-neutral-press: var(--swatches-neutral-200);
  --color-surface-neutral-disabled: var(--swatches-neutral-50);
  --color-surface-neutral-nested: var(--swatches-neutral-50);

  /* Color Surface - Alt */
  --color-surface-alt-idle: var(--swatches-neutral-800);
  --color-surface-alt-hover: var(--swatches-neutral-900);
  --color-surface-alt-press: var(--swatches-neutral-950);
  --color-surface-alt-disabled: var(--swatches-neutral-200);
  --color-surface-alt-nested: var(--swatches-neutral-700);

  /* Color Surface - Brand */
  --color-surface-brand-idle: var(--swatches-primary-700);
  --color-surface-brand-hover: var(--swatches-primary-800);
  --color-surface-brand-press: var(--swatches-primary-900);
  --color-surface-brand-disabled: var(--swatches-primary-200);

  /* Color Surface - Success */
  --color-surface-success-idle: var(--swatches-teal-700);
  --color-surface-success-hover: var(--swatches-teal-800);
  --color-surface-success-press: var(--swatches-teal-900);
  --color-surface-success-disabled: var(--swatches-teal-200);

  /* Color Surface - Info */
  --color-surface-info-idle: var(--swatches-cyan-700);
  --color-surface-info-hover: var(--swatches-cyan-800);
  --color-surface-info-press: var(--swatches-cyan-900);
  --color-surface-info-disabled: var(--swatches-cyan-200);

  /* Color Surface - Warning */
  --color-surface-warning-idle: var(--swatches-orange-700);
  --color-surface-warning-hover: var(--swatches-orange-800);
  --color-surface-warning-press: var(--swatches-orange-900);
  --color-surface-warning-disabled: var(--swatches-orange-200);

  /* Color Surface - Danger */
  --color-surface-danger-idle: var(--swatches-pink-700);
  --color-surface-danger-hover: var(--swatches-pink-800);
  --color-surface-danger-press: var(--swatches-pink-900);
  --color-surface-danger-disabled: var(--swatches-pink-200);

  /* Background, overlay, skeleton */
  --color-background-idle: var(--swatches-neutral-50);
  --color-background--hover: var(--swatches-neutral-100);
  --color-background-pressed: var(--swatches-neutral-200);
  --color-background-disabled: var(--swatches-neutral-50);
  --color-overlay: var(--swatches-neutral-950-alpha-80);
  --color-skeleton: var(--swatches-neutral-100);

  /* Data Colors */
  --color-data-10-light: var(--swatches-neutral-100);
  --color-data-10-default: var(--swatches-neutral-500);
  --color-data-10-dark: var(--swatches-neutral-900);
  --color-data-01-light: var(--swatches-blue-100);
  --color-data-01-default: var(--swatches-blue-500);
  --color-data-01-dark: var(--swatches-blue-900);
  --color-data-02-light: var(--swatches-cyan-100);
  --color-data-02-default: var(--swatches-cyan-500);
  --color-data-02-dark: var(--swatches-cyan-900);
  --color-data-03-light: var(--swatches-teal-100);
  --color-data-03-default: var(--swatches-teal-500);
  --color-data-03-dark: var(--swatches-teal-900);
  --color-data-04-light: var(--swatches-green-100);
  --color-data-04-default: var(--swatches-green-500);
  --color-data-04-dark: var(--swatches-green-900);
  --color-data-05-light: var(--swatches-yellow-100);
  --color-data-05-default: var(--swatches-yellow-500);
  --color-data-05-dark: var(--swatches-yellow-900);
  --color-data-06-light: var(--swatches-orange-100);
  --color-data-06-default: var(--swatches-orange-500);
  --color-data-06-dark: var(--swatches-orange-900);
  --color-data-07-light: var(--swatches-red-100);
  --color-data-07-default: var(--swatches-red-500);
  --color-data-07-dark: var(--swatches-red-900);
  --color-data-08-light: var(--swatches-pink-100);
  --color-data-08-default: var(--swatches-pink-500);
  --color-data-08-dark: var(--swatches-pink-900);
  --color-data-09-light: var(--swatches-purple-100);
  --color-data-09-default: var(--swatches-purple-500);
  --color-data-09-dark: var(--swatches-purple-900);

  /* Elevation */
  --elevation-low-x: 0px;
  --elevation-low-y: 3px;
  --elevation-low-blur: 20px;
  --elevation-low-spread: 0px;
  --elevation-low-shadow: var(--swatches-neutral-950-alpha-5);
  --elevation-medium-x: 0px;
  --elevation-medium-y: 25px;
  --elevation-medium-blur: 50px;
  --elevation-medium-spread: 0px;
  --elevation-medium-shadow: var(--swatches-neutral-950-alpha-10);
  --elevation-high-x: 0px;
  --elevation-high-y: 40px;
  --elevation-high-blur: 100px;
  --elevation-high-spread: 0px;
  --elevation-high-shadow: var(--swatches-neutral-950-alpha-20);
  --elevation-low: 0 3px 20px 0 var(--swatches-neutral-950-alpha-5);
  --elevation-medium: 0 25px 50px 0 var(--swatches-neutral-950-alpha-10);
  --elevation-high: 0 40px 100px  var(--swatches-neutral-950-alpha-20);

  /* Borders - Radius */
  --border-radius-zero: 0px;
  --border-radius-interface: 4px;
  --border-radius-button: 4px;
  --border-radius-data-input: 4px;
  --border-radius-round: 9999px;

  /* Borders - Width */
  --border-width-none: 0px;
  --border-width-small: 1px;
  --border-width-medium: 2px;
  --border-width-large: 3px;
  --border-width-xl: 4px;

  /* Sizing */
  --sizing-xxxxs: 2px;
  --sizing-xxxs: 4px;
  --sizing-xxs: 8px;
  --sizing-xs: 12px;
  --sizing-small: 16px;
  --sizing-medium: 20px;
  --sizing-large: 24px;
  --sizing-xl: 36px;
  --sizing-xxl: 48px;
  --sizing-xxxl: 64px;
  --sizing-xxxxl: 96px;

  /* Spacing */
  --spacing-zero: 0px;
  --spacing-xxxxs: 2px;
  --spacing-xxxs: 4px;
  --spacing-xxs: 8px;
  --spacing-xs: 12px;
  --spacing-small: 16px;
  --spacing-medium: 20px;
  --spacing-large: 24px;
  --spacing-xl: 36px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;
  --spacing-xxxxl: 96px;

  /* Typography - Font Family */
  --font-family-heading: "Inter";
  --font-family-body: "Inter";
  --font-family-button: "Inter";

  /* Typography - Font Weight */
  --font-weight-100: Thin;
  --font-weight-200: ExtraLight;
  --font-weight-300: Light;
  --font-weight-400: Regular;
  --font-weight-500: Medium;
  --font-weight-600: SemiBold;
  --font-weight-700: Bold;
  --font-weight-800: ExtraBold;
  --font-weight-900: Black;

  /* Typography - Font Size */
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 30px;
  --font-size-h4: 26px;
  --font-size-h5: 22px;
  --font-size-h6: 18px;
  --font-size-l: 16px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-caption: 11px;
  --font-size-button: 14px;

  /* Typography - Line Height */
  --line-height-h1: 58px;
  --line-height-h2: 46.8px;
  --line-height-h3: 39px;
  --line-height-h4: 33.8px;
  --line-height-h5: 28.6px;
  --line-height-h6: 23.4px;
  --line-height-l: 20.8px;
  --line-height-m: 18.2px;
  --line-height-s: 15.6px;
  --line-height-caption: 14.3px;
  --line-height-button: 18.2px;

  /* Typography - Letter Spacing */
  --letter-spacing-default: 0px;

  /* Typography - Paragraph Spacing */
  --paragraph-spacing-h1: 48px;
  --paragraph-spacing-h2: 36px;
  --paragraph-spacing-h3: 30px;
  --paragraph-spacing-h4: 26px;
  --paragraph-spacing-h5: 22px;
  --paragraph-spacing-h6: 18px;
  --paragraph-spacing-l: 16px;
  --paragraph-spacing-m: 14px;
  --paragraph-spacing-s: 12px;
  --paragraph-spacing-caption: 11px;
  --paragraph-spacing-button: 14px;

  /* Transition */
  --transition-default: all 200ms ease-in-out;
}