@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700&display=swap");

:root {
  /* Names colors */
  --color--white: #ffffff;
  --color--light-grey: #f8f8f8;
  --color--dark-grey: #40454b;

  /* Theme colors */
  --color--brand: #a3ca35;

  /* Fonts */
  --font: "Raleway", sans-serif;

  /* Border Radius */
  --border-radius: 5px;
  --border-radius--button: 2rem;

  /* Filters */
  --drop-shadow: drop-shadow(0px 3px 16px rgba(0, 0, 0, 0.25));

  /* Button colors */
  --button-bg--primary: #40454b;
  --button-text--primary: var(--color--white);
  --button-icon--primary: var(--color--white);
  --button-bg--white: var(--color--white);
  --button-text--white: var(--color--brand);
  --button-icon--white: var(--color--brand);
  --button-bg--grey: var(--color--light-grey);
  --button-text--grey: var(--color--dark-grey);
  --button-icon--grey: var(--color--brand);
  --button-bg--dark-grey: var(--color--dark-grey);
  --button-text--dark-grey: var(--color--white);
  --button-icon--dark-grey: var(--color--white);
}