/* Global CSS Variables */
:root {
  /* Spacing */
  --spacing-1px: 0.0625rem; /* 1px */
  --spacing-2px: 0.125rem; /* 2px */
  --spacing-half: 0.25rem; /* 4px */
  --spacing: 0.5rem; /* 8px */
  --spacing-1-5: 0.75rem; /* 12px */
  --spacing-2: 1rem; /* 16px */
  --spacing-2-5: 1.25rem; /* 20px */
  --spacing-3: 1.5rem; /* 24px */
  --spacing-4: 2rem; /* 32px */
  --spacing-5: 2.5rem; /* 40px */
  --spacing-6: 3rem; /* 48px */
  --spacing-7: 3.5rem; /* 56px */
  --spacing-8: 4rem; /* 64px */
  --spacing-9: 4.5rem; /* 72px */
  --spacing-10: 5rem; /* 80px */
  --spacing-11: 5.5rem; /* 88px */
  --spacing-12: 6rem; /* 96px */
  --spacing-13: 6.5rem; /* 104px */
  --spacing-14: 7rem; /* 112px */
  --spacing-15: 7.5rem; /* 120px */
  --spacing-16: 8rem; /* 128px */
  --spacing-20: 10rem; /* 160px */
  --spacing-25: 12.5rem; /* 200px */
  --spacing-30: 15rem; /* 240px */
  --spacing-31: 16.75rem; /* 268px */
  --spacing-40: 20rem; /* 320px */
  --spacing-50: 25rem; /* 400px */
  --spacing-60: 30rem; /* 480px */
  --spacing-70: 35rem; /* 560px */

  --corner-radius-small: 0.25rem; /* 4px */
  --corner-radius-focus: 0.375rem; /* 6px */
  --grid-spacing: var(--spacing-2);

  --padding-small: var(--spacing-8);
  --padding-medium: var(--spacing-10);
  --padding-large: var(--spacing-15);

  /* Typography */
  --font-heading: "Poppins", san-serif;
  --font-body: "Poppins", san-serif;

  --heading-display: 3rem; /* 48px */
  --heading-h1: 2.5rem; /* 40px */
  --heading-h2: 2rem; /* 32px */
  --heading-h3: 1.75rem; /* 28px */
  --heading-h4: 1.5rem; /* 24px */
  --heading-h5: 1.25rem; /* 20px */

  --text-cta: 1rem; /* 16px */
  --text-extra-large: 1.85rem; /* 30px */
  --text-large: 1.125rem; /* 18px */
  --text-default: 0.875rem; /* 14px */
  --text-medium: 0.75rem; /* 12px */
  --text-small: 0.625rem; /* 10px */
  --text-extra-small: 0.5rem; /* 8px */

  /* Breakpoints */
  --sm-breakpoint: 576px;
  --md-breakpoint: 768px;
  --lg-breakpoint: 992px;
  --xl-breakpoint: 1200px;
  --xxlg-breakpoint: 1400px;
  --xxxlg-breakpoint: 1920px;

  /* Utilities */
  --border-radius: var(--spacing);
  --button-border-radius: var(--spacing-4);

  /* Olivero's overrides */
  --sp0-5: var(--spacing-half);
  --sp: var(--spacing);
  --sp1: var(--spacing-2);
  --sp1-5: var(--spacing-2);
  --sp2: var(--spacing-3);
  --sp2-5: var(--spacing-3);
  --sp3: var(--spacing-4);
  --color--red: #e33f1e;
  --color--gold: #fdca40;
  --color--green: #3fa21c;

  /* Define the variable with a default value of 0 */
  --cookie-banner-height: 0px;
}

@media (min-width: 768px) {
  :root {
    /* md */
    --heading-display: 6rem; /* 96px */
    --heading-h1: 4rem; /* 64px */
    --heading-h2: 3rem; /* 48px */
    --heading-h3: 2rem; /* 32px */
    /*--heading-h4: 1.5rem; 24px */
    /*--heading-h5: 1.25rem; 20px */
    --grid-spacing: var(--spacing-4);

    --padding-small: var(--spacing-10);
    --padding-medium: var(--spacing-15);
    --padding-large: var(--spacing-20);
  }
}

/* lg */
@media (min-width: 1440px) {
  :root {
    --heading-display: 8rem; /* 128px */
    --heading-h1: 5rem; /* 80px */
    --heading-h2: 4rem; /* 64px */
    --heading-h3: 3rem; /* 48px */
    --heading-h4: 2rem; /* 32px */
    --heading-h5: 1.5rem; /* 24px */

    --text-large: 1.25rem; /* 20px */
    --text-default: 1rem; /* 16px */
    --text-small: 0.75rem; /* 12px */
    --text-extra-small: 0.5rem; /* 8px */

    --padding-small: var(--spacing-15);
    --padding-medium: var(--spacing-20);
    --padding-large: var(--spacing-30);
  }
}

/* Spacing utility classes */

/* mobile 64px, tablet 80px, desktop 120px */
.padding-top--small {
  padding-top: var(--padding-small);
}

/* mobile 80px, tablet 120px, desktop 160px */
.padding-top--medium {
  padding-top: var(--padding-medium);
}

/* mobile 120px, tablet 160px, desktop 240px */
.padding-top--large {
  padding-top: var(--padding-large);
}

/* mobile 64px, tablet 80px, desktop 120px */
.padding-bottom--small {
  padding-bottom: var(--padding-small);
}

/* mobile 80px, tablet 120px, desktop 160px */
.padding-bottom--medium {
  padding-bottom: var(--padding-medium);
}

/* mobile 120px, tablet 160px, desktop 240px */
.padding-bottom--large {
  padding-bottom: var(--padding-large);
}

.margin-bottom--large {
  margin-bottom: var(--padding-large);
}