:root {
  --black-50: #f4f4f4;
  --black-100: #e8e8e8;
  --black-200: #d1d1d1;
  --black-300: #bababa;
  --black-400: #a3a3a3;
  --black-500: #8c8c8c;
  --black-600: #757575;
  --black-700: #474747;
  --black-800: #191919;

  --white-100: #ffffff;
  --white-80: rgba(255, 255, 255, 0.8);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-30: rgba(255, 255, 255, 0.3);

  --blue-100: #7d89c8;
  --blue-200: #9bcae6;
  --blue-300: #69b0da;
  --blue-400: #3795cd;
  --blue-500: #057bc1;
  --blue-600: #04629a;
  --blue-700: #034a74;

  --font-primary: "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-dm-serif: "DM Serif Display", Georgia, serif;
  --font-montserrat: "Montserrat", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 30px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  --container-max-width: 1440px;
  --container-padding: 84px;
}