:root {
  /*Design System Color*/
  --base-1000: #07070a;
  --base-900: #0e0e14;
  --base-800: #17171f;
  --base-700: #1d1d26;
  --base-600: #23232e;
  --base-500: #2f2f3b;
  --base-400: #585864;
  --base-300: #81818a;
  --base-200: #aaaab1;
  --base-100: #d3d3d7;
  --base-50: #f0f0f5;
  --base-0: #ffffff;

  --brand-500: #de8d38;
  --brand-400: #e8ab4a;
  --brand-300: #f5c258;
  --brand-200: #ffd977;
  --brand-100: #faedcd;

  --interaction-primary-light: linear-gradient(180deg, #ffeab4 0%, #ed991c 100%);
  --interaction-primary-main: linear-gradient(180deg, #ffda77 0%, #dd890a 100%);
  --interaction-primary-dark: linear-gradient(180deg, #f5c446 0%, #ac6700 100%);

  --interaction-secondary-light: linear-gradient(180deg, #1e1e26 0%, #2f2f3b 100%);
  --interaction-secondary-main: linear-gradient(180deg, #1a1a21 0%, #24242e 100%);
  --interaction-secondary-dark: linear-gradient(180deg, #14141a 0%, #1c1c24 100%);

  --interaction-delete-light: linear-gradient(180deg, #ffa1b2 0%, #ff365a 100%);
  --interaction-delete-main: linear-gradient(180deg, #fc6581 0%, #db2748 100%);
  --interaction-delete-dark: linear-gradient(180deg, #fb2f54 0%, #9e1e36 100%);

  --gradient-surface-gold-soft: linear-gradient(180deg, #31291c 0%, #070708 100%);
  --gradient-surface-gold-hard: linear-gradient(180deg, #3e301d 0%, #13100c 32.01%, #050505 64.02%);
  --gradient-surface-silver: linear-gradient(180deg, #383838 0%, #212121 31.1%, #050505 58.23%);
  --gradient-surface-bronze: linear-gradient(180deg, #322725 0%, #15100f 23.46%, #050505 63.41%);
  --gradient-surface-green: linear-gradient(256deg, rgba(42, 245, 99, 0) 21.54%, rgba(42, 245, 99, 0.35) 99.79%);
  --gradient-surface-blue: linear-gradient(256deg, rgba(30, 147, 255, 0) 21.44%, rgba(30, 147, 255, 0.35) 99.81%);
  --gradient-surface-orange: linear-gradient(256deg, rgba(255, 143, 46, 0) 21.57%, rgba(255, 143, 46, 0.35) 99.78%);
  --gradient-surface-red: linear-gradient(256deg, rgba(251, 47, 84, 0) 21.72%, rgba(251, 47, 84, 0.35) 99.75%);
  --gradient-outline-neutral-action: linear-gradient(180deg, #d3d3d7 0%, #4b4e59 100%);
  --gradient-outline-neutral-main: linear-gradient(180deg, #303239 0%, #d3d3d7 62.5%, #303239 100%);
  --gradient-outline-gold-main: linear-gradient(180deg, #6e4a0d 0%, #fbe8cb 62.5%, #6e4a0d 100%);
  --gradient-outline-gold-action: linear-gradient(180deg, #fad47c 0%, #d79a33 100%);
  --gradient-outline-bronze-main: linear-gradient(180deg, #564038 0%, #eddbd9 62.5%, #564038 100%);
  --gradient-outline-silver-action: linear-gradient(180deg, #eae4dc 0%, #787a80 100%);

  --disabled-light: #5f5f64;
  --disabled: #45454a;
  --disabled-dark: #252529;

  --system-information-light: #80c2ff;
  --system-information-main: #1e93ff;
  --system-information-dark: #1176d4;

  --system-success-light: #7bf59d;
  --system-success-main: #2af563;
  --system-success-dark: #18cc4b;

  --system-warning-light: #ffbb80;
  --system-warning-main: #ff8f2e;
  --system-warning-dark: #d96c0d;

  --system-error-light: #fb7e94;
  --system-error-main: #fb2f54;
  --system-error-dark: #b42236;

  --accent-gold: #fad47c;

  --filter-system-success-main: brightness(0) saturate(100%) invert(94%) sepia(50%) saturate(6790%) hue-rotate(60deg)
    brightness(98%) contrast(97%);
  --filter-system-warning-main: brightness(0) saturate(100%) invert(82%) sepia(41%) saturate(5821%) hue-rotate(336deg)
    brightness(100%) contrast(104%);
  --filter-system-error-main: brightness(0) saturate(100%) invert(53%) sepia(78%) saturate(7143%) hue-rotate(332deg)
    brightness(99%) contrast(99%);

  --base-0-filter: brightness(0) saturate(100%) invert(100%) brightness(100%) contrast(100%);
  --base-50-filter: brightness(0) saturate(100%) invert(96%) sepia(6%) saturate(120%) hue-rotate(210deg)
    brightness(102%) contrast(98%);
  --base-100-filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(1528%) hue-rotate(180deg)
    brightness(88%) contrast(89%);
  --base-200-filter: brightness(0) saturate(100%) invert(76%) sepia(8%) saturate(537%) hue-rotate(206deg)
    brightness(93%) contrast(85%);
  --brand-200-filter: brightness(0) saturate(100%) invert(93%) sepia(16%) saturate(1555%) hue-rotate(329deg)
    brightness(101%) contrast(103%);
  --brand-300-filter: brightness(0) saturate(100%) invert(95%) sepia(71%) saturate(6589%) hue-rotate(314deg)
    brightness(98%) contrast(96%);

  /*fonts*/
  --font-main: var(--font-poppins);
  --font-secondary: var(--font-inter);

  --modal-tablet-with: 767px;
  --modal-desktop-with: 1216px;

  --modal-z-index: 105;
  --modal-overlay-z-index: 100;

  --avatar-border-radius: 50%;

  --offer-height: 30px;

  /*ui*/
  --header-background: #0e0e14;
  --body-background-color: #17171f;
}