@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Add safelist for all color variations */
@source inline("{bg,text,border}-{blue,clay,cyan,gold,moss,pine,pink,red,rust,sand}-{100,500,900}");

@theme {
  --font-garamond: 'EB Garamond 12', 'Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  --font-iosevka: 'Iosevka', Consolas, 'Liberation Mono', Menlo, monospace;
  --color-blue-100: #c2cfe0;
  --color-blue-500: #6f88a3;
  --color-blue-900: #5d7691;
  --color-clay-100: #ead4c2;
  --color-clay-500: #c49b6f;
  --color-clay-900: #b17f48;
  --color-cyan-100: #c0dadd;
  --color-cyan-500: #6a9799;
  --color-cyan-900: #436668;
  --color-gold-100: #e6dac1;
  --color-gold-500: #bca66d;
  --color-gold-900: #a88b48;
  --color-moss-100: #d0ddc7;
  --color-moss-500: #919f71;
  --color-moss-900: #69734a;
  --color-pine-100: #c7ddd2;
  --color-pine-500: #7b9b85;
  --color-pine-900: #516b57;
  --color-pink-100: #ead4d2;
  --color-pink-500: #c0928a;
  --color-pink-900: #a7695a;
  --color-red-100: #e8c9c9;
  --color-red-500: #b87977;
  --color-red-900: #a35754;
  --color-rust-100: #eacec4;
  --color-rust-500: #c48a74;
  --color-rust-900: #af6649;
  --color-sand-100: #eee8dd;
  --color-sand-500: #d4c5aa;
  --color-sand-900: #b19360;
}

body {
  @apply antialiased bg-sand-100/50;
}

@import "components/wompum.css";
@import "main.css";