.theme-system {
  --theme-primary: #3498db;
  --theme-secondary: #ecf0f1;
  --theme-text: #2c3e50;
  --theme-spacing: 16px;
  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.theme-dark {
  --theme-primary: #e74c3c;
  --theme-secondary: #34495e;
  --theme-text: #ecf0f1;
}

.theme-card {
  background: var(--theme-secondary);
  color: var(--theme-text);
  padding: var(--theme-spacing);
  margin: var(--theme-spacing) 0;
  border-radius: calc(var(--theme-spacing) / 2);
  border-left: 4px solid var(--theme-primary);
  transition: all 0.3s ease;
}

.theme-toggle {
  background: var(--theme-primary);
  color: var(--theme-secondary);
  border: none;
  padding: calc(var(--theme-spacing) / 2) var(--theme-spacing);
  border-radius: calc(var(--theme-spacing) / 4);
  cursor: pointer;
  margin: var(--theme-spacing) 0;
  font-weight: bold;
}

.theme-toggle:hover {
  opacity: 0.8;
}