/* Light Theme (default) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #4f46e5;
  --primary-hover: #6366f1;
  --secondary-color: #f3f4f6;
  --border-color: #e5e7eb;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --strength-bg: #e5e7eb;
  --strength-1: #ef4444;
  --strength-2: #f97316;
  --strength-3: #eab308;
  --strength-4: #22c55e;
  --strength-5: #10b981;
  --hover-bg: rgba(79, 70, 229, 0.1);
  --active-bg: rgba(79, 70, 229, 0.15);
}

/* Dark Theme */
body.dark-theme {
  --bg-color: #0f172a;
  --text-color: #e2e8f0;
  --primary-color: #818cf8;
  --primary-hover: #a5b4fc;
  --secondary-color: #1e293b;
  --border-color: #334155;
  --card-bg: #1e293b;
  --header-bg: #1e293b;
  --sidebar-bg: #1e293b;
  --input-bg: #0f172a;
  --input-border: #334155;
  --strength-bg: #334155;
  --hover-bg: rgba(129, 140, 248, 0.15);
  --active-bg: rgba(129, 140, 248, 0.25);
}

/* Apply theme variables */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.header {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
}

.logo a {
  color: var(--text-color);
}

.sidebar {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
}

.tool-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

.strength-bar.very-weak {
  background-color: var(--strength-1);
}

.strength-bar.weak {
  background-color: var(--strength-2);
}

.strength-bar.medium {
  background-color: var(--strength-3);
}

.strength-bar.strong {
  background-color: var(--strength-4);
}

.strength-bar.very-strong {
  background-color: var(--strength-5);
}

/* Theme toggle */
.theme-toggle .light-icon {
  display: none;
}

.theme-toggle .dark-icon {
  display: block;
}

body.dark-theme .theme-toggle .light-icon {
  display: block;
}

body.dark-theme .theme-toggle .dark-icon {
  display: none;
}