@import "tailwindcss";

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900; /* Variable font supports full range */
  font-display: swap;
  src: url("/static/fonts/Geist.woff2") format("woff2");
}

@theme {
  --font-sans: "Geist", system-ui, sans-serif;

  --color-bg-100: oklch(0.09 0 0);
  --color-bg-200: oklch(0.12 0 0);
  --color-bg-300: oklch(0.15 0 0);
  --color-bg-400: oklch(0.18 0 0);

  --color-fg-100: oklch(0.92 0 0);
  --color-fg-200: oklch(0.6 0 0);
  --color-fg-300: oklch(0.4 0 0);

  --color-border-100: oklch(1 0 0 / 9%);
  --color-border-200: oklch(1 0 0 / 30%);

  --color-ring-100: oklch(0.55 0 0);
}

@layer base {
  body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fade-up {
    animation: fadeUp 0.4s ease forwards;
    opacity: 0;
  }
}