/**
 * Theme System - CSS Custom Properties
 * Supports dark and light themes with smooth transitions
 */

:root {
  /* Default to dark theme */
  --transition-speed: 0.3s;
}

/* Dark Theme */
:root[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-hover: #404040;

  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-tertiary: #808080;

  --accent: #C8956E;
  --accent-hover: #D4A574;

  --online-status: #4CAF50;
  --offline-status: #757575;

  --border-color: #404040;
  --border-light: #505050;

  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-heavy: rgba(0, 0, 0, 0.5);

  --success: #4CAF50;
  --error: #f44336;
  --warning: #ff9800;
  --info: #2196F3;
}

/* Light Theme */
:root[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e0e0e0;
  --bg-hover: #d0d0d0;

  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;

  --accent: #C8956E;
  --accent-hover: #B8956B;

  --online-status: #2e7d32;
  --offline-status: #9e9e9e;

  --border-color: #d0d0d0;
  --border-light: #e0e0e0;

  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-heavy: rgba(0, 0, 0, 0.2);

  --success: #2e7d32;
  --error: #c62828;
  --warning: #f57c00;
  --info: #1976D2;
}

/* Smooth theme transitions */
* {
  transition: background-color var(--transition-speed) ease,
              color var(--transition-speed) ease,
              border-color var(--transition-speed) ease;
}

/* Disable transitions for specific elements */
.no-transition,
.no-transition * {
  transition: none !important;
}