:root {
  --bg-color: #111111;
  --bg-secondary: #181818;
  --card-bg: #1F1F1F;
  --border-color: #2B2B2B;
  --primary-color: #F97316;
  --hover-color: #EA580C;
  --text-color: #FFFFFF;
  --text-secondary: #B3B3B3;
  --radius: 10px;
}

body.light-theme {
  --bg-color: #F9FAFB;
  --bg-secondary: #F3F4F6;
  --card-bg: #FFFFFF;
  --border-color: #E5E7EB;
  --primary-color: #F97316;
  --hover-color: #EA580C;
  --text-color: #111827;
  --text-secondary: #4B5563;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bg-app { background-color: var(--bg-color); }
.bg-sec { background-color: var(--bg-secondary); }
.bg-card { background-color: var(--card-bg); }
.border-app { border-color: var(--border-color); }
.text-app { color: var(--text-color); }
.text-sec { color: var(--text-secondary); }
.text-primary-app { color: var(--primary-color); }
.bg-primary-app { background-color: var(--primary-color); }
.hover-bg-primary-app:hover { background-color: var(--hover-color); }

/* Custom light styling overrides */
.btn-primary {
  background-color: var(--primary-color);
  color: #FFFFFF;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--hover-color);
}
.border-thin {
  border: 1px solid var(--border-color);
}
.shadow-soft {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}