frontend/src/index.css

@import "tailwindcss";

/* ────────────────────────────────────────────────────────
   Design Tokens & Theme
──────────────────────────────────────────────────────── */
@theme {
  --font-sans: 'Inter', system-ui, sans-serif;

  /* Primary (indigo) */
  --color-primary-50:  #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;

  /* Extra slate shades */
  --color-slate-850: #1a2133;
  --color-slate-950: #0c1220;

  /* Custom animations */
  --animate-fade-in:  fadeIn  0.4s ease-out;
  --animate-slide-up: slideUp 0.4s ease-out;

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

/* ────────────────────────────────────────────────────────
   Base
──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--color-slate-950);
  color: #f1f5f9;   /* slate-100 */
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ────────────────────────────────────────────────────────
   Reusable Component Utilities  (CSS-only, no @apply)
──────────────────────────────────────────────────────── */

/* Cards */
.card {
  background: #0f172a;            /* slate-900 */
  border: 1px solid #1e293b;      /* slate-800 */
  border-radius: 1rem;
}
.card-hover {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card-hover:hover {
  border-color: #334155;          /* slate-700 */
  box-shadow: 0 10px 25px -5px rgb(49 46 129 / 0.2);
}

/* Buttons */
.btn-primary {
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(79 70 229 / 0.3);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-primary:hover  { background: #6366f1; box-shadow: 0 6px 20px rgb(99 102 241 / 0.4); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: #1e293b;
  color: #e2e8f0;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #334155;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-secondary:hover  { background: #334155; border-color: #475569; }
.btn-secondary:active { transform: scale(0.97); }

/* Inputs */
.input-field {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #f1f5f9;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.input-field::placeholder { color: #64748b; }
.input-field:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.2);
}

/* Labels */
.label {
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.375rem;
}

/* Badges */
.badge-green {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgb(6 78 59 / 0.5);
  color: #6ee7b7;
  border: 1px solid rgb(6 78 59 / 0.5);
}
.badge-red {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgb(127 29 29 / 0.5);
  color: #fca5a5;
  border: 1px solid rgb(127 29 29 / 0.5);
}
.badge-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgb(49 46 129 / 0.5);
  color: #a5b4fc;
  border: 1px solid rgb(49 46 129 / 0.5);
}
.badge-yellow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgb(120 53 15 / 0.5);
  color: #fcd34d;
  border: 1px solid rgb(120 53 15 / 0.5);
}

/* Section headers */
.section-header {
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Dividers */
.divider {
  border-top: 1px solid #1e293b;
  margin: 1.5rem 0;
}

/* Animations */
.animate-fade-in  { animation: var(--animate-fade-in); }
.animate-slide-up { animation: var(--animate-slide-up); }