/* 1001 Bars - Override des palettes pour le theme-full.css partagé.
   Palette tout-en-chaud : ambre (primaire) + orange + corail rouge + jaune,
   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 AMBRE/JAUNE). === */
  --violet-50:  #FFFBEB;
  --violet-100: #FEF3C7;
  --violet-200: #FDE68A;
  --violet-300: #FCD34D;
  --violet-400: #FBBF24;
  --violet-500: #F59E0B;
  --violet-600: #D97706;
  --violet-700: #B45309;
  --violet-800: #92400E;
  --violet-900: #78350F;
  --violet-950: #451A03;

  /* === Accent 1 (était pink → devient ORANGE, sœur chaude de l'ambre). === */
  --pink-300: #FDBA74;
  --pink-400: #FB923C;
  --pink-500: #F97316;
  --pink-600: #EA580C;

  /* === Accent 2 (était peach → devient CORAIL/ROUGE chaud). === */
  --peach-300: #FCA5A5;
  --peach-400: #F87171;
  --peach-500: #EF4444;

  /* === Accent 3 (mint → JAUNE pâle / ambre clair, cohérence chromatique). === */
  --mint-300: #FCD34D;
  --mint-400: #FBBF24;
}

:root {
  --brand-50:  #FFFBEB;
  --brand-100: #FEF3C7;
  --brand-500: #F59E0B;
  --brand-600: #D97706;
  --brand-700: #B45309;
  --accent-1: #FB923C;
  --accent-2: #FBBF24;

  /* === Surfaces — mode CLAIR (légère teinte ambrée). === */
  --bg:          #FFFBEB;
  --bg-soft:     #FEF3C7;
  --surface:     #FFFFFF;
  --surface-2:   #FFFBEB;
  --text:        #451A03;
  --text-soft:   #92400E;
  --line:        rgba(180, 83, 9, 0.10);
  --line-strong: rgba(180, 83, 9, 0.18);
}

/* === Surfaces — mode SOMBRE (teinte ambrée d'origine). === */
.dark {
  --bg:          #0D0B07;
  --bg-soft:     #1A160F;
  --surface:     #201B13;
  --surface-2:   #2C261C;
  --text:        #FFFBEB;
  --text-soft:   #FCD34D;
  --line:        rgba(252, 211, 77, 0.10);
  --line-strong: rgba(252, 211, 77, 0.20);
}

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

.dark .search-shell {
  background: rgba(44, 38, 28, 0.65);
  box-shadow:
    0 1px 0 rgba(252, 211, 77, 0.10) inset,
    0 30px 80px -20px rgba(245, 158, 11, 0.30),
    0 12px 30px -10px rgba(251, 146, 60, 0.15);
}

.dark .search-shell:focus-within {
  box-shadow:
    0 1px 0 rgba(252, 211, 77, 0.12) inset,
    0 0 0 6px rgba(251, 191, 36, 0.18),
    0 40px 80px -20px rgba(245, 158, 11, 0.4);
}

.dark .search-suggestions {
  background: rgba(26, 22, 15, 0.92);
  border-color: rgba(252, 211, 77, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 60px -10px rgba(245, 158, 11, 0.4);
}

.dark .search-suggestion:hover,
.dark .search-suggestion.is-highlighted {
  background: linear-gradient(110deg, rgba(245, 158, 11, 0.22), rgba(251, 146, 60, 0.16));
}

@media (max-width: 640px) {
  .dark .search-suggestions {
    box-shadow:
      0 12px 30px -10px rgba(245, 158, 11, 0.28),
      0 0 0 1px rgba(245, 158, 11, 0.06);
  }
  .dark .search-suggestion:active {
    background: linear-gradient(110deg, rgba(245, 158, 11, 0.16), rgba(251, 146, 60, 0.12));
  }
}

.dark .search-mobile-shell:focus-within {
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18);
}