@import "tailwindcss";

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in { animation: fade-in 0.2s ease-out; }
.animate-scale-in { animation: scale-in 0.3s ease-out; }

:root {
  --background: #0a0a0a;
  --foreground: #ffffff;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-satoshi), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-clash), var(--font-satoshi), ui-sans-serif, sans-serif;
}

body {
  background: var(--background);
  color: var(--foreground);
  /* Reference the next/font variables directly — `@theme inline` above does not
     emit real --font-sans/--font-display custom properties. */
  font-family: var(--font-satoshi), ui-sans-serif, system-ui, sans-serif;
}

/* Headings use Clash Display by default for a sharper, editorial feel. */
h1,
h2,
h3 {
  font-family: var(--font-clash), var(--font-satoshi), ui-sans-serif, sans-serif;
  letter-spacing: 0.01em;
}

