/* CSS Custom Properties - Color & Spacing System */
:root {
  /* Primary colors */
  --color-primary: #007bff;
  --color-primary-dark: #0056b3;

  /* Status colors */
  --color-success: #28a745;
  --color-success-dark: #218838;
  --color-danger: #dc3545;
  --color-danger-dark: #c82333;
  --color-warning: #ffc107;
  --color-warning-dark: #e0a800;
  --color-info: #3498db;

  /* Gray scale */
  --color-white: #ffffff;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Semantic colors */
  --color-text: #333333;
  --color-text-muted: var(--color-gray-600);
  --color-border: #dddddd;
  --color-background: var(--color-white);

  /* Error/validation colors */
  --color-error-bg: #f8d7da;
  --color-error-border: #f5c6cb;
  --color-error-text: #ba1a1a;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  /* Border radius scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* Layout widths */
  --content-width: 890px;

  /* Dark mode colors */
  --dark-bg: #1a1a1a;
  --dark-bg-secondary: #2d2d2d;
  --dark-bg-elevated: #3a3a3a;
  --dark-text: #e0e0e0;
  --dark-text-secondary: #b0b0b0;
  --dark-border: #404040;
  --dark-input-bg: #2d2d2d;
  --dark-card-bg: #252525;

  /* Dark mode status colors (slightly muted) */
  --dark-success: #4caf50;
  --dark-danger: #ef5350;
  --dark-warning: #ffa726;
  --dark-info: #42a5f5;
}