:root {
  --titleFont: 'Syne', sans-serif;
  --titleWeight: 700;
  --titleTransform: uppercase;
  --textFont: 'Albert Sans', sans-serif;
  --textWeight: 400;
  --textTransform: none;
}

:root {
  --white: #ffffff;
  --grey: #f2f2f2;
  --black: #000000;
}

:root {
  --wrapperBg: var(--white);
  --pretitleColor: var(--black);
  --titleColor: var(--black);
  --textColor: var(--black);
  --btnPrimaryBg: var(--black);
  --btnPrimaryText: var(--white);
  --btnSecondaryBg: var(--white);
  --btnSecondaryText: var(--black);
  --btnSimpleText: var(--black);
}

[data-theme="Neutral"] {
  --wrapperBg: var(--grey);
  --pretitleColor: var(--black);
  --titleColor: var(--black);
  --textColor: var(--black);
  --btnPrimaryBg: var(--black);
  --btnPrimaryText: var(--white);
  --btnSecondaryBg: var(--white);
  --btnSecondaryText: var(--black);
  --btnSimpleText: var(--black);
}

[data-theme="Dark"] {
  --wrapperBg: var(--black);
  --pretitleColor: var(--white);
  --titleColor: var(--white);
  --textColor: var(--white);
  --btnPrimaryBg: var(--white);
  --btnPrimaryText: var(--black);
  --btnSecondaryBg: var(--grey);
  --btnSecondaryText: var(--black);
  --btnSimpleText: var(--white);
}