:root {
  /* == User Variables == */
  /* Brand Colors */
  --impact-orange: #FF5B3B;
  --core-black: #222021;
  --neutral-grey: #F4F4F4;
  --cloud-pink: #FEE3FF;
  --pop-yellow: #FFF6A4;

  /* Backgrounds */
  --bg-bright-1: var(--neutral-grey);
  --bg-bright-2: var(--cloud-pink);
  --bg-bright-3: var(--pop-yellow);
  --bg-bright-4: unset;
  --bg-bright-5: unset;
  --bg-bright-6: unset;
  --bg-bright-7: unset;
  --bg-bright-8: unset;

  --bg-dark-1: var(--core-black);
  --bg-dark-2: unset;
  --bg-dark-3: unset;
  --bg-dark-4: unset;
  --bg-dark-5: unset;
  --bg-dark-6: unset;
  --bg-dark-7: unset;
  --bg-dark-8: unset;

  /* Colors */
  --c-primary-1: var(--core-black);
  --c-primary-2: unset;
  --c-primary-3: unset;
  --c-primary-4: unset;
  --c-primary-5: unset;
  --c-primary-6: unset;

  --c-secondary-1: unset;
  --c-secondary-2: unset;
  --c-secondary-3: unset;
  --c-secondary-4: unset;
  --c-secondary-5: unset;
  --c-secondary-6: unset;

  --c-accent-1: var(--impact-orange);
  --c-accent-2: unset;
  --c-text-dark: var(--core-black);
  --c-text-medium: unset;
  --c-white: var(--neutral-grey);
  --c-border-light: unset;

  /* Site sizing */
  --site-max-width: 1400px;

  /* Typography */
  --fs-xs: 0.9rem;
  --fs-s: clamp(1rem, 0.5rem + 0.1vw + 0.05vh, 1.1rem);
  --fs-m: clamp(1rem, 0.8rem + 0.4vw + 0.2vh, 1.49rem);
  --fs-l: clamp(1.2rem, 0.9rem + 0.5vw + 0.35vh, 1.98rem);
  --fs-xl: clamp(1.3rem, 1.1rem + 0.8vw + 0.4vh, 3rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 2.1vw + 0.9vh, 3.5rem);
  --fs-hero-s: clamp(1.9rem, 0.5rem + 12vw + 1vh, 12rem);
  --fs-hero-m: clamp(2.2rem, 0.5rem + 14.5vw + 2.5vh, 15rem);
  --fs-hero-l: clamp(2.88rem, 1rem + 13vw + 1vh, 25.92rem);
  --fs-hero-xl: clamp(3.5rem, 0.5rem + 18.5vw, 23rem);
  
  /* Line Heights */
  --lh-s: 1.2;
  --lh-m: 1.3;
  --lh-l: 1.35;
  --lh-xl: 1.8;

  /* Letter Spacing */
  --ls-xs: -0.05em;
  --ls-s: 0em;
  --ls-m: 0.05em;
  --ls-l: 0.1em;
  --ls-xl: 0.15em;

  /* Spacing */
  --spacing-2xs: clamp(8px, calc(6px + 0.5vmin + 0.375vh), 15px);
  --spacing-xs: clamp(16px, calc(11px + 1.25vmin + 0.625vh), 30px);
  --spacing-s: clamp(24px, calc(14px + 1.75vmin + 0.875vh), 50px);
  --spacing-m: clamp(32px, calc(22px + 2vmin + 1vh), 75px);
  --spacing-l: clamp(40px, calc(25px + 2.5vmin + 1.25vh), 95px);
  --spacing-xl: clamp(48px, calc(28px + 3vmin + 1.5vh), 115px);
  --spacing-2xl: clamp(56px, calc(36px + 3.5vmin + 1.75vh), 130px);
  --spacing-3xl: clamp(64px, calc(44px + 4vmin + 2vh), 150px);
  --spacing-header: clamp(80px, calc(42px + 7vmin + 7vh), 220px);

  /* Borders & Shadows */
  --border-radius-s: 5px;
  --border-radius-m: 10px;
  --border-radius-l: 20px;
  --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-m: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-l: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Animations */
  --transition-fast: 300ms;
  --transition-normal: 750ms;
  --transition-slow: 1250ms;
  --cubic-bezier: cubic-bezier(0.25, 0.1, 0, 1);
  --stagger-base: 0.1s;
  --stagger-multiplier: 2;

  /* Fonts */
  --font-primary: "Scale", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: "Polymath", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media screen and (max-width: 749px) {
  :root {
    --fs-hero-m: 17vw;
  }
}