/* 
 * BCNMON Main Design System
 * Centralized variables and base styles for the entire application.
 * Changing a value here updates both the Dashboard and Config pages.
 */

:root {
  /* Brand Colors */
  --color-primary: #667eea;
  --color-primary-dark: #5a6fd8;
  --color-accent: #764ba2;
  --color-white: #ffffff;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #e9ecef;
  --color-gray-200: #dee2e6;
  --color-gray-300: #ced4da;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-dark: #2c3e50;

  /* Status Colors */
  --status-good-bg: #d4edda;
  --status-good-text: #155724;
  --status-warning-bg: #fff3cd;
  --status-warning-text: #856404;
  --status-critical-bg: #f8d7da;
  --status-critical-text: #721c24;
  --status-info-bg: #d1ecf1;
  --status-info-text: #0c5460;

  /* Spacing Tokens */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Typography */
  --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Courier New', monospace;

  /* UI Elements */
  --card-bg: rgba(255, 255, 255, 0.95);
  --radius-sm: 8px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-full: 50%;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
  
  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-success: linear-gradient(45deg, #28a745, #20c997);
  --gradient-danger: linear-gradient(45deg, #dc3545, #e74c3c);
  --gradient-warning: linear-gradient(45deg, #ffc107, #fd7e14);
}

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

body {
  font-family: var(--font-base);
  background: var(--gradient-brand);
  min-height: 100vh;
  color: var(--color-gray-800);
}

/* Common Components */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}