@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@300;400;500;600&display=swap');

@layer base {
  :root {
    --color-saffron: 255 153 51;
    --color-cardamom: 19 136 8;
    --color-charcoal: 51 51 51;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
  }
  
  body {
    font-family: 'Inter', sans-serif;
    color: rgb(var(--color-charcoal));
    background-color: #fafafa;
  }
}

@layer utilities {
  .bg-saffron {
    background-color: rgb(var(--color-saffron));
  }
  .text-saffron {
    color: rgb(var(--color-saffron));
  }
  .border-saffron {
    border-color: rgb(var(--color-saffron));
  }
  
  .bg-cardamom {
    background-color: rgb(var(--color-cardamom));
  }
  .text-cardamom {
    color: rgb(var(--color-cardamom));
  }
  .border-cardamom {
    border-color: rgb(var(--color-cardamom));
  }
  
  .bg-charcoal {
    background-color: rgb(var(--color-charcoal));
  }
  .text-charcoal {
    color: rgb(var(--color-charcoal));
  }
}