@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #2c2c2c;
  --brand-green: #7cb342;
  --brand-green-dark: #558b2f;
  --brand-grey: #4a4a4a;
}

body {
  color: var(--foreground);
  background: var(--background);
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply text-brand-grey-dark font-semibold;
  }
  a {
    @apply text-brand-green-dark hover:text-brand-green transition-colors;
  }
}