@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --argos-bg: #030912;
  --argos-blue: #0070f3;
  --argos-purple: #7c3aed;
  --argos-cyan: #00d4ff;
}

html, body, #app {
  background-color: var(--argos-bg) !important;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.18), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0, 112, 243, 0.16), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(0, 212, 255, 0.10), transparent 50%) !important;
  background-attachment: fixed !important;
  font-family: 'Manrope', sans-serif !important;
  color: #e8ecf2 !important;
  min-height: 100vh;
}

h1, h2, h3, h4, .dashboard-title, .header-title {
  font-family: 'Fraunces', serif !important;
  color: #ffffff !important;
}

a {
  color: var(--argos-cyan) !important;
}

/* Glassmorphism cards for endpoint groups/rows */
.card, .endpoint, .group, .endpoint-group, [class*="rounded"] {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Status pill colors kept semantic (green/red) but brighten on dark bg */
.bg-success, .success, [class*="green"] {
  background-color: rgba(34, 197, 94, 0.85) !important;
}
.bg-danger, .danger, [class*="red"] {
  background-color: rgba(239, 68, 68, 0.85) !important;
}

/* Muted text */
p, span, .subtitle, .description {
  color: #a8b2c2 !important;
}

/* Links/buttons using Argos gradient accent */
button, .btn {
  background: linear-gradient(135deg, var(--argos-blue), var(--argos-purple)) !important;
  border: none !important;
  color: #ffffff !important;
}