:root {
  /* Core */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-subtle: #eff6ff;
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-success-dark: #059669;
  --color-check: #059669;
  --color-check-hover: #047857;

  /* Surfaces & text */
  --color-bg: #f1f5f9;
  --color-surface: #ffffff;
  --color-border: #d8dee8;
  --color-border-light: #f1f5f9;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-gray-muted: #6b7280;
  --color-hover-light: #eef2ff;

  /* Card accents */
  --color-accent-blue: #3b82f6;
  --color-accent-fuchsia: #c026d3;
  --color-accent-teal: #14b8a6;
  --color-accent-amber: #f59e0b;
  --color-accent-green: #10b981;
  --color-accent-indigo: #6366f1;
  --color-accent-sky: #0ea5e9;

  /* Section headers */
  --color-header-bg: #f8fafc;

  /* Semantic color pairs (bg / text) */
  --color-green-bg: #dcfce7;
  --color-green-text: #166534;
  --color-red-bg: #fee2e2;
  --color-red-text: #991b1b;
  --color-blue-bg: #dbeafe;
  --color-blue-text: #1e40af;
  --color-amber-bg: #fef3c7;
  --color-amber-text: #92400e;
  --color-amber-bg-light: #fffbeb;
  --color-amber-border: #fbbf24;
  --color-purple-bg: #f3e8ff;
  --color-purple-text: #7c3aed;
  --color-indigo-bg: #e0e7ff;
  --color-indigo-text: #3730a3;
  --color-teal-bg: #d1fae5;
  --color-teal-text: #065f46;
  --color-sky-bg: #e0f2fe;
  --color-sky-text: #075985;
  --color-success-hint-bg: #f0fdf4;

  /* Status dots */
  --color-online-dot: #10b981;
  --color-offline-dot: #ef4444;

  /* Layout */
  --radius: 6px;
  --radius-lg: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
  --focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.2);

  /* Nav bar (dark theme) */
  --nav-bg: #1e293b;
  --nav-text: #94a3b8;
  --nav-hover-bg: rgba(255, 255, 255, 0.1);
  --nav-hover-bg-active: rgba(255, 255, 255, 0.15);
  --nav-subtle-bg: rgba(255, 255, 255, 0.08);
  --nav-divider: #475569;
  --nav-text-dark: #334155;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}