/* Mon Traiteur - Override des palettes pour le theme-full.css partagé.
   Palette gourmande tout-en-vert : émeraude (primaire) + teal + lime,
   alignée sur le tailwind.config.js de l'app pour rester cohérente
   entre les classes Tailwind hardcodées et les CSS vars du shared theme.

   Mode clair / sombre : la palette reste identique, seules les surfaces
   basculent via la classe `.dark` (cf. shared/theme.js). */

:root {
  /* === Palette principale (était violet → devient VERT EMERAUDE). === */
  --violet-50:  #ECFDF5;
  --violet-100: #D1FAE5;
  --violet-200: #A7F3D0;
  --violet-300: #6EE7B7;
  --violet-400: #34D399;
  --violet-500: #10B981;
  --violet-600: #059669;
  --violet-700: #047857;
  --violet-800: #065F46;
  --violet-900: #064E3B;
  --violet-950: #022C22;

  /* === Accent 1 (était pink → devient TEAL, frais et cohérent avec le vert). === */
  --pink-300: #5EEAD4;
  --pink-400: #2DD4BF;
  --pink-500: #14B8A6;
  --pink-600: #0D9488;

  /* === Accent 2 (était peach → devient LIME, touche chaude végétale). === */
  --peach-300: #BEF264;
  --peach-400: #A3E635;
  --peach-500: #84CC16;

  /* === Accent 3 (mint → reste MINT, ton frais sœur du vert primaire). === */
  --mint-300: #6EE7B7;
  --mint-400: #34D399;
}

:root {
  --brand-50:  #ECFDF5;
  --brand-100: #D1FAE5;
  --brand-500: #10B981;
  --brand-600: #059669;
  --brand-700: #047857;
  --accent-1: #2DD4BF;
  --accent-2: #A3E635;

  /* === Surfaces — mode CLAIR (légère teinte verte). === */
  --bg:          #F4FBF7;
  --bg-soft:     #D1FAE5;
  --surface:     #FFFFFF;
  --surface-2:   #ECFDF5;
  --text:        #022C22;
  --text-soft:   #065F46;
  --line:        rgba(4, 120, 87, 0.10);
  --line-strong: rgba(4, 120, 87, 0.18);
}

/* === Surfaces — mode SOMBRE (teinte verte d'origine). === */
.dark {
  --bg:          #070D0B;
  --bg-soft:     #0F1A16;
  --surface:     #13201C;
  --surface-2:   #1C2C26;
  --text:        #ECFDF5;
  --text-soft:   #6EE7B7;
  --line:        rgba(110, 231, 183, 0.10);
  --line-strong: rgba(110, 231, 183, 0.20);
}

/* === Override search-shell — mode sombre uniquement. === */

.dark .search-shell {
  background: rgba(28, 44, 38, 0.65);
  box-shadow:
    0 1px 0 rgba(110, 231, 183, 0.10) inset,
    0 30px 80px -20px rgba(16, 185, 129, 0.30),
    0 12px 30px -10px rgba(45, 212, 191, 0.15);
}

.dark .search-shell:focus-within {
  box-shadow:
    0 1px 0 rgba(110, 231, 183, 0.12) inset,
    0 0 0 6px rgba(52, 211, 153, 0.18),
    0 40px 80px -20px rgba(16, 185, 129, 0.4);
}

.dark .search-suggestions {
  background: rgba(15, 26, 22, 0.92);
  border-color: rgba(110, 231, 183, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 60px -10px rgba(16, 185, 129, 0.4);
}

.dark .search-suggestion:hover,
.dark .search-suggestion.is-highlighted {
  background: linear-gradient(110deg, rgba(16, 185, 129, 0.22), rgba(45, 212, 191, 0.16));
}

@media (max-width: 640px) {
  .dark .search-suggestions {
    box-shadow:
      0 12px 30px -10px rgba(16, 185, 129, 0.28),
      0 0 0 1px rgba(16, 185, 129, 0.06);
  }
  .dark .search-suggestion:active {
    background: linear-gradient(110deg, rgba(16, 185, 129, 0.16), rgba(45, 212, 191, 0.12));
  }
}

.dark .search-mobile-shell:focus-within {
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}