:root {
  --color-primary: #de4b7a;
  --color-primary-purple: #d048b4;
  --color-primary-blue: #4162f0;
  --color-primary-blue-light: #74aff8;
  --color-primary-blue-aqua: #5ecae7;
  --color-primary-darker: #b83e65;
  --color-primary-black: #1d1c1a;
  --color-secondary-orange: #f95e2d;
  --color-secondary-green: #40ba3e;
  --color-secondary-yellow: #f2d22b;
  --color-accent-secondary-main: #4262f0;
  --color-tertiary-white: #fff;
  --color-tertiary-gray-ultra-light: #fafafa;
  --color-tertiary-gray-lighter: #f4f4f6;
  --color-tertiary-gray-light: #f0f0f3;
  --color-tertiary-gray: #eaeaea;
  --color-tertiary-gray-dark: #e2e2e2;
  --color-tertiary-gray-darker: #dadada;
  --color-tertiary-gray-ultra-dark: #c4c4c4;
  --color-tertiary-gray-ultra-darker: #adacae;
  --color-tertiary-gray-ultra-darker-rgb: 173 172 174;
  --color-base-regular-rgb: 29 29 27;
  --color-rgb-white: 255 255 255;
  --color-rgb-blue: 174 174 192;
  --color-rgb-gray: 29 28 26;
  --color-rgb-primary: 222 75 122;
  --gradient-primary: linear-gradient(
    101.12deg,
    var(--color-primary) 0.76%,
    var(--color-primary-purple) 100%
  );
  --gradient-secondary: linear-gradient(
    180deg,
    var(--color-primary) -27.44%,
    var(--color-primary-blue) 100.54%
  );
  --box-shadow-primary: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
    1px 1px 3px rgb(var(--color-rgb-blue) / 40%),
    4px 4px 8px rgb(var(--color-rgb-blue) / 40%),
    -4px -4px 12px var(--color-tertiary-white);
  --box-shadow-secondary: -4px -4px 12px var(--color-tertiary-white),
    4px 4px 8px rgb(var(--color-rgb-blue) / 40%),
    1px 1px 3px rgb(var(--color-rgb-blue) / 40%),
    -1px -1px 3px rgb(var(--color-rgb-white) / 25%);
  --box-shadow-hover: -1px -1px 4px rgb(var(--color-rgb-white) / 25%),
    1px 1px 4px rgb(var(--color-rgb-blue) / 40%),
    4px 4px 8px rgb(var(--color-rgb-blue) / 40%),
    -4px -4px 8px rgb(var(--color-rgb-white) / 80%);
  --box-shadow-pressed: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
    1px 1px 3px rgb(var(--color-rgb-blue) / 40%);
  --box-shadow-focus: inset 2px 2px 3px rgb(var(--color-rgb-blue) / 20%),
    inset -2px -2px 3px rgb(var(--color-rgb-white) / 70%);
  --border-error: 1px solid var(--color-secondary-orange);
  --border-radius-base: 4px;

  // font
  --line-height-base: 22px;
  --font-size-base: 14px;
  --font-weight-base: 500;
  --font-weight-bold: 600;
  --letter-spacing-base: 0.03em;

  // layout
  --layout-gutter: 32px;

  // button
  --line-height-button: 16px;

  // animations
  --transition-spline-base: cubic-bezier(0.645, 0.045, 0.355, 1);
}
