:root {
  /* Default styling goes here */
  width:100vw;
  --brand-gradient: linear-gradient(90deg, #0161E0 0%, #0CCDFF 60%, #00FEFE 100%);
}

:root.light {
  /* Light mode styling goes here */
  width:100vw;
  --bg-secondary: #ffffff;
  --background-color-text: #212227;
  --text-color-secondary: #212227;
  --bg-tertiary: #f9f9f9;
}

:root.dark {
  /* Dark mode styling goes here */
  --bg-color: #131417;
  --bg-primary: #131417;
  --bg-secondary: #1A1C21;
  --bg-tertiary: #212227;
  --footer-bg-color: #131417;
  --footer-border-color: #131417;
  --navbar-border-color: #112227; 
  --background-color-text: #d6d7d7;
  --mermaid-bg-color: #131417;
  width:100vw;
}

/* NEW badge styling - glowing dot with brand gradient */
nav a[href*="document-processing"]:after,
nav a[href*="custom-schemas"]:after,
nav a[href*="graph-generation"]:after,
nav a[href*="graphql-analysis"]:after,
nav a[href*="legal-document-analysis"]:after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0161E0 0%, #0CCDFF 60%, #00FEFE 100%);
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(12, 205, 255, 0.6);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(12, 205, 255, 0.6);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 12px rgba(12, 205, 255, 0.8);
  }
}