@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
  --primary: var(--p-primary-500);
  --primary-rgb: 245, 130, 32;
  --primary-hover: var(--p-primary-900);

  --p-primary-50:  #f3f9ec;
  --p-primary-100: #e3f0d0;
  --p-primary-200: #c7e1a5;
  --p-primary-300: #abd27a;
  --p-primary-400: #98C368;
  --p-primary-500: #89b65a;
  --p-primary-600: #7aa34d;
  --p-primary-700: #698d40;
  --p-primary-800: #587634;
  --p-primary-900: #476028;
  --p-primary-950: #32461c;


  --body-bg: white;
  --body-text-color: #424E59;
  --body-text-font: 'Lato';
  --body-text-size: 20px;
  --body-text-weight: 400;

  --bg-dark: #253B5E;

  --text-dark: #1C2125;
  --text-medium: var(--body-text-color);
  --text-inverse: white;

  --text-header-font: 'Lato';
  --text-header-size: clamp(36px, 2vw + 1rem, 42px);
  --text-header-weight: 700;
  --text-header-color: var(--text-dark);

  --border-light: #E1DCD4;

  --p-button-padding-x: 32px;
  --p-button-padding-y: 13px;
  --p-button-label-font-weight: 700;
  --p-button-label-font-size: 16px;

  --p-button-sm-font-size: 16px;
  --p-button-sm-font-weight: 700px;
  --p-button-sm-padding-x: 20px;
  --p-button-sm-padding-y: 9px;

  --header-bg: white;
  --home-perks-title-color: var(--bg-dark);
}

.p-button {
  font-family: var(--text-header-font);
  white-space: nowrap;
}