:root {
  --color-primary: #3EAFFF;
  --color-primary-hover: #2ac0ff;
  --color-primary-active: #1a9eff;
  --color-primary-light: rgba(62, 175, 255, 0.1);
  
  --color-success: #00ff88;
  --color-success-light: rgba(0, 255, 136, 0.1);
  
  --color-danger: #ff4444;
  --color-danger-light: rgba(255, 68, 68, 0.1);
  
  --color-warning: #ffaa00;
  --color-warning-light: rgba(255, 170, 0, 0.1);
  
  --color-info: #3EAFFF;
  --color-info-light: rgba(62, 175, 255, 0.1);
  
  --color-bg-page: #001530;
  --color-bg-card: #001C3F;
  --color-bg-input: #001530;
  --color-bg-hover: #002040;
  --color-bg-active: #002a55;
  
  --color-text: #eee;
  --color-text-secondary: #ccc;
  --color-text-muted: #888;
  --color-text-disabled: #666;
  --color-text-inverse: #001530;
  
  --color-border: #001530;
  --color-border-light: #002040;
  --color-border-focus: #3EAFFF;
  
  --color-table-header: #001530;
  --color-table-stripe: #001C3F;
  --color-table-hover: #002040;
  
  --color-sidebar-bg: #001530;
  --color-sidebar-text: #888;
  --color-sidebar-hover: #001C3F;
  --color-sidebar-active: #001C3F;
  
  --color-header-bg: #001C3F;
  --color-header-border: #001530;
  
  --color-price-up: #00ff88;
  --color-price-down: #ff4444;
  
  --color-pending: #ffaa00;
  --color-confirmed: #00ff88;
  --color-rejected: #ff4444;
  
  /* Additional variables used by components */
  --bg-primary: var(--color-bg-card);
  --bg-secondary: var(--color-bg-hover);
  --border-color: var(--color-border);
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
}

[data-theme="dark"] {
  --color-primary: #3EAFFF;
  --color-primary-hover: #2ac0ff;
  --color-primary-active: #1a9eff;
  --color-primary-light: rgba(62, 175, 255, 0.15);
  
  --color-bg-page: #001530;
  --color-bg-card: #001C3F;
  --color-bg-input: #001530;
  --color-bg-hover: #002040;
  --color-bg-active: #002a55;
  
  --color-text: #eee;
  --color-text-secondary: #aaa;
  --color-text-muted: #888;
  
  --color-border: #001530;
  --color-border-light: #001C3F;
  
  --color-sidebar-bg: #001530;
  --color-sidebar-text: #888;
  --color-sidebar-hover: #001C3F;
  --color-sidebar-active: #001C3F;
  
  --color-header-bg: #001C3F;
  --color-header-border: #001530;
  
  --color-table-header: #001530;
  --color-table-stripe: #001C3F;
  --color-table-hover: #002040;
}

body {
  background-color: var(--color-bg-page);
  color: var(--color-text);
}

.card {
  background-color: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

.card-header {
  border-color: var(--color-border-light);
  color: var(--color-text);
}

.border, .border-t, .border-b {
  border-color: var(--color-border);
}

.text-muted {
  color: var(--color-text-muted);
}

.bg-hover:hover {
  background-color: var(--color-bg-hover);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-secondary:hover {
  background-color: var(--color-bg-active);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
}

.btn-danger:hover {
  background-color: #ff6666;
  border-color: #ff6666;
}

.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.badge-success {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
}

.badge-danger {
  background-color: var(--color-danger);
  color: white;
}

.badge-warning {
  background-color: var(--color-warning);
  color: var(--color-text-inverse);
}

.badge-info {
  background-color: var(--color-info);
  color: var(--color-text-inverse);
}

.btn-icon {
  color: var(--color-primary);
}

.btn-icon:hover {
  color: var(--color-primary-hover);
}

input, select, textarea {
  background-color: var(--color-bg-input);
  color: var(--color-text);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-border-focus);
  outline: none;
}

.table {
  color: var(--color-text);
}

.table th {
  background-color: var(--color-table-header);
  border-color: var(--color-border);
  color: var(--color-primary);
}

.table td {
  border-color: var(--color-border);
  color: var(--color-text);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-table-stripe);
}

.table-hover tbody tr:hover {
  background-color: var(--color-table-hover);
}

.tabs {
  background-color: var(--color-bg-card);
  border-color: var(--color-border);
}

.tab {
  color: var(--color-text-muted);
  background-color: transparent;
  border-color: transparent;
}

.tab:hover {
  color: var(--color-text);
  background-color: var(--color-bg-hover);
}

.tab.active {
  color: var(--color-primary);
  background-color: var(--color-bg-hover);
  border-color: var(--color-primary);
}

.tab-content {
  background-color: var(--color-bg-card);
}

.sidebar {
  background-color: var(--color-sidebar-bg);
}

.sidebar-link {
  color: var(--color-sidebar-text);
}

.sidebar-link:hover {
  background-color: var(--color-sidebar-hover);
  color: var(--color-text);
}

.sidebar-link.active {
  background-color: var(--color-sidebar-active);
  color: var(--color-primary);
}

.header {
  background-color: var(--color-header-bg);
  border-color: var(--color-header-border);
}

.page-title {
  color: var(--color-text);
}

.text-primary {
  color: var(--color-primary);
}

.text-success {
  color: var(--color-success);
}

.text-danger {
  color: var(--color-danger);
}

.text-warning {
  color: var(--color-warning);
}

.text-info {
  color: var(--color-info);
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-hover);
}

.skeleton {
  background: linear-gradient(90deg, var(--color-bg-hover) 25%, var(--color-bg-active) 50%, var(--color-bg-hover) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  color: var(--color-text-muted);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.label {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.label.info {
  background-color: var(--color-primary);
}

.label.success {
  background-color: var(--color-success);
}

.label.warning {
  background-color: var(--color-warning);
}

.label.danger {
  background-color: var(--color-danger);
}