:root {
  /**
    * Colors
    */
  --color-1: hsla(104, 43%, 33%, 1);
  --color-1--hover: hsla(104, 43%, 27%, 1);
  --color-1--foreground: var( --color-white );
  --color-1--lighter: hsla(103, 14%, 90%, 1);
  --color-primary: hsla(104, 43%, 33%, 1);
  --color-primary--hover: hsla(104, 43%, 27%, 1 );
  --color-primary--foreground: var( --color-white );
  --color-primary--lighter: hsla(103, 14%, 90%, 1);
  --color-2: hsla(39, 100%, 48%, 1);
  --color-2--hover: hsla(39, 100%, 39%, 1);
  --color-2--foreground: var( --color-text );
  --color-secondary: hsla(39, 100%, 48%, 1);
  --color-secondary--lighter: hsla( 39, 100%, 68%, .8 );
  --color-secondary--hover: hsla(39, 100%, 39%, 1);
  --color-secondary--foreground: var( --color-text );
  --color-light-transparent: hsla( 0, 0%, 100%, 0.2 );
  --color-red: hsla( 355, 71%, 51%, 1 );
  --color-error: hsl(358, 69%, 24%);
  --color-error-border: hsl(358, 69%, 24%);
  --color-error-background: hsl(358, 72%, 90%);
  --color-whatsapp: hsla( 141, 71%, 42%, 1 );
  --color-white: hsl( 0, 0%, 100% );
  --color-white--hover: hsla( 0, 0%, 100%, .9 );
  --color-text: hsla(345, 6%, 13%, 1);
  --color-text--lighter: hsla( 345, 6%, 13%, .7 );
  --color-footer--foreground: hsla( 345, 4%, 18%, 1 );
  --color-footer--lighter: hsla( 345, 4%, 22%, 1 );
  --color-grey-1: hsla(0, 0%, 96%, 1);
  --color-grey-2: hsla(104, 43%, 33%, 0.1);
  --color-grey-3: hsla(345, 6%, 13%, 0.15);
  --color-grey-4: hsla(0, 0%, 0%, 0.2);
  --color-grey-5: hsla(345, 6%, 13%, 0.1);
  --color-grey-6: hsla(0, 0%, 0%, 0.1);
  --color-grey-7: hsla( 0, 0%, 100%, 0.1 );
  --color-grey-8: hsla( 0, 0%, 100%, 0.15 );
  --color-grey-9: hsla( 0, 0%, 100%, 0.6 );
  --color-grey-10: hsla( 0, 0%, 85%, 1 );
  /**
    * Transitions
    */
  --transition-duration: .25s;
  --transition-timing: ease-in-out;
  --transition: var( --transition-duration ) var( --transition-timing );
  /**
    * Border Radius
    */
  --border-color: hsla( 345, 6%, 13%, 0.2 );
  --border-radius: 0.625rem;
  --border-radius-small: 1rem;
  --border-radius-large: 1.5625rem;
  --border-radius-xlarge: 3.125rem;
  /**
    * Paddings
    */
  --padding-small: 1rem;
  --padding-medium: 1.5rem;
  --padding-large: 2rem;
  /**
    * Margins
    */
  --margin-small: 1rem;
  --margin-medium: 1rem;
  --margin-large: 1rem;
  /**
    * Gaps
    */
  --gap-small: 1rem;
  --gap-medium: 1.125rem;
  --gap-large: 1.25rem;
  --gap-xlarge: 1.5rem;
  /* Font Sizes */
  --font-size--xxl: 2rem;
  --font-size--xl: 1.5rem;
  --font-size--lg: 1.25rem;
  --font-size--md: 1.125rem;
  --font-size--sm: 0.875rem;
  --font-size--xs: 0.875rem;
  --font-size--xxs: 0.75rem;
  /* Font Weight */
  --font-weight--light: 300;
  --font-weight--regular: 400;
  --font-weight--medium: 500;
  --font-weight--semibold: 600;
  --font-weight--bold: 700;
  --font-weight--extrabold: 800;
  /* Line Height */
  --line-height--xl: 1.8;
  --line-height--lg: 1.6;
  --line-height--md: 1.5;
  --line-height--mdsm: 1.2;
  --line-height--sm: 1;
  --heading-1__font-size: var(--font-size--xxl);
  --heading-2__font-size: var(--font-size--xl);
  --heading-3__font-size: var(--font-size--lg);
  --heading-4__font-size: var(--font-size--md);
  --heading-5__font-size: var(--font-size--sm);
  --heading-6__font-size: var(--font-size--sm);
  --heading-1__font-family: var(--font-family--heading);
  --heading-2__font-family: var(--font-family--heading);
  --heading-3__font-family: var(--font-family--heading);
  --heading-5__font-family: var(--font-family--heading);
  --heading-6__font-family: var(--font-family--heading);
  --heading-1__font-weight: var(--font-weight--extrabold);
  --heading-2__font-weight: var(--font-weight--bold);
  --heading-3__font-weight: var(--font-weight--bold);
  --heading-4__font-weight: var(--font-weight--bold);
  --heading-5__font-weight: var(--font-weight--bold);
  --heading-6__font-weight: var(--font-weight--bold);
  --container-width: 83.75rem;
  --container-gutter: 0.375rem;
  --container-columns: 12;
  --section__margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  :root {
    --margin-medium: 1.25rem;
    --margin-large: 1.5rem;
  }
}
@media (min-width: 64rem) {
  :root {
    --margin-medium: 1.5rem;
    --margin-large: 2rem;
  }
}
@media (min-width: 48rem) {
  :root {
    --gap-medium: 1.25rem;
    --gap-large: 1.5rem;
    --gap-xlarge: 2rem;
  }
}
@media (min-width: 64rem) {
  :root {
    --gap-medium: 1.5rem;
    --gap-large: 2rem;
    --gap-xlarge: 3rem;
  }
}
@media (min-width: 48rem) {
  :root {
    --font-size--xxl: 2.5rem;
    --font-size--xl: 2rem;
    --font-size--lg: 1.5rem;
    --font-size--md: 1.25rem;
    --font-size--sm: 1rem;
  }
}
@media (min-width: 64rem) {
  :root {
    --font-size--xxl: 4rem;
    --font-size--xl: 2.5rem;
    --font-size--lg: 2rem;
    --font-size--md: 1.5rem;
  }
}
@media (min-width: 48rem) {
  :root {
    --container-gutter: 0.5rem;
    --section__margin-bottom: 5rem;
  }
}
@media (min-width: 64rem) {
  :root {
    --container-gutter: 1rem;
    --section__margin-bottom: 6.25rem;
  }
}
