@font-face {
  font-family: 'Space Grotesk';
  src: url("/assets/SpaceGrotesk-44fd2800.ttf") format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-94ca71ec.ttf") format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.ctx-indicator {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: color 0.4s ease;
}

.ctx-neutral {
  color: oklch(var(--bc) / 0.4);
}

.ctx-low {
  color: oklch(var(--wa) / 0.9);
}

.ctx-mid {
  color: oklch(75% 0.18 55);
}

.ctx-critical {
  color: oklch(var(--er) / 0.95);
  animation: ctx-pulse 1.5s ease-in-out infinite;
}

@keyframes ctx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes demo-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: demo-fade-in 0.6s ease-out forwards;
}

/* Quality Circle — solid badge */
.quality-circle {
  position: relative;
  border-radius: 50%;
  background: var(--qc-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.15);
}

.quality-circle-value {
  font-family: 'JetBrains Mono', monospace;
}