:root {
  --font-family-base: "Manrope", "Segoe UI", sans-serif;

  --font-size-body: 18px;
  --line-height-body: 24px;
  --font-weight-body: 400;

  --font-size-small: 16px;
  --line-height-small: 22px;
  --font-weight-small: 400;

  --font-size-menu: 16px;
  --line-height-menu: 22px;
  --font-weight-menu: 600;

  --font-size-button: 16px;
  --line-height-button: 20px;
  --font-weight-button: 700;

  --font-size-h1: 40px;
  --line-height-h1: 48px;
  --font-weight-h1: 800;

  --font-size-h2: 32px;
  --line-height-h2: 40px;
  --font-weight-h2: 800;

  --font-size-h3: 24px;
  --line-height-h3: 32px;
  --font-weight-h3: 700;

  --font-size-h4: 20px;
  --line-height-h4: 28px;
  --font-weight-h4: 700;

  --color-primary: #b63888;
  --color-secondary: #6ec8ff;
  --color-text: #1a1a1a;
  --color-text-soft: #565656;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-accent-translucent: #b6388899;

  --color-surface: #fffdfb;
  --color-surface-muted: #f4f7fb;
  --color-border: #d8dfeb;

  --color-pink: #d757a3;
  --color-pink-light: #fde8f4;
  --color-pink-alpha: #d757a333;

  --color-blue: #3da7e3;
  --color-blue-light: #e6f5ff;
  --color-blue-alpha: #3da7e333;

  --color-green: #1ea972;
  --color-green-light: #e7f8f1;
  --color-green-alpha: #1ea97233;

  --color-orange: #e48b2a;
  --color-orange-light: #fff2e3;
  --color-orange-alpha: #e48b2a33;

  --color-yellow: #d5a90f;
  --color-yellow-light: #fff9dd;
  --color-yellow-alpha: #d5a90f33;

  --color-red: #d63b4d;
  --color-red-light: #ffe9ec;

  --state-hover-bg: #f1ecf7;
  --state-active-bg: #e9dff2;
  --state-focus: #6ec8ff;
  --state-disabled-opacity: 0.45;

  --space-xxs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 56px;
  --space-xxl: 80px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-large: 1280px;
}