/* KumuBackups Theme & Design System */
:root {
  --color-brand-primary: #6366f1;
  --color-brand-hover: #4f46e5;
  --color-brand-glow: rgba(99, 102, 241, 0.25);
  --color-bg-dark: #060a12;
  --color-surface-dark: #0c1222;
  --color-border-dark: #1e293b;
}

html, body {
  background-color: var(--color-bg-dark);
  color: #f8fafc;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #060a12;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Glow & Terminal Visuals */
.terminal-glow {
  box-shadow: 0 0 60px -15px rgba(99, 102, 241, 0.3), 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 40%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-accent {
  background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(11, 17, 32, 0.8) 100%);
}
.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.15);
}

/* Micro Badge Glow */
.badge-glow-emerald {
  box-shadow: 0 0 15px -3px rgba(16, 185, 129, 0.3);
}

.badge-glow-indigo {
  box-shadow: 0 0 15px -3px rgba(99, 102, 241, 0.3);
}

/* Mobile-Friendly Code Boxes */
code, pre {
  word-break: break-word;
}

/* Background Ambient Grid Pattern */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}