@import "tailwindcss";
@config "./tailwind.config.js";

@layer base {
  @font-face {
    font-family: 'Inter Variable';
    src: url('/static/fonts/Inter-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
  }
  @font-face {
    font-family: 'JetBrains Mono Variable';
    src: url('/static/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-display: swap;
  }
  body {
    @apply font-sans bg-white text-brand-navy antialiased;
  }
  h1, h2, h3 { @apply font-black; letter-spacing: -2.5px; }
  h1 { letter-spacing: -3px; }
}

@layer utilities {
  .grad-text {
    @apply bg-brand-grad bg-clip-text text-transparent;
  }
  .grad-bg {
    @apply bg-brand-grad text-white;
  }
  .eyebrow {
    @apply text-[11px] uppercase font-bold tracking-[0.18em];
  }
}