/**
 * Spruce Theme System - Light/Dark Toggle
 * Brandbook: "Le clair" #fbfbfb / "Le foncé" #0a0a0a
 */

/* ==========================================
   LIGHT THEME OVERRIDES
   ========================================== */

[data-theme="light"] {
  /* Primary / Accent */
  --color-primary: #1a9d52;
  --color-secondary: #e8f5ed;
  --color-tertiary: #15803d;

  /* Backgrounds */
  --color-bg-dark: #f5f6f5;
  --color-bg-light: #ffffff;
  --color-bg-main: #f5f6f5;
  --color-bg-sidebar: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f0faf4;
  --color-bg-input: #f8faf9;
  --color-border: #d4d4d4;
  --color-border-subtle: #e5e5e5;

  /* Text */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #555555;
  --color-text-tertiary: #777777;
  --color-text-muted: #999999;

  /* Status colors (slightly deeper for readability on light) */
  --color-blue: #2563eb;
  --color-orange: #d97706;
  --color-yellow: #b45309;
  --color-green: #16a34a;
  --color-red: #dc2626;
  --color-purple: #7c3aed;
  --color-cyan: #0891b2;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   LIGHT THEME - COMPONENT OVERRIDES
   ========================================== */

/* Sidebar */
[data-theme="light"] .sidebar {
  border-right-color: #e5e5e5;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .sidebar-nav-item:hover {
  background: #eef5f1;
}

[data-theme="light"] .sidebar-nav-item.active {
  background: #e8f5ed;
  color: #1a9d52;
}

/* Cards */
[data-theme="light"] .card {
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Buttons */
[data-theme="light"] .btn-primary {
  background: #1a9d52;
  color: #ffffff;
}

[data-theme="light"] .btn-primary:hover {
  background: #158c47;
}

[data-theme="light"] .btn-secondary {
  background: #f5f6f5;
  border-color: #d4d4d4;
  color: #1a1a1a;
}

[data-theme="light"] .btn-secondary:hover {
  background: #eef5f1;
  border-color: #1a9d52;
}

[data-theme="light"] .btn-ghost {
  color: #555555;
}

[data-theme="light"] .btn-ghost:hover {
  background: #f0f0f0;
}

/* Inputs */
[data-theme="light"] .input,
[data-theme="light"] select.input {
  background: #f8faf9;
  border-color: #d4d4d4;
  color: #1a1a1a;
}

[data-theme="light"] .input:focus {
  border-color: #1a9d52;
  box-shadow: 0 0 0 3px rgba(26, 157, 82, 0.1);
}

/* Tables */
[data-theme="light"] .table th {
  background: #f8faf9;
  border-color: #e5e5e5;
  color: #555555;
}

[data-theme="light"] .table td {
  border-color: #f0f0f0;
}

[data-theme="light"] .table tbody tr:hover {
  background: #f8fdf9;
}

/* Badges */
[data-theme="light"] .badge-neutral {
  background: #f0f0f0;
  color: #555555;
}

/* Modal */
[data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .confirm-modal-content {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Toast */
[data-theme="light"] .toast-notification {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f5f6f5;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cccccc;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa;
}

/* Header */
[data-theme="light"] .main-header {
  background: #ffffff;
  border-bottom-color: #e5e5e5;
}

/* Campaign dropdown */
[data-theme="light"] .campaign-dropdown {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .campaign-dropdown-item:hover {
  background: #eef5f1;
}

/* Kanban */
[data-theme="light"] .kanban-col {
  background: #f8faf9;
  border: 1px solid #e5e5e5;
}

[data-theme="light"] .kanban-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .kanban-card:hover {
  border-color: #1a9d52;
  box-shadow: 0 2px 8px rgba(26, 157, 82, 0.08);
}

/* Prospect modal */
[data-theme="light"] .prospect-modal-content {
  background: #ffffff;
  border: 1px solid #e5e5e5;
}

/* Status BG colors (pastel for light theme) */
[data-theme="light"] .status-bg-success {
  background: #dcfce7;
  color: #16a34a;
}

[data-theme="light"] .status-bg-warning {
  background: #fef3c7;
  color: #d97706;
}

[data-theme="light"] .status-bg-error {
  background: #fee2e2;
  color: #dc2626;
}

[data-theme="light"] .status-bg-info {
  background: #dbeafe;
  color: #2563eb;
}

/* Background logo watermark — light theme */
[data-theme="light"] .main-content::before {
  opacity: 0.08;
  filter: grayscale(1) brightness(0.4);
}

/* ==========================================
   THEME TOGGLE BUTTON
   ========================================== */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 12px 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.8125rem;
  font-family: var(--font-body);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================
   SMOOTH TRANSITION
   ========================================== */

html[data-theme] body,
html[data-theme] .sidebar,
html[data-theme] .main-content,
html[data-theme] .main-header,
html[data-theme] .card,
html[data-theme] .input,
html[data-theme] .btn,
html[data-theme] .table th,
html[data-theme] .table td,
html[data-theme] .kanban-col,
html[data-theme] .kanban-card {
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}