/* Theme System - CSS Variables for Color Themes */

/* Base Theme (Default) */
:root {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-light: #e9ecef;
  --border-medium: #dee2e6;
  --border-dark: #adb5bd;

  /* Theme Colors */
  --primary-color: #667eea;
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;

  /* Shadow */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Color Theme: Green (Crypto Classic) */
html[data-color-theme="green"],
body[data-color-theme="green"] {
  --primary-color: #28a745;
  --primary-gradient: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  --bg-gradient: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

/* Color Theme: Orange (Bitcoin) */
html[data-color-theme="orange"],
body[data-color-theme="orange"] {
  --primary-color: #f7931a;
  --primary-gradient: linear-gradient(135deg, #f7931a 0%, #ff6b35 100%);
  --bg-gradient: linear-gradient(135deg, #f7931a 0%, #ff6b35 100%);
}

/* Color Theme: Purple (Ethereum) */
html[data-color-theme="purple"],
body[data-color-theme="purple"] {
  --primary-color: #627eea;
  --primary-gradient: linear-gradient(135deg, #627eea 0%, #8b5cf6 100%);
  --bg-gradient: linear-gradient(135deg, #627eea 0%, #8b5cf6 100%);
}

/* Color Theme: Red (Bold) */
html[data-color-theme="red"],
body[data-color-theme="red"] {
  --primary-color: #dc3545;
  --primary-gradient: linear-gradient(135deg, #dc3545 0%, #e91e63 100%);
  --bg-gradient: linear-gradient(135deg, #dc3545 0%, #e91e63 100%);
}

/* Apply theme variables to existing styles */
body {
  background: var(--bg-gradient) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

.container {
  background: transparent;
}

/* Cards and Sections */
.stat-card,
.settings-section,
.admin-section,
.crypto-table-container {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-medium) !important;
}

.crypto-table {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.crypto-table th {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-medium) !important;
}

.crypto-table td {
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
}

.crypto-table tr:hover {
  background: var(--bg-secondary) !important;
}

/* Modal */
.modal-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

.modal-content {
  background: var(--bg-primary) !important;
  box-shadow: var(--shadow-heavy) !important;
}

.modal-header {
  background: var(--primary-gradient) !important;
  color: var(--text-inverse) !important;
}

.modal-body {
  color: var(--text-primary) !important;
}

/* Compact Items */
.compact-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

.compact-label {
  color: var(--text-secondary);
}

/* Buttons */
.btn-primary {
  background: var(--primary-color);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--primary-color);
  filter: brightness(1.1);
}

/* Controls */
.controls {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-medium) !important;
}

/* Form Elements */
input,
select,
textarea {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-medium) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}

/* Headers */
header {
  color: var(--text-inverse);
}

header h1 {
  color: var(--text-inverse);
}

.last-updated {
  color: rgba(255, 255, 255, 0.9);
}

/* Section backgrounds */
.supply-info,
.market-stats,
.ath-atl-info {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.price-changes {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

/* Scrollbar theming */
.modal-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--border-dark);
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}