@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ============================================
   ERA6 DESIGN SYSTEM: Void & Ember (dark)
   ============================================ */
:root.dark {
  --background: 0 0% 2%;
  --foreground: 0 0% 96%;
  --card: 0 0% 10%;
  --card-foreground: 0 0% 96%;
  --popover: 0 0% 7%;
  --popover-foreground: 0 0% 96%;
  --primary: 14 89% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 7%;
  --secondary-foreground: 0 0% 91%;
  --muted: 0 0% 7%;
  --muted-foreground: 0 0% 40%;
  --accent: 0 0% 10%;
  --accent-foreground: 14 89% 48%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 16%;
  --input: 0 0% 16%;
  --ring: 14 89% 48%;
}

/* ============================================
   ERA6 DESIGN SYSTEM: Warm Paper (light)
   ============================================ */
:root:not(.dark) {
  --background: 30 29% 97%;
  --foreground: 20 13% 9%;
  --card: 0 0% 100%;
  --card-foreground: 20 13% 9%;
  --popover: 30 18% 95%;
  --popover-foreground: 20 13% 9%;
  --primary: 14 89% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 38 15% 91%;
  --secondary-foreground: 20 10% 20%;
  --muted: 38 15% 91%;
  --muted-foreground: 20 5% 40%;
  --accent: 30 18% 95%;
  --accent-foreground: 14 89% 48%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 35 11% 83%;
  --input: 35 11% 83%;
  --ring: 14 89% 48%;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
  font-family: 'Syne', system-ui, sans-serif !important;
}

/* Page header */
header h1,
header .text-xl,
header .text-2xl,
header .font-bold,
header .font-semibold {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.04em !important;
  font-size: 1.75rem !important;
}

/* Group titles */
.endpoint-group-header .text-xl,
.endpoint-group-header .font-semibold {
  font-family: 'Space Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.8rem !important;
}

/* Section labels */
.uppercase.tracking-wider,
.text-sm.font-semibold.uppercase {
  font-family: 'Space Mono', monospace !important;
  letter-spacing: 0.12em !important;
}

/* Endpoint card titles */
.endpoint .text-base,
.endpoint .text-sm,
.endpoint .text-lg {
  font-family: 'Syne', system-ui, sans-serif !important;
}

/* Monospace elements: badges, response times, labels */
.text-xs.text-muted-foreground,
[class*="badge"],
.inline-flex.items-center.rounded-full {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.04em !important;
}

/* Navigation buttons */
header a,
header button {
  font-family: 'Space Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.7rem !important;
}

/* ============================================
   COMPONENTS
   ============================================ */

/* Group containers: Ember left accent */
.endpoint-group {
  border-left: 3px solid hsl(14, 89%, 48%) !important;
  border-radius: 10px !important;
}

/* Group header hover */
.endpoint-group-header:hover {
  background-color: hsl(0, 0%, 7%) !important;
}
:root:not(.dark) .endpoint-group-header:hover {
  background-color: hsl(30, 18%, 95%) !important;
}

/* Cards: era6 radius + hover glow */
.endpoint {
  border-radius: 10px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.endpoint:hover {
  border-color: hsla(14, 89%, 48%, 0.3) !important;
  box-shadow: 0 4px 20px hsla(14, 89%, 48%, 0.06) !important;
}

/* Uptime bars: era6 status colors */
.bg-green-500 {
  background-color: #16A34A !important;
}
.bg-green-700,
.hover\:bg-green-700:hover {
  background-color: #15803d !important;
}
.bg-red-500 {
  background-color: #DC2626 !important;
}
.bg-red-700,
.hover\:bg-red-700:hover {
  background-color: #b91c1c !important;
}

/* Status badge dots */
.bg-green-400 {
  background-color: #16A34A !important;
  box-shadow: 0 0 6px rgba(22, 163, 74, 0.6);
  animation: pulse-green 2.5s ease-in-out infinite;
}
.bg-red-400 {
  background-color: #DC2626 !important;
  box-shadow: 0 0 6px rgba(220, 38, 38, 0.6);
  animation: pulse-red 1.5s ease-in-out infinite;
}

/* Status badge backgrounds */
.bg-green-500.text-white,
[class*="badge"].bg-green-500 {
  background-color: rgba(22, 163, 74, 0.12) !important;
  color: #16A34A !important;
  border: 1px solid rgba(22, 163, 74, 0.2) !important;
}
.bg-destructive,
[class*="badge"].bg-destructive {
  background-color: rgba(220, 38, 38, 0.12) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.2) !important;
}
.bg-yellow-500.text-white,
[class*="badge"].bg-yellow-500 {
  background-color: rgba(217, 119, 6, 0.12) !important;
  color: #D97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
}

/* Unhealthy count badge */
.bg-red-600 {
  background-color: rgba(220, 38, 38, 0.15) !important;
  color: #DC2626 !important;
}

/* Healthy checkmark */
.text-green-600 {
  color: #16A34A !important;
}

/* Primary buttons */
.bg-primary {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.bg-primary:hover {
  box-shadow: 0 0 20px hsla(14, 89%, 48%, 0.25) !important;
}

/* Footer */
footer, .border-t.mt-auto {
  opacity: 0.5;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 6px rgba(22, 163, 74, 0.6); }
  50% { box-shadow: 0 0 12px rgba(22, 163, 74, 0.3); }
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 6px rgba(220, 38, 38, 0.6); }
  50% { box-shadow: 0 0 12px rgba(220, 38, 38, 0.3); }
}