directlx-dev/static/css/input.css

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

@layer base {
  :root {
    --color-void: #07070f;
    --color-surface: #0f0f1a;
    --color-surface-50: #16162a;
    --color-surface-100: #1c1c2e;
    --color-border: rgba(92, 184, 44, 0.2);
    --color-border-dim: rgba(255, 255, 255, 0.06);
    --color-primary: #5CB82C;
    --color-primary-light: #86efac;
    --color-accent: #F7931E;
    --color-text: #e8e6f0;
    --color-text-muted: #8b8ca8;
  }

  html { scroll-behavior: smooth; }

  body {
    background-color: var(--color-void);
    color: var(--color-text);
    font-family: 'DM Sans', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Syne', sans-serif;
  }

  ::selection {
    background: rgba(92, 184, 44, 0.35);
    color: #fff;
  }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--color-void); }
  ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-lg font-semibold transition-all duration-200 text-sm tracking-wide;
  }

  .btn-primary {
    background: linear-gradient(135deg, #5CB82C, #4CA324);
    @apply text-white;
    box-shadow: 0 0 20px rgba(92, 184, 44, 0.3);
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, #6fcf37, #5CB82C);
    transform: translateY(-1px);
    box-shadow: 0 0 30px rgba(92, 184, 44, 0.45);
  }

  .btn-secondary {
    @apply bg-surface-100 text-gray-300 border border-white/10 hover:border-white/20 hover:text-white;
  }

  .btn-outline {
    @apply border text-primary-400 hover:text-primary-300;
    border-color: rgba(92, 184, 44, 0.4);
  }
  .btn-outline:hover {
    border-color: rgba(92, 184, 44, 0.7);
    background: rgba(92, 184, 44, 0.07);
  }

  .btn-accent {
    background: linear-gradient(135deg, #F7931E, #ea7c0c);
    @apply text-white font-bold;
    box-shadow: 0 0 20px rgba(247, 147, 30, 0.25);
  }
  .btn-accent:hover {
    background: linear-gradient(135deg, #f9a94a, #F7931E);
    transform: translateY(-1px);
    box-shadow: 0 0 30px rgba(247, 147, 30, 0.4);
  }

  .btn-ghost {
    @apply text-gray-400 hover:text-white hover:bg-white/5;
  }

  /* Cards */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-dim);
    @apply rounded-xl p-6 transition-all duration-300;
  }

  .card-hover {
    @apply card;
  }
  .card-hover:hover {
    border-color: rgba(92, 184, 44, 0.3);
    box-shadow: 0 0 30px rgba(92, 184, 44, 0.07), 0 8px 32px rgba(0,0,0,0.4);
    transform: translateY(-2px);
  }

  /* Form Elements */
  .input {
    background: var(--color-surface-50);
    border: 1px solid var(--color-border-dim);
    @apply w-full px-4 py-3 rounded-lg text-gray-200 placeholder-gray-600 outline-none transition-all duration-200;
    font-family: 'DM Sans', sans-serif;
  }
  .input:focus {
    border-color: rgba(92, 184, 44, 0.5);
    box-shadow: 0 0 0 3px rgba(92, 184, 44, 0.1);
    background: var(--color-surface-100);
  }
  .input::placeholder { color: #4a4a6a; }

  .label {
    @apply block text-sm font-medium text-gray-400 mb-2;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.01em;
  }

  /* Nav */
  .nav-link {
    @apply text-gray-400 hover:text-white font-medium transition-colors duration-200 text-sm;
  }
  .nav-link-active {
    @apply text-white font-semibold;
  }

  /* Gradient text */
  .gradient-text {
    background: linear-gradient(135deg, #86efac 0%, #F7931E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-text-green {
    background: linear-gradient(135deg, #bbf7d0 0%, #5CB82C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Dot grid */
  .dot-grid {
    background-image: radial-gradient(circle, rgba(92, 184, 44, 0.15) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  /* Badge */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold tracking-wider;
  }
  .badge-primary {
    background: rgba(92, 184, 44, 0.12);
    border: 1px solid rgba(92, 184, 44, 0.3);
    @apply text-primary-300;
  }
  .badge-accent {
    background: rgba(247, 147, 30, 0.1);
    border: 1px solid rgba(247, 147, 30, 0.3);
    @apply text-accent-300;
  }
  .badge-red {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    @apply text-red-400;
  }

  /* Avatar */
  .avatar {
    background: linear-gradient(135deg, #5CB82C, #F7931E);
    @apply rounded-full flex items-center justify-center text-white font-bold flex-shrink-0;
    font-family: 'Syne', sans-serif;
  }
}

/* HTMX loading indicator */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator  { opacity: 1; }

/* Prose overrides for dark theme */
.prose-dark { color: #c4c2d4; }
.prose-dark h1, .prose-dark h2, .prose-dark h3,
.prose-dark h4, .prose-dark h5, .prose-dark h6 {
  color: #f1f0ff;
  font-family: 'Syne', sans-serif;
}
.prose-dark a { color: #86efac; }
.prose-dark a:hover { color: #bbf7d0; }
.prose-dark strong { color: #e8e6f0; }
.prose-dark code {
  background: rgba(92, 184, 44, 0.1);
  border: 1px solid rgba(92, 184, 44, 0.2);
  color: #86efac;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.prose-dark pre {
  background: #0f0f1a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
}
.prose-dark blockquote {
  border-left-color: #5CB82C;
  color: #8b8ca8;
}
.prose-dark hr { border-color: rgba(255,255,255,0.06); }

/* Animations */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}
.pulse-glow-anim { animation: pulse-glow 3s ease-in-out infinite; }