@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=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  --green-50: #e6f2ef;
  --green-100: #cce6df;
  --green-200: #99cdbf;
  --green-300: #66b39f;
  --green-400: #339a7f;
  --green-500: #054239; /* primary */
  --green-600: #043730;
  --green-700: #032c27;
  --green-800: #02211d;
  --green-900: #011613;

  --beige-100: #e6dcd4; /* base beige */

  /* Typography */
  --font-philosopher: 'Philosopher', serif;
  --font-open-sans: 'Open Sans', sans-serif;
}

/* Custom Utility Classes isolated for Procella Spring Bed Layer */

/* Typography */
.font-philosopher {
  font-family: var(--font-philosopher), var(--font-display), 'Philosopher', serif;
}

.font-opensans {
  font-family: var(--font-open-sans), var(--font-body), 'Open Sans', sans-serif;
}

/* Brand Colors Utilities */
.bg-brand-green-500 {
  background-color: var(--green-500, #054239);
}

.hover\:bg-brand-green-500:hover {
  background-color: var(--green-500, #054239);
}

.bg-brand-green-600 {
  background-color: var(--green-600, #043730);
}

.hover\:bg-brand-green-600:hover {
  background-color: var(--green-600, #043730);
}

.bg-brand-green-50 {
  background-color: var(--green-50, #e6f2ef);
}

.bg-brand-beige,
.bg-brand-beige-100 {
  background-color: var(--beige-100, #e6dcd4);
}

.bg-brand-base {
  background-color: var(--green-500, #054239);
}

.text-brand-green-500 {
  color: var(--green-500, #054239);
}

.hover\:text-brand-green-500:hover {
  color: var(--green-500, #054239);
}

.text-brand-beige,
.text-brand-beige-100 {
  color: var(--beige-100, #e6dcd4);
}

.border-brand-green-500 {
  border-color: var(--green-500, #054239);
}

.border-brand-beige,
.border-brand-beige-100 {
  border-color: var(--beige-100, #e6dcd4);
}

.fill-brand-green-500 {
  fill: var(--green-500, #054239);
}

.stroke-brand-green-500 {
  stroke: var(--green-500, #054239);
}

.ring-brand-green-500 {
  --tw-ring-color: var(--green-500, #054239);
}

.after\:bg-brand-green-500::after {
  background-color: var(--green-500, #054239);
}

.shadow-brand-base {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}