@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
  background: #f8fafc;
  color: #111827;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #030305;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.focus-ring {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-ring:focus-visible {
  outline-color: #2563eb;
}

@layer components {
  .container-custom {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  .dot-grid {
    background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .dot-grid-cyan {
    background-image: radial-gradient(circle, rgba(0,240,255,0.08) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .terminal-window {
    @apply rounded-xl border border-white/[0.06] bg-graphite/80 backdrop-blur-sm;
  }

  .terminal-header {
    @apply flex items-center gap-1.5 px-4 py-3 border-b border-white/[0.06];
  }

  .terminal-dot {
    @apply w-2.5 h-2.5 rounded-full;
  }

  .animate-agent-pulse {
    animation: agentPulse 2s ease-in-out infinite;
  }

  .animate-slide-in {
    animation: slideIn 0.6s ease-out forwards;
  }

  .animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
  }
}

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

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

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

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

@layer utilities {
  .text-gradient-cyan {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-electric-cyan to-soft-emerald;
  }

  .glow-cyan-sm {
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
  }

  .glow-emerald-sm {
    box-shadow: 0 0 20px rgba(0, 217, 165, 0.15);
  }
}