html[data-theme="dark"] {
  /* Colors */
  --color-primary: var(--color-primary-dark-theme);
  --color-primary-dark: var(--color-primary-dark-dark-theme);
  --color-primary-light: var(--color-primary-light-dark-theme);
  --color-background: var(--color-background-dark-theme);
  --color-surface: var(--color-surface-dark-theme);
  --color-text: var(--color-text-dark-theme);
  --color-text-secondary: var(--color-text-secondary-dark-theme);
  --color-border: var(--color-border-dark-theme);

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);

  /* Button Hover States */
  --button-hover-bg: var(--color-surface-dark-theme);
  --button-hover-border: var(--color-primary-dark-theme);

  /* Form Elements */
  --input-background: var(--color-surface-dark-theme);
  --input-border: var(--color-border-dark-theme);
  --input-text: var(--color-text-dark-theme);
  --input-placeholder: var(--color-text-secondary-dark-theme);

  /* Modal/Dialog */
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --modal-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* System preference based dark mode */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --color-primary: var(--color-primary-dark-theme);
    --color-primary-dark: var(--color-primary-dark-dark-theme);
    --color-primary-light: var(--color-primary-light-dark-theme);
    --color-background: var(--color-background-dark-theme);
    --color-surface: var(--color-surface-dark-theme);
    --color-text: var(--color-text-dark-theme);
    --color-text-secondary: var(--color-text-secondary-dark-theme);
    --color-border: var(--color-border-dark-theme);

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
  }
}