:root {
  /* Core colors */
  --primary-color: rgb(154, 179, 144);
  --primary-hover-color: rgb(98, 129, 50);
  --text-light: #fff;
  --text-dark: #333;

  /* Bootstrap-inspired palette */
  --bs-primary: #9ab390;
  --bs-primary-dark: #7b8f73;
  --bs-primary-ultradark: rgb(73, 97, 37);
  --bs-primary-light: rgb(189, 208, 159);
  --bs-primary-light-opaque: rgba(189, 208, 159, 0.1);
  --bs-primary-ultralight: rgb(245, 241, 234);
  --bs-primary-secondary: rgb(204, 76, 20);

  /* Semantic uses */
  --bs-border-color: var(--bs-primary);
  --bs-link-color: var(--bs-primary-secondary);
  --bs-link-color-opaque: rgba(204, 76, 20, 0.1);
  --bs-link-hover-color: #628132;
  --bs-footer: #585f69;
  --bs-footer-dark: #3e4753;

  /* Opacities */
  --opaque-white-80: rgba(255, 255, 255, 0.8);
  --opaque-white-60: rgba(255, 255, 255, 0.6);
  --opaque-white-50: rgba(255, 255, 255, 0.5);
  --opaque-white-10: rgba(255, 255, 255, 0.1);
  --opaque-primary-50: rgba(245, 241, 234, 0.7);
  --opaque-primary-mid: rgba(245, 241, 234, 0.5);
  --opaque-ultradark-10: rgba(73, 97, 37, 0.1);

  /* Screen size constants */
  --xsmall-screen: 480px;
  --small-screen: 576px;
  --medium-screen: 768px;
  --large-screen: 992px;
  --xlarge-screen: 1200px;
  --xxlarge-screen: 1400px;
}

/* Example responsive usage */
@media (max-width: 480px) {
  .example { font-size: 0.8rem; }
}
@media (max-width: 576px) {
  .example { font-size: 0.9rem; }
}
@media (max-width: 768px) {
  .example { font-size: 1rem; }
}