/* Import Google Fonts specified in the design ethos */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Lora:wght@700&display=swap');

/* Define the BWBW color palette as CSS variables for easy reuse.
  This is based on the design_ethos_and_plan.
*/
:root {
  --shire-green: #2E4F4F;
  --brandywine-blue: #2C7A7B;
  --parchment-cream: #F8F5F1; /*  */
  --sunstone-yellow: #F9B233; /*  */
  --deep-slate: #1E293B;      /*  */
  --soft-gray: #94A3B8;       /*  */
}

/* Apply the base styles to the body.
*/
body {
  background-color: var(--parchment-cream);
  font-family: 'Inter', sans-serif; /*  */
  color: var(--deep-slate);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply the headline font to all heading elements.
*/
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', serif; /*  */
}

/* A simple utility class to allow Tailwind to use our custom color variables.
  We can use `bg-sunstone-yellow` in HTML now.
*/
.bg-sunstone-yellow {
    background-color: var(--sunstone-yellow);
}

.text-soft-gray {
    color: var(--soft-gray);
}

.focus\:border-brandywine-blue:focus {
    --tw-border-opacity: 1;
    border-color: var(--brandywine-blue);
}

.focus\:ring-brandywine-blue:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: var(--brandywine-blue);
}