@import "tailwindcss";

@theme {
  --font-display: 'Fraunces', serif;
  --font-sans: 'Chivo', sans-serif;

  --color-brand-deep: #1F291D;
  --color-brand-muted: #E8EBE4;
  --color-brand-paper: #F5F5F3;
  --color-brand-accent: #6C7A67;
  --color-brand-text: #2c2c2c;

  --color-bg-base: #F5F5F3;
}

@layer base {
  @font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    src: url('../fonts/fraunces/fraunces-latin-700-normal.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Chivo';
    font-style: normal;
    font-weight: 100 900;
    src: url('../fonts/chivo/chivo-latin-ext-400-normal.woff2') format('woff2');
  }
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-base);
  color: var(--color-brand-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
}

.text-balance {
  text-wrap: balance;
}

a:not(.btn):hover {
  text-decoration: underline;
}