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

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

[data-theme="light"] {
  /* Primary / Accent
     Contrastes mesurés sur fond blanc (norme WCAG AA : 4.5:1 pour du texte).
     L'ancien #1a9d52 ne donnait que 3.51:1 — insuffisant en texte ET en fond de bouton avec du
     blanc dessus. #158545 monte à 4.70:1 dans les deux cas, en restant le même vert. */
  --color-primary: #158545;
  /* Le primaire clair est un vert moyen-sombre → texte sur-primaire en BLANC (lisible). */
  --color-on-primary: #ffffff;
  --color-secondary: #e8f5ed;
  --color-tertiary: #15803d;
  /* Survol des boutons pleins : la valeur qui s'appliquait déjà en thème clair, désormais portée par
     le jeton commun au lieu d'une règle en dur. 6,18:1 sur texte blanc, écart de 25 unités RGB
     depuis le repos — bien perceptible. */
  --color-primary-hover: #117038;

  /* 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: #f3f3f3;
  --color-bg-input: #f7f7f7;
  /* Bordures assombries d'un cran : à #d4d4d4/#e5e5e5 les cartes et champs se fondaient dans le
     fond blanc. (Une bordure décorative n'atteint pas le 3:1 des composants d'interface sans
     devenir lourde — on vise ici la lisibilité, pas la grille de tableau.) */
  --color-border: #c4c4c4;
  --color-border-subtle: #dcdcdc;

  /* Text — hiérarchie conservée, mais chaque niveau passe désormais le seuil AA sur blanc :
     15.7:1 / 6.7:1 / 5.3:1 / 4.6:1 — mesurés sur le fond clair le PLUS DÉFAVORABLE (#f3f3f3, carte
     survolée) et non sur du blanc pur : l'app affiche surtout du texte sur des surfaces légèrement
     teintées (page #f5f6f5, champs #f7f7f7). Calibré sur du blanc, l'estompé retombait à 4.09:1 sur
     ces fonds-là. Avant, le tertiaire (4.48) et l'estompé (2.85) étaient sous le seuil partout. */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #555555;
  --color-text-tertiary: #646464;
  --color-text-muted: #6e6e6e;

  /* Status colors — assombries pour passer AA sur blanc (le vert était à 3.30, l'orange à 3.19).
     Orange et jaune restent deux teintes distinctes. */
  --color-blue: #2563eb;
  --color-orange: #c05621;
  --color-yellow: #b45309;
  --color-green: #15803d;
  --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 {
  /* Vert sur vert pâle : #1a9d52 ne donnait que 3.13:1. Teinte plus profonde → 5.50:1. */
  background: #e8f5ed;
  color: #127038;
}

/* 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 {
  /* Codé en dur, ce fond court-circuitait --color-primary : le texte blanc n'était qu'à 3.51:1.
     On repasse par la variable (4.70:1) et le survol s'assombrit au lieu de s'éclaircir. */
  background: var(--color-primary);
  color: #ffffff;
}

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

[data-theme="light"] .btn-secondary:hover {
  background: #eef5f1;
  border-color: var(--color-primary);
}

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

[data-theme="light"] .btn-outline:hover {
  background: #eef5f1;
  border-color: var(--color-primary);
  color: #127038;   /* 5.58:1 sur le fond de survol (contre 3.17:1) */
}

[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: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(21, 133, 69, 0.16);
}

/* 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: var(--color-primary);
  box-shadow: 0 2px 8px rgba(21, 133, 69, 0.10);
}

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

/* Status BG colors (pastel for light theme) */
/* Badges de statut : le texte était plus clair que son propre fond pastel (2.86 à 4.24:1).
   Teintes assombries — mêmes couleurs, simplement lisibles (4.51 à 5.49:1). */
[data-theme="light"] .status-bg-success {
  background: #dcfce7;
  color: #15803d;
}

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

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

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

/* 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;
}