:root {
  --color-primary: #008c48;
  /* Using clamp() for responsive font sizes */
  --font-xsm: clamp(8px, 1vw, 10px);
  --font-sm: clamp(10px, 1.6vw, 20px);
  --font-xBase: clamp(11px, 1.7vw, 14px);
  --font-base: clamp(14px, 1.8vw, 16px);
  --font-xmd: clamp(12px, 2vw, 18px);
  --font-md: clamp(10px, 2.2vw, 22px);
  --font-xlg: clamp(12px, 3vw, 28px);
  --font-lg: clamp(18px, 3.5vw, 30px);
  --font-xl: clamp(24px, 5vw, 50px);
}

/* Define all colors */
.bg_primary {
  background-color: var(--color-primary);
}
.text_primary {
  color: var(--color-primary);
}

/*=========================================== DEFINE-ALL = FONT-SIZES ========================================== */
.text_xsm {
  font-size: var(--font-xsm);
}

.text_sm {
  font-size: var(--font-sm);
}

.text_xbase {
  font-size: var(--font-xBase);
}

.text_base {
  font-size: var(--font-base);
}

.text_xmd {
  font-size: var(--font-xmd);
}

.text_md {
  font-size: var(--font-md);
}

.text_xlg {
  font-size: var(--font-xlg);
}

.text_lg {
  font-size: var(--font-lg);
}

.text_xl {
  font-size: var(--font-xl);
}