@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: -0.022em; }
  h1 { letter-spacing: -0.028em; }
}

@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];
  }
}

/* WCAG 2.3.3 — respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
