:root {
  --white-100: #fff;

  --brand-green-50: #f2fdf6;
  --brand-green-100: #e5fbed;
  --brand-green-200: #caf7dc;
  --brand-green-300: #95eeb9;
  --brand-green-400: #65e699;
  --brand-green-500: #22d469;
  --brand-green-600: #1db459;
  --brand-green-700: #178d46;
  --brand-green-800: #0f6130;
  --brand-green-900: #083018;

  --purple-50: #f6f0ff;
  --purple-100: #f3ebff;
  --purple-200: #dac2fe;
  --purple-300: #bc91fe;
  --purple-400: #9958fd;
  --purple-500: #7821fd;
  --purple-600: #5102ca;
  --purple-700: #4101a2;
  --purple-800: #2c016f;
  --purple-900: #160138;

  --metal-gray-50: #f4f5f5;
  --metal-gray-100: #eaeaec;
  --metal-gray-200: #e2e3e4;
  --metal-gray-300: #d8d9db;
  --metal-gray-400: #bcbec2;
  --metal-gray-500: #a1a4aa;
  --metal-gray-600: #797c86;
  --metal-gray-700: #5c5f66;
  --metal-gray-800: #313235;
  --metal-gray-900: #131415;

  --misty-gray-50: #f5f5f5;
  --misty-gray-100: #ebebeb;
  --misty-gray-200: #e3e3e3;
  --misty-gray-300: #d9d9d9;
  --misty-gray-400: #bfbfbf;
  --misty-gray-500: #a6a6a6;
  --misty-gray-600: #808080;
  --misty-gray-700: #616161;
  --misty-gray-800: #333;
  --misty-gray-900: #141414;

  --red-50: #ffebef;
  --red-100: #feeced;
  --red-200: #fcc6cb;
  --red-300: #f98d98;
  --red-400: #f65465;
  --red-500: #f31b31;
  --red-600: #ce0b1e;
  --red-700: #9c0816;
  --red-800: #690610;
  --red-900: #350308;

  --orange-50: #fff4eb;
  --orange-100: #fff2eb;
  --orange-200: #fed9c3;
  --orange-300: #fdb287;
  --orange-400: #fb813c;
  --orange-500: #f55d05;
  --orange-600: #cd4e04;
  --orange-700: #a03c03;
  --orange-800: #6e2902;
  --orange-900: #371501;

  --blue-50: #ebf5ff;
  --blue-100: #d6ebff;
  --blue-200: #add8ff;
  --blue-300: #75bdff;
  --blue-400: #47a7ff;
  --blue-500: #1890ff;
  --blue-600: #0072db;
  --blue-700: #0055a3;
  --blue-800: #00407a;
  --blue-900: #001d38;

  --dark-overlay-100:
    linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-200:
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-300:
    linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-400:
    linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-500:
    linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-600:
    linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-700:
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-800:
    linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-900:
    linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%),
    lightgray 50% / cover no-repeat;
  --dark-overlay-1000:
    linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%),
    lightgray 50% / cover no-repeat;

  --light-overlay-100:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-200:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-300:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.3) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-400:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.4) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-500:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-600:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.6) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-700:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.7) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-800:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.8) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-900:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.9) 100%
    ),
    lightgray 50% / cover no-repeat;
  --light-overlay-1000:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    lightgray 50% / cover no-repeat;

  --text-primary: #0c0c0d;
  --text-secondary: #616161;
  --text-tertiary: #bfbfbf;
  --text-white-primary: #fff;
  --text-brand: #22d469;

  --background-white: #fff;
  --background-light-gray: #f4f5f5;
  --background-dark-gray: #4e5055;
  --background-black: #131415;

  --grayscale-surface-default-subtle: var(--metal-gray-100);
  --grayscale-surface-default-light: var(--metal-gray-50);
  --grayscale-surface-default-dark: var(--metal-gray-900);
  --grayscale-surface-default: var(--white-100);
  --grayscale-surface-disabled: var(--metal-gray-200);

  --grayscale-border-default-light: var(--metal-gray-100);
  --grayscale-border-default-dark: var(--metal-gray-900);
  --grayscale-border-default: var(--metal-gray-200);
  --grayscale-border-disabled: var(--metal-gray-50);

  --grayscale-text-icon-title: var(--metal-gray-900);
  --grayscale-text-icon-body: var(--metal-gray-800);
  --grayscale-text-icon-subtitle: var(--metal-gray-600);
  --grayscale-text-icon-caption: var(--metal-gray-400);
  --grayscale-text-icon-negative: var(--white-100);
  --grayscale-text-icon-disabled: var(--metal-gray-400);

  --primary-surface-default: var(--brand-green-600);
  --primary-surface-default-subtle: var(--brand-green-50);
  --primary-surface-default-light: var(--brand-green-400);
  --primary-surface-default-dark: var(--brand-green-700);

  --primary-border-default: var(--brand-green-600);
  --primary-border-default-light: var(--brand-green-300);
  --primary-border-default-dark: var(--brand-green-800);

  --primary-text-icon-link-label: var(--brand-green-700);

  --secondary-surface-default: var(--dark-overlay-600);
  --secondary-surface-default-subtle: var(--dark-overlay-100);
  --secondary-surface-default-light: var(--dark-overlay-400);
  --secondary-surface-default-dark: var(--dark-overlay-800);

  --secondary-border-default: var(--dark-overlay-600);
  --secondary-border-default-light: var(--dark-overlay-200);
  --secondary-border-default-dark: var(--dark-overlay-900);

  --secondary-text-icon-link-label: var(--dark-overlay-800);

  --error-surface-default: var(--red-500);
  --error-surface-default-subtle: var(--red-50);
  --error-surface-default-light: var(--red-400);
  --error-surface-default-dark: var(--red-700);

  --error-border-default: var(--red-600);
  --error-border-default-light: var(--red-300);
  --error-border-default-dark: var(--red-700);

  --error-text-icon-link-label: var(--red-600);

  --warning-surface-default: var(--orange-500);
  --warning-surface-default-subtle: var(--orange-50);
  --warning-surface-default-light: var(--orange-400);
  --warning-surface-default-dark: var(--orange-700);

  --warning-border-default: var(--orange-600);
  --warning-border-default-light: var(--orange-300);
  --warning-border-default-dark: var(--orange-700);

  --warning-text-icon-link-label: var(--orange-600);

  --success-surface-default: var(--brand-green-500);
  --success-surface-default-subtle: var(--brand-green-50);
  --success-surface-default-light: var(--brand-green-400);
  --success-surface-default-dark: var(--brand-green-700);

  --success-border-default: var(--brand-green-600);
  --success-border-default-light: var(--brand-green-300);
  --success-border-default-dark: var(--brand-green-800);

  --success-text-icon-link-label: var(--brand-green-700);

  --screen: 1680px;

  @media (max-width: 2560px) {
    --screen: 1680px;
  }

  @media (max-width: 1920px) {
    --screen: 1680px;
  }

  @media (max-width: 1728px) {
    --screen: 1488px;
  }

  @media (max-width: 1512px) {
    --screen: 1352px;
  }

  @media (max-width: 1280px) {
    --screen: 1120px;
  }

  @media (max-width: 1024px) {
    --screen: 864px;
  }

  @media (max-width: 744px) {
    --screen: 648px;
  }

  @media (max-width: 428px) {
    --screen: 380px;
  }
}

.brand-green-50 {
  color: var(--brand-green-50);
}

.brand-green-100 {
  color: var(--brand-green-100);
}

.brand-green-200 {
  color: var(--brand-green-200);
}

.brand-green-300 {
  color: var(--brand-green-300);
}

.brand-green-400 {
  color: var(--brand-green-400);
}

.brand-green-500 {
  color: var(--brand-green-500);
}

.brand-green-600 {
  color: var(--brand-green-600);
}

.brand-green-700 {
  color: var(--brand-green-700);
}

.brand-green-800 {
  color: var(--brand-green-800);
}

.brand-green-900 {
  color: var(--brand-green-900);
}

.purple-50 {
  color: var(--purple-50);
}

.purple-100 {
  color: var(--purple-100);
}

.purple-200 {
  color: var(--purple-200);
}

.purple-300 {
  color: var(--purple-300);
}

.purple-400 {
  color: var(--purple-400);
}

.purple-500 {
  color: var(--purple-500);
}

.purple-600 {
  color: var(--purple-600);
}

.purple-700 {
  color: var(--purple-700);
}

.purple-800 {
  color: var(--purple-800);
}

.purple-900 {
  color: var(--purple-900);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.metal-gray-100 {
  color: var(--metal-gray-100);
}

.metal-gray-200 {
  color: var(--metal-gray-200);
}

.metal-gray-300 {
  color: var(--metal-gray-300);
}

.metal-gray-400 {
  color: var(--metal-gray-400);
}

.metal-gray-500 {
  color: var(--metal-gray-500);
}

.metal-gray-600 {
  color: var(--metal-gray-600);
}

.metal-gray-700 {
  color: var(--metal-gray-700);
}

.metal-gray-800 {
  color: var(--metal-gray-800);
}

.metal-gray-900 {
  color: var(--metal-gray-900);
}

.red-50 {
  color: var(--red-50);
}

.red-100 {
  color: var(--red-100);
}

.red-200 {
  color: var(--red-200);
}

.red-300 {
  color: var(--red-300);
}

.red-400 {
  color: var(--red-400);
}

.red-500 {
  color: var(--red-500);
}

.red-600 {
  color: var(--red-600);
}

.red-700 {
  color: var(--red-700);
}

.red-800 {
  color: var(--red-800);
}

.red-900 {
  color: var(--red-900);
}

.orange-50 {
  color: var(--orange-50);
}

.orange-100 {
  color: var(--orange-100);
}

.orange-200 {
  color: var(--orange-200);
}

.orange-300 {
  color: var(--orange-300);
}

.orange-400 {
  color: var(--orange-400);
}

.orange-500 {
  color: var(--orange-500);
}

.orange-600 {
  color: var(--orange-600);
}

.orange-700 {
  color: var(--orange-700);
}

.orange-800 {
  color: var(--orange-800);
}

.orange-900 {
  color: var(--orange-900);
}

.blue-50 {
  color: var(--blue-50);
}

.blue-100 {
  color: var(--blue-100);
}

.blue-200 {
  color: var(--blue-200);
}

.blue-300 {
  color: var(--blue-300);
}

.blue-400 {
  color: var(--blue-400);
}

.blue-500 {
  color: var(--blue-500);
}

.blue-600 {
  color: var(--blue-600);
}

.blue-700 {
  color: var(--blue-700);
}

.blue-800 {
  color: var(--blue-800);
}

.blue-900 {
  color: var(--blue-900);
}

.dark-overlay-100 {
  background: var(--dark-overlay-100);
}

.dark-overlay-200 {
  background: var(--dark-overlay-200);
}

.dark-overlay-300 {
  background: var(--dark-overlay-300);
}

.dark-overlay-400 {
  background: var(--dark-overlay-400);
}

.dark-overlay-500 {
  background: var(--dark-overlay-500);
}

.dark-overlay-600 {
  background: var(--dark-overlay-600);
}

.dark-overlay-700 {
  background: var(--dark-overlay-700);
}

.dark-overlay-800 {
  background: var(--dark-overlay-800);
}

.dark-overlay-900 {
  background: var(--dark-overlay-900);
}

.dark-overlay-1000 {
  background: var(--dark-overlay-1000);
}

.light-overlay-100 {
  background: var(--light-overlay-100);
}

.light-overlay-200 {
  background: var(--light-overlay-200);
}

.light-overlay-300 {
  background: var(--light-overlay-300);
}

.light-overlay-400 {
  background: var(--light-overlay-400);
}

.light-overlay-500 {
  background: var(--light-overlay-500);
}

.light-overlay-600 {
  background: var(--light-overlay-600);
}

.light-overlay-700 {
  background: var(--light-overlay-700);
}

.light-overlay-800 {
  background: var(--light-overlay-800);
}

.light-overlay-900 {
  background: var(--light-overlay-900);
}

.light-overlay-1000 {
  background: var(--light-overlay-1000);
}

.grayscale-surface-default-subtle {
  color: var(--grayscale-surface-default-subtle);
}

.grayscale-surface-default-light {
  color: var(--grayscale-surface-default-light);
}

.grayscale-surface-default-dark {
  color: var(--grayscale-surface-default-dark);
}

.grayscale-surface-default {
  color: var(--grayscale-surface-default);
}

.grayscale-surface-disabled {
  color: var(--grayscale-surface-disabled);
}

.grayscale-border-default {
  color: var(--grayscale-border-default);
}

.grayscale-border-default-light {
  color: var(--grayscale-border-default-light);
}

.grayscale-border-default-dark {
  color: var(--grayscale-border-default-dark);
}

.grayscale-border-disabled {
  color: var(--grayscale-border-disabled);
}

.grayscale-text-icon-title {
  color: var(--grayscale-text-icon-title);
}

.grayscale-text-icon-subtitle {
  color: var(--grayscale-text-icon-subtitle);
}

.grayscale-text-icon-default {
  color: var(--grayscale-text-icon-default);
}

.grayscale-text-icon-disabled {
  color: var(--grayscale-text-icon-disabled);
}

.grayscale-text-icon-negative {
  color: var(--grayscale-text-icon-negative);
}

.grayscale-text-icon-body {
  color: var(--grayscale-text-icon-body);
}

.primary-surface-default {
  color: var(--primary-surface-default);
}

.primary-surface-default-subtle {
  color: var(--primary-surface-default-subtle);
}

.primary-surface-default-light {
  color: var(--primary-surface-default-light);
}

.primary-surface-default-dark {
  color: var(--primary-surface-default-dark);
}

.primary-border-default {
  color: var(--primary-border-default);
}

.primary-border-default-light {
  color: var(--primary-border-default-light);
}

.primary-text-icon-link-label {
  color: var(--primary-text-icon-link-label);
}

.secondary-surface-default {
  color: var(--secondary-surface-default);
}

.secondary-surface-default-subtle {
  color: var(--secondary-surface-default-subtle);
}

.secondary-surface-default-light {
  color: var(--secondary-surface-default-light);
}

.secondary-surface-default-dark {
  color: var(--secondary-surface-default-dark);
}

.secondary-border-default {
  color: var(--secondary-border-default);
}

.secondary-border-default-light {
  color: var(--secondary-border-default-light);
}

.secondary-border-default-dark {
  color: var(--secondary-border-default-dark);
}

.secondary-text-icon-link-label {
  color: var(--secondary-text-icon-link-label);
}

.error-surface-default {
  color: var(--error-surface-default);
}

.error-surface-default-subtle {
  color: var(--error-surface-default-subtle);
}

.error-surface-default-light {
  color: var(--error-surface-default-light);
}

.error-surface-default-dark {
  color: var(--error-surface-default-dark);
}

.error-border-default {
  color: var(--error-border-default);
}

.error-border-default-light {
  color: var(--error-border-default-light);
}

.error-border-default-dark {
  color: var(--error-border-default-dark);
}

.error-text-icon-link-label {
  color: var(--error-text-icon-link-label);
}

.warning-surface-default {
  color: var(--warning-surface-default);
}

.warning-surface-default-subtle {
  color: var(--warning-surface-default-subtle);
}

.warning-surface-default-light {
  color: var(--warning-surface-default-light);
}

.warning-surface-default-dark {
  color: var(--warning-surface-default-dark);
}

.warning-border-default {
  color: var(--warning-border-default);
}

.warning-border-default-light {
  color: var(--warning-border-default-light);
}

.warning-border-default-dark {
  color: var(--warning-border-default-dark);
}

.warning-text-icon-link-label {
  color: var(--warning-text-icon-link-label);
}

.success-surface-default {
  color: var(--success-surface-default);
}

.success-surface-default-subtle {
  color: var(--success-surface-default-subtle);
}

.success-surface-default-light {
  color: var(--success-surface-default-light);
}

.success-surface-default-dark {
  color: var(--success-surface-default-dark);
}

.success-border-default {
  color: var(--success-border-default);
}

.success-border-default-light {
  color: var(--success-border-default-light);
}

.success-border-default-dark {
  color: var(--success-border-default-dark);
}

.success-text-icon-link-label {
  color: var(--success-text-icon-link-label);
}

.text-primary {
  color: var(--text-primary);
}

.text-white-primary {
  color: var(--text-white-primary);
}