:root {
  --ff-bg-primary: #faf9f7;
  --ff-bg-secondary: #ffffff;
  --ff-bg-tertiary: #f8f9fa;
  --ff-text-primary: #2e2e2e;
  --ff-text-secondary: #555555;
  --ff-text-muted: #666666;
  --ff-text-light: #64748b;
  --ff-accent: #8e2b0d;
  --ff-accent-hover: #a63610;
  --ff-button-bg: #c0392b;
  --ff-button-hover: #e74c3c;
  --ff-border: #e0e0e0;
  --ff-border-light: #e8e6e3;
  --ff-shadow: rgba(0, 0, 0, 0.08);
  --ff-shadow-hover: rgba(0, 0, 0, 0.12);
  --ff-header-bg: #ffffff;
  --ff-card-bg: #ffffff;
  --ff-input-bg: #ffffff;
  --ff-input-border: #d1d5db;
  --ff-heading-color: #14532d;
  --ff-secondary-color: #6b8e7f;
  --ff-secondary-light: #d0e8e0;
}

[data-theme="dark"] {
  --ff-bg-primary: #1a1a1a;
  --ff-bg-secondary: #242424;
  --ff-bg-tertiary: #2a2a2a;
  --ff-text-primary: #e8e8e8;
  --ff-text-secondary: #c0c0c0;
  --ff-text-muted: #a0a0a0;
  --ff-text-light: #8a8a8a;
  --ff-accent: #d4724a;
  --ff-accent-hover: #e8845c;
  --ff-button-bg: #c0392b;
  --ff-button-hover: #e74c3c;
  --ff-border: #3a3a3a;
  --ff-border-light: #333333;
  --ff-shadow: rgba(0, 0, 0, 0.3);
  --ff-shadow-hover: rgba(0, 0, 0, 0.4);
  --ff-header-bg: #242424;
  --ff-card-bg: #2a2a2a;
  --ff-input-bg: #333333;
  --ff-input-border: #4a4a4a;
  --ff-heading-color: #4ade80;
  --ff-secondary-color: #5ecd6f;
  --ff-secondary-light: #3a4d42;
}

.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ff-text-light);
  transition: color 0.2s ease;
  border-radius: 6px;
}

.theme-toggle-btn:hover {
  color: var(--ff-accent);
  background-color: var(--ff-bg-tertiary);
}

.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
}

.sun-icon {
  display: none;
}

.moon-icon {
  display: block;
}

[data-theme="dark"] .sun-icon {
  display: block;
}

[data-theme="dark"] .moon-icon {
  display: none;
}