:root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
  --input-bg: #ffffff;
  --input-border: #cccccc;
  --border-color: #cccccc;
  --surface-color: #f5f5f5;
  --text-muted: #6c757d;
  --bg-secondary: #e9ecef;
  --button-bg: #007bff;
  --button-hover: #0069d9;
  --button-text: #ffffff;
  
  /* GSD Calculator Specific Variables 
  --background-color: #f8f9fa;
  --container-bg: #ffffff;
  --readonly-bg: #e9ecef;
  --button-bg: #007bff;
  --button-hover: #0069d9;
  --button-text: #ffffff;
  --secondary-button-bg: #6c757d;
  --secondary-button-hover: #5a6268; */
}

:root[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --text-color: #ffffff;
  --input-bg: #2d2d2d;
  --input-border: #404040;
  --border-color: #404040;
  --surface-color: #2a2a2a;
  --text-muted: #adb5bd;
  --bg-secondary: #333333;
  --button-bg: #0069d9;
  --button-hover: #004fa3;
  --button-text: #ffffff;
  
  /* GSD Calculator Specific Variables 
  --background-color: #2a2a2a;
  --container-bg: #333333;
  --readonly-bg: #444444;
  --button-bg: #0069d9;
  --button-hover: #004fa3;
  --button-text: #ffffff;
  --secondary-button-bg: #5a6268;
  --secondary-button-hover: #4e555b; */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}