/* Theme CSS Variables */

/* Light Theme (Default) */
:root,
[data-theme="light"] {
  /* Background colors */
  --bg-primary: 255 255 255; /* white */
  --bg-secondary: 249 250 251; /* gray-50 */
  --bg-tertiary: 243 244 246; /* gray-100 */
  --bg-hover: 229 231 235; /* gray-200 */

  /* Text colors */
  --text-primary: 17 24 39; /* gray-900 */
  --text-secondary: 75 85 99; /* gray-600 */
  --text-tertiary: 107 114 128; /* gray-500 */
  --text-disabled: 156 163 175; /* gray-400 */

  /* Border colors */
  --border-primary: 229 231 235; /* gray-200 */
  --border-secondary: 209 213 219; /* gray-300 */
  --border-focus: 59 130 246; /* blue-500 */

  /* Success colors */
  --success-bg: 240 253 244; /* green-50 */
  --success-text: 22 163 74; /* green-600 */
  --success-border: 187 247 208; /* green-200 */

  /* Error colors */
  --error-bg: 254 242 242; /* red-50 */
  --error-text: 220 38 38; /* red-600 */
  --error-border: 254 202 202; /* red-200 */

  /* Warning colors */
  --warning-bg: 254 252 232; /* yellow-50 */
  --warning-text: 202 138 4; /* yellow-600 */
  --warning-border: 254 240 138; /* yellow-200 */

  /* Info colors */
  --info-bg: 239 246 255; /* blue-50 */
  --info-text: 37 99 235; /* blue-600 */
  --info-border: 191 219 254; /* blue-200 */

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Dark Theme */
[data-theme="dark"] {
  /* Background colors */
  --bg-primary: 17 24 39; /* gray-900 */
  --bg-secondary: 31 41 55; /* gray-800 */
  --bg-tertiary: 55 65 81; /* gray-700 */
  --bg-hover: 75 85 99; /* gray-600 */

  /* Text colors */
  --text-primary: 243 244 246; /* gray-100 */
  --text-secondary: 209 213 219; /* gray-300 */
  --text-tertiary: 156 163 175; /* gray-400 */
  --text-disabled: 107 114 128; /* gray-500 */

  /* Border colors */
  --border-primary: 55 65 81; /* gray-700 */
  --border-secondary: 75 85 99; /* gray-600 */
  --border-focus: 96 165 250; /* blue-400 */

  /* Success colors */
  --success-bg: 20 83 45; /* green-900 */
  --success-text: 134 239 172; /* green-300 */
  --success-border: 34 197 94; /* green-500 */

  /* Error colors */
  --error-bg: 127 29 29; /* red-900 */
  --error-text: 252 165 165; /* red-300 */
  --error-border: 239 68 68; /* red-500 */

  /* Warning colors */
  --warning-bg: 120 53 15; /* yellow-900 */
  --warning-text: 253 224 71; /* yellow-300 */
  --warning-border: 234 179 8; /* yellow-500 */

  /* Info colors */
  --info-bg: 30 58 138; /* blue-900 */
  --info-text: 147 197 253; /* blue-300 */
  --info-border: 59 130 246; /* blue-500 */

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
}

/* Utility classes using CSS variables */
.bg-theme-primary {
  background-color: rgb(var(--bg-primary));
}

.bg-theme-secondary {
  background-color: rgb(var(--bg-secondary));
}

.bg-theme-tertiary {
  background-color: rgb(var(--bg-tertiary));
}

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

.text-theme-secondary {
  color: rgb(var(--text-secondary));
}

.text-theme-tertiary {
  color: rgb(var(--text-tertiary));
}

.border-theme-primary {
  border-color: rgb(var(--border-primary));
}

.border-theme-secondary {
  border-color: rgb(var(--border-secondary));
}

/* Smooth theme transitions */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}