@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Custom theme */
@theme {
  --color-accent: #00e5a0;
  --color-accent-dim: #00c88a;
  --color-surface: #0a0a0f;
  --color-surface-1: #111118;
  --color-surface-2: #1a1a24;
  --color-surface-3: #24243a;
  --color-border: #2a2a3e;
  --color-text-primary: #e8e8f0;
  --color-text-secondary: #a8a8be;
  --color-text-muted: #72728c;

  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;

  --animate-fade-in: fade-in 0.6s ease-out;
  --animate-slide-up: slide-up 0.6s ease-out;
  --animate-glow: glow 3s ease-in-out infinite alternate;
  --animate-blink: blink 1s step-end infinite;

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes slide-up {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes glow {
    0% {
      box-shadow: 0 0 20px rgba(0, 229, 160, 0.1);
    }
    100% {
      box-shadow: 0 0 40px rgba(0, 229, 160, 0.2);
    }
  }

  @keyframes blink {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
}
