:root {
  --primary50: #E6ECEB;
  --primary400: #256359;
  --primary800: #004039;

  --secondary100: #fff7ed;
  --secondary200: #fdf0e3;

  --error100: #ffd6d6;
  --error200: #ffbdbd;
  --error300: #ff9d9d;
  --error400: #ff7f7f;
  --error500: #ff5f5f;

  --gray: #333333;
  --gray100: #f5f5f5;
  --gray200: #e5e5e5;
  --gray700: #666666;

  --cta400: #256359;
  --cta800: #004039;

  --textXs: 14px;
  --textS: 16px;
  --textM: 20px;
  --textL: 28px;
  --text2L: 36px;
  --textXL: 56px;

  --lineHeightXs: 20px;
  --lineHeightS: 24px;
  --lineHeightM: 28px;
  --lineHeightL: 36px;
  --lineHeight2L: 40px;
  --lineHeightXL: 64px;

  /* Media Queries */
  --mobile: 768px;
  --tablet: 1024px;
  --desktop: 1128px;

  /* Spacings */

  --spacingXxs: 4px;
  --spacingXs: 8px;
  --spacingS: 16px;
  --spacingM: 24px;
  --spacingL: 32px;
  --spacingXl: 40px;
  --spacing2Xl: 48px;

  --sectionSpacing: 40px;
  --sectionSpacingDesktop: 144px;

  --mainPadding: 16px;
  --mainPaddingDesktop: 36px;

  --footerPadding: 16px;
  --footerPaddingDesktop: 36px;

  /* Radius */
  --radiusXs: 8px;
  --radiusS: 12px;
  --radiusL: 16px;
  --radius24: 24px;
  --radiusXL: 32px;

  /* Header height sizes */
  --header: 120px;
  --headerCompact: 80px;
  --headerMobile: 112px;

  /* Stripe height sizes */
  --stripe: 160px;

  --fixed-ctas-height: calc(var(--spacing2Xl) + (var(--spacingS) * 2));
}