:root {
  /* Light theme values */
  --bg-primary-light: #ffffff;
  --bg-secondary-light: #f8f9fa;
  --text-primary-light: #1a1a1a;
  --text-secondary-light: #424242;
  --accent-light: #3498db;
  --card-bg-light: #ffffff;
  --card-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
  --gradient-light: linear-gradient(
    135deg,
    var(--text-primary-light) 0%,
    var(--accent-light) 100%
  );

  /* Dark theme values */
  --bg-primary-dark: #1a1a1a;
  --bg-secondary-dark: #2d2d2d;
  --text-primary-dark: #fffffff8;
  --text-secondary-dark: #ffffffe8;
  --accent-dark: #64b5f6;
  --card-bg-dark: #2d2d2d;
  --card-shadow-dark: 0 4px 6px rgba(0, 0, 0, 0.3);
  --gradient-dark: linear-gradient(
    135deg,
    var(--text-primary-dark) 0%,
    var(--accent-dark) 100%
  );

  /* Universal values */
  --border-color: #89898917;
}

body.light-theme {
  --bg-primary: var(--bg-primary-light);
  --bg-secondary: var(--bg-secondary-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --accent: var(--accent-light);
  --card-bg: var(--card-bg-light);
  --card-shadow: var(--card-shadow-light);
  --gradient: var(--gradient-light);
}

body.dark-theme {
  --bg-primary: var(--bg-primary-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --accent: var(--accent-dark);
  --card-bg: var(--card-bg-dark);
  --card-shadow: var(--card-shadow-dark);
  --gradient: var(--gradient-dark);
}

body.light-theme {
  background-color: var(--bg-primary-light);
  color: var(--text-primary-light);
}

body.dark-theme {
  background-color: var(--bg-primary-dark);
  color: var(--text-primary-dark);
  --gradient: var(--gradient-dark);
}

.light-theme .txt-pri {
  color: var(--text-primary-light);
}

.light-theme .txt-sec {
  color: var(--text-secondary-light);
}

.light-theme .bg-pri {
  background-color: var(--bg-primary-light);
}

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

.light-theme .txt-acc {
  color: var(--accent-light);
}

.dark-theme .txt-pri {
  color: var(--text-primary-dark);
}

.dark-theme .txt-sec {
  color: var(--text-secondary-dark);
}

.dark-theme .bg-pri {
  background-color: var(--bg-primary-dark);
}

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

.dark-theme .txt-acc {
  color: var(--accent-dark);
}

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

.dark-theme .txt-acc {
  color: var(--accent-dark);
}

.warning {
  color: #bc7700 !important;
}

.error {
  color: #c30000 !important;
}

.success{
  color: #009200 !important;
}