@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.cdnfonts.com/css/friz-quadrata-std');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  /* Primary */
  --blue-100: #002041;

  /* Secondary */
  --yellow-200: #c0a65b;

  /* Winter */
  --winter-light: #E7EEF1;
  --winter-dark: #22657e;
  --winter-text: #0b2028;
  --winter-bg: #F6F9FA;

  /* Summer */
  --summer-light: #FFF8DF;
  --summer-dark: #bfa060;
  --summer-text: #282114;
  --summer-bg: #FBF9F6;

  /* Spring */
  --spring-light: #F0E8DF;
  --spring-dark: #ac9475;
  --spring-text: #28221b;
  --spring-bg: #FAF9F7;

  /* Autumn */
  --autumn-light: #D6C2B6;
  --autumn-dark: #8e5534;
  --autumn-text: #28180f;
  --autumn-bg: #FBF8F7;

  /* Typography */
  --font-friz-quadrata: 'Friz Quadrata', serif;
  --font-open-sans: 'Open Sans', sans-serif;
  --font-marcellus: 'Marcellus', serif;
  --font-inter: 'Inter', sans-serif;
}

/* ==========================================================================
   Primary & Secondary Utility Classes
   ========================================================================== */

/* Primary (--blue-100) */
.bg-blue-100 {
  background-color: var(--blue-100);
}
.text-blue-100 {
  color: var(--blue-100);
}
.border-blue-100 {
  border-color: var(--blue-100);
}

/* Secondary (--yellow-200) */
.bg-yellow-200 {
  background-color: var(--yellow-200);
}
.text-yellow-200 {
  color: var(--yellow-200);
}
.border-yellow-200 {
  border-color: var(--yellow-200);
}

/* ==========================================================================
   Series Utility Classes (Winter, Summer, Spring, Autumn)
   ========================================================================== */

/* --- Winter Series --- */
.bg-series-winter-light {
  background-color: var(--winter-light);
}
.text-series-winter-light {
  color: var(--winter-light);
}
.border-series-winter-light {
  border-color: var(--winter-light);
}

.bg-series-winter-dark {
  background-color: var(--winter-dark);
}
.text-series-winter-dark {
  color: var(--winter-dark);
}
.border-series-winter-dark {
  border-color: var(--winter-dark);
}

.text-series-winter-text {
  color: var(--winter-text);
}
.bg-series-winter-text {
  background-color: var(--winter-text);
}

.bg-series-winter-bg {
  background-color: var(--winter-bg);
}
.text-series-winter-bg {
  color: var(--winter-bg);
}
.border-series-winter-bg {
  border-color: var(--winter-bg);
}

/* --- Summer Series --- */
.bg-series-summer-light {
  background-color: var(--summer-light);
}
.text-series-summer-light {
  color: var(--summer-light);
}
.border-series-summer-light {
  border-color: var(--summer-light);
}

.bg-series-summer-dark {
  background-color: var(--summer-dark);
}
.text-series-summer-dark {
  color: var(--summer-dark);
}
.border-series-summer-dark {
  border-color: var(--summer-dark);
}

.text-series-summer-text {
  color: var(--summer-text);
}
.bg-series-summer-text {
  background-color: var(--summer-text);
}

.bg-series-summer-bg {
  background-color: var(--summer-bg);
}
.text-series-summer-bg {
  color: var(--summer-bg);
}
.border-series-summer-bg {
  border-color: var(--summer-bg);
}

/* --- Spring Series --- */
.bg-series-spring-light {
  background-color: var(--spring-light);
}
.text-series-spring-light {
  color: var(--spring-light);
}
.border-series-spring-light {
  border-color: var(--spring-light);
}

.bg-series-spring-dark {
  background-color: var(--spring-dark);
}
.text-series-spring-dark {
  color: var(--spring-dark);
}
.border-series-spring-dark {
  border-color: var(--spring-dark);
}

.text-series-spring-text {
  color: var(--spring-text);
}
.bg-series-spring-text {
  background-color: var(--spring-text);
}

.bg-series-spring-bg {
  background-color: var(--spring-bg);
}
.text-series-spring-bg {
  color: var(--spring-bg);
}
.border-series-spring-bg {
  border-color: var(--spring-bg);
}

/* --- Autumn Series --- */
.bg-series-autumn-light {
  background-color: var(--autumn-light);
}
.text-series-autumn-light {
  color: var(--autumn-light);
}
.border-series-autumn-light {
  border-color: var(--autumn-light);
}

.bg-series-autumn-dark {
  background-color: var(--autumn-dark);
}
.text-series-autumn-dark {
  color: var(--autumn-dark);
}
.border-series-autumn-dark {
  border-color: var(--autumn-dark);
}

.text-series-autumn-text {
  color: var(--autumn-text);
}
.bg-series-autumn-text {
  background-color: var(--autumn-text);
}

.bg-series-autumn-bg {
  background-color: var(--autumn-bg);
}
.text-series-autumn-bg {
  color: var(--autumn-bg);
}
.border-series-autumn-bg {
  border-color: var(--autumn-bg);
}

/* ==========================================================================
   Typography Utility Classes
   ========================================================================== */
.font-marcellus {
  font-family: var(--font-marcellus);
}
.font-inter {
  font-family: var(--font-inter);
}
.font-opensans,
.font-open-sans {
  font-family: var(--font-open-sans);
}
.font-friz-quadrata {
  font-family: var(--font-friz-quadrata);
}