@import "tailwindcss";

@theme {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  --color-background: #09090b;
  --color-foreground: #fafafa;
  --color-card: #0e0e10;
  --color-card-foreground: #fafafa;
  --color-popover: #0e0e10;
  --color-popover-foreground: #fafafa;
  --color-primary: #3b82f6;
  --color-primary-foreground: #ffffff;
  --color-secondary: #1e1e22;
  --color-secondary-foreground: #fafafa;
  --color-muted: #1e1e22;
  --color-muted-foreground: #71717a;
  --color-accent: #1e1e22;
  --color-accent-foreground: #fafafa;
  --color-destructive: #dc2626;
  --color-destructive-foreground: #fafafa;
  --color-border: #1e1e22;
  --color-input: #1e1e22;
  --color-ring: #3b82f6;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
}

* {
  border-color: var(--color-border);
}

body {
  margin: 0;
  min-height: 100vh;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes auroraFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes auroraFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-25px, 20px) scale(1.08); }
  66% { transform: translate(15px, -25px) scale(0.92); }
}

@keyframes auroraFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -15px) scale(1.1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}

@keyframes gentlePulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes progressSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes stepReveal {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
