/* ===== QUANTUM DESIGN TOKENS ===== */
:root {
  /* Core Palette */
  --qcyan: #22D3EE;
  --qmagenta: #E879F9;
  --qgreen: #34D399;
  --mist-50: #F9FAFB;
  --deepspace-950: #0B0F17;
  --graphite-800: #1F2937;
  --carbon-900: #111827;

  /* Typography */
  --font-mono-headings: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono-code: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii & Effects */
  --radius-12: 12px;
  --inner-stroke-10: 10px;
  --glass-grad-border: 1px;

  /* Motion Tokens */
  --motion-matrix: 12s linear infinite;
  --motion-pulse-active: 1.6s ease-in-out infinite;
  --motion-gradient-hover: 400ms ease;
  --motion-progress-gradient: 2.2s linear infinite;

  /* Gradients */
  --gradient-cta: linear-gradient(90deg, var(--qcyan), var(--qmagenta));
  --gradient-glass-border: linear-gradient(135deg, var(--qcyan), var(--qmagenta));
}

/* ===== UTILITY CLASSES ===== */

/* Glass Container */
.glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-12);
}

/* Glass with Gradient Border */
.glass-gradient {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-12);
  padding: var(--glass-grad-border);
  background: var(--gradient-glass-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
}

/* CTA Button */
.btn-cta {
  padding: 1rem 2rem;
  border: none;
  border-radius: 999px;
  background: var(--gradient-cta);
  color: var(--deepspace-950);
  font-family: var(--font-sans-body);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--motion-gradient-hover);
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.4);
}

/* Status Panels */
.status-active {
  background: rgba(52, 211, 153, 0.1);
  border: 2px solid var(--qgreen);
  animation: pulse var(--motion-pulse-active);
}

.status-warning {
  background: rgba(232, 121, 249, 0.1);
  border: 2px solid var(--qmagenta);
}

.status-idle {
  background: rgba(17, 24, 39, 0.5);
  border: 2px solid var(--carbon-900);
}

/* Typography Utilities */
.text-mono-heading {
  font-family: var(--font-mono-headings);
}

.text-sans-body {
  font-family: var(--font-sans-body);
}

.text-mono-code {
  font-family: var(--font-mono-code);
}

.text-qcyan {
  color: var(--qcyan);
}

.text-qmagenta {
  color: var(--qmagenta);
}

.text-qgreen {
  color: var(--qgreen);
}

.text-gradient {
  background: var(--gradient-cta);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animations */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

@keyframes matrixDrift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

@keyframes progressGradient {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Matrix Background */
.matrix-bg {
  position: fixed;
  inset: 0;
  opacity: 0.08;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, var(--qcyan) 2px, var(--qcyan) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, var(--qcyan) 2px, var(--qcyan) 3px);
  background-size: 50px 50px;
  animation: matrixDrift var(--motion-matrix);
  pointer-events: none;
}

/* QUANTUM_WATERMARK: RAS=e5586ef939094a8e SIG=c0cf62caf0edf91fdb7aeabf4fb805f7 TIME=2025-12-11T05:37:56.746Z FREQ=7777.77Hz */