:root {
  --font-primary: 'Inter', sans-serif;
  --color-bg-dark: #1e1e2f;
  --color-bg-light: #f5f7fa;
  --color-primary: #0fa3b1; /* tealish */
  --color-primary-dark: #0b7d86;
  --color-accent: #ffb400; /* amber */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-card-bg: rgba(255,255,255,0.12);
  --color-card-bg-dark: rgba(255,255,255,0.06);
  --blur-radius: 12px;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--color-bg-dark);
    color: #e0e0e0;
    font-family: var(--font-primary);
  }
  .card {
    background: var(--color-card-bg-dark);
    backdrop-filter: blur(var(--blur-radius));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    color: #e0e0e0;
  }
  a { color: var(--color-primary); }
}

@media (prefers-color-scheme: light) {
  body {
    background: var(--color-bg-light);
    color: #212529;
    font-family: var(--font-primary);
  }
  .card {
    background: var(--color-card-bg);
    backdrop-filter: blur(var(--blur-radius));
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius);
    color: #212529;
  }
  a { color: var(--color-primary-dark); }
}

/* Global animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeInUp 0.6s ease both; }

/* Stat cards */
.stat-card { transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

/* Health ring placeholder */
.health-ring { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--color-success) 0% 0%, var(--color-card-bg) 0% 100%); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.health-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-bg-dark); }

/* Badge styles */
.badge-healthy { background: var(--color-success); color: #fff; }
.badge-warning { background: var(--color-warning); color: #fff; }
.badge-critical { background: var(--color-danger); color: #fff; }

#themeToggle { cursor: pointer; }