:root {
    --primary: #0A0934; /* dark brand color */
    --secondary: #3D358B; /* purple brand color */
    --brandOrange: #F35B05; /* orange brand color */
    --brandYellow: #FFD939; /* yellow brand color */
    --brandPurple: #7679EE;
    --brandLavender: #E0E0E7;
  
    /* Text Colors */
    --baseText: #000000; /* black */
    --lightblue: #1677FF; /* light-blue */
    --gray: #2C3E50;
    --darkgray: #37373E;
  
    /* Background Color */
    --background: #FDF7E7;
  }  

@font-face {
  font-family: "Herokid";
  src: url("Herokid-Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Avenir";
  src: url("AvenirLTStd-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Avenir";
  src: url("AvenirLTStd-Heavy.otf") format("opentype");
  font-weight: 700; /* bold */
  font-style: normal;
}

.font-herokid {
  font-family: "Herokid", sans-serif;
}

.font-avenir {
  font-family: "Avenir", sans-serif;
}

/* Text Colors */
.text-primary {
    color: var(--primary);
  }
  
  .text-secondary {
    color: var(--secondary);
  }
  
  .text-brandOrange {
    color: var(--brandOrange);
  }
  
  .text-brandYellow {
    color: var(--brandYellow);
  }
  
  .text-brandPurple {
    color: var(--brandPurple);
  }
  
  .text-brandLavender {
    color: var(--brandLavender);
  }
  
  .text-baseText {
    color: var(--baseText);
  }
  
  .text-lightblue {
    color: var(--lightblue);
  }
  
  .text-gray {
    color: var(--gray);
  }
  
  .text-darkgray {
    color: var(--darkgray);
  }
  
  /* Background Colors */
  .bg-primary {
    background-color: var(--primary);
  }
  
  .bg-secondary {
    background-color: var(--secondary);
  }
  
  .bg-brandOrange {
    background-color: var(--brandOrange);
  }
  
  .bg-brandYellow {
    background-color: var(--brandYellow);
  }
  
  .bg-brandPurple {
    background-color: var(--brandPurple);
  }
  
  .bg-brandLavender {
    background-color: var(--brandLavender);
  }
  
  .bg-baseText {
    background-color: var(--baseText);
  }
  
  .bg-lightblue {
    background-color: var(--lightblue);
  }
  
  .bg-gray {
    background-color: var(--gray);
  }
  
  .bg-darkgray {
    background-color: var(--darkgray);
  }
  
  .bg-background {
    background-color: var(--background);
  }

  /* Border Colors */
  .border-brandPurple {
    border-color: var(--brandPurple);
  }

  .border-darkgray {
    border-color: var(--darkgray);
  }

  .border-brandOrange {
    border-color: var(--brandOrange);
  }

  .border-secondary {
    border-color: var(--secondary);
  }

  .border-brandYellow {
    border-color: var(--brandYellow);
  }
  
  /* Breakpoints */
@media (min-width: 768px) {
  /* Medium screens and above */
  .md\\:bg-brandLavender {
    background-color: var(--brandLavender);
  }

  .md\\:text-primary {
    color: var(--primary);
  }
}

@media (min-width: 1024px) {
  /* Large screens and above */
  .lg\\:bg-brandLavender {
    background-color: var(--brandLavender);
  }

  .lg\\:text-primary {
    color: var(--primary);
  }
}