/* Dark Theme */
[data-theme="dark"] {
  /* Override variables for dark theme */
  --bg-primary: #1A2621;
  --bg-secondary: #2F3F37;
  --bg-tertiary: #4D5E55;
  
  --text-primary: #EBF1F0;
  --text-secondary: #DDE3E2;
  --text-tertiary: #CFDCD4;
  --text-inverse: #1A2621;
  
  --border-color: #4D5E55;
  --border-color-light: #2F3F37;
  --border-color-dark: #6B7C73;
  
  --card-bg: #2F3F37;
  --card-border: #4D5E55;
  
  --input-bg: #2F3F37;
  --input-border: #4D5E55;
  --input-focus-border: var(--color-primary);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
  
  /* Adjust primary color for dark mode */
  --color-primary: #CFDCD4;
  --color-primary-light: #DDE3E2;
  --color-primary-dark: #B8C8BE;
}

body[data-theme="dark"] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

body[data-theme="dark"] .card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

body[data-theme="dark"] .input-field__input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

body[data-theme="dark"] .navigation-bar {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

body[data-theme="dark"] .modal__content {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}