/* ==========================================================================
   MCP Observability Framework - Core Design System & Tokens
   1:1 Parity with Admin KayWat & BetterBase Observer Architecture
   ========================================================================== */

:root {
  /* Surface & Background Colors */
  --obs-bg-primary: #0a0a0f;
  --obs-bg-secondary: #12121a;
  --obs-bg-tertiary: #1c1c28;
  --obs-bg-elevated: #242436;
  
  /* Shell & Global Colors */
  --shell-bg: #121212;
  --shell-surface: #1e1e1e;
  --shell-card: #1a1a1a;
  --shell-card-hover: #252525;
  --shell-elevated: #2a2a2a;
  
  /* Borders */
  --obs-border: rgba(255, 255, 255, 0.08);
  --obs-border-hover: rgba(255, 255, 255, 0.16);
  --obs-border-focus: rgba(16, 185, 129, 0.5);
  
  /* Typography Colors */
  --obs-text-primary: #ffffff;
  --obs-text-secondary: #9ca3af;
  --obs-text-muted: #6b7280;
  --obs-text-faint: #555f6e;
  
  /* Observer Signature Colors (Emerald #10b981) */
  --obs-accent-primary: #10b981;
  --obs-accent-secondary: #059669;
  --obs-accent-hover: #34d399;
  --obs-accent-glow: rgba(16, 185, 129, 0.25);
  --obs-accent-subtle: rgba(16, 185, 129, 0.12);
  
  /* Shell Accent (Red #fe2c55 / Admin KayWat Brand) */
  --shell-accent: #fe2c55;
  --shell-accent-hover: #ff476d;
  --shell-accent-subtle: rgba(254, 44, 85, 0.12);

  /* Status & Semantic Colors */
  --obs-blue: #3b82f6;
  --obs-blue-subtle: rgba(59, 130, 246, 0.12);
  --obs-purple: #a855f7;
  --obs-purple-subtle: rgba(168, 85, 247, 0.12);
  --obs-amber: #f59e0b;
  --obs-amber-subtle: rgba(245, 158, 11, 0.12);
  --obs-red: #ef4444;
  --obs-red-subtle: rgba(239, 68, 68, 0.12);
  
  /* Dimensions & Spacing */
  --shell-header-h: 56px;
  --shell-sidebar-w: 240px;
  --shell-sidebar-collapsed-w: 68px;
  --obs-sidebar-w: 260px;
  --obs-radius-sm: 6px;
  --obs-radius-md: 8px;
  --obs-radius-lg: 12px;
  --obs-radius-xl: 16px;

  /* Typography Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--obs-bg-primary);
  color: var(--obs-text-primary);
  font-family: var(--font-sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Links & Buttons base */
a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Utility Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.45); }
}

@keyframes navBarShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}