/* =============================================================================
   Itinerara — TEMELE, într-un singur loc
   -----------------------------------------------------------------------------
   Până pe 2026-08-08 blocul ăsta trăia copiat în ȘAPTE fișiere: index.html,
   result.html, share.php, itinerar.php, itinerar-index.php, itineraries.html și
   parteneri.html. Copiile s-au despărțit exact cum era de așteptat — accentul din
   share.php rămăsese pironit pe teracotă în toate cele trei teme, fiindcă acolo
   fusese turnat în cifre în loc să stea desfăcut în componente HSL.

   REGULA: culorile care definesc o temă se scriu AICI și numai aici.
   Fiecare pagină își păstrează în <style>-ul ei doar tokenii care sunt cu adevărat
   ai ei (result.html: --header-bg și fereastra lui Marco) și filtrele de hartă,
   care diferă după bibliotecă (Leaflet pe index.html, MapLibre în rest).

   ORDINEA CONTEAZĂ: <link rel="stylesheet" href="theme.css"> se pune ÎNAINTE de
   <style>-ul paginii, ca pagina să poată suprascrie, nu invers.

   Scriptul anti-clipire din <head> NU se mută aici și nici în theme.js: el trebuie
   să pună data-theme înainte de prima pictare, deci rămâne inline, în fiecare
   pagină. Un fișier extern ar sosi prea târziu și tema ar clipi.
   ============================================================================= */

/* ===== TEMA IMPLICITĂ: „Cald" (teracotă pe verde-măsliniu) =====
   Nu are atribut: se obține scoțând data-theme, nu punându-l.

   Accentul ȘI primarul stau DESFĂCUTE în componente HSL, nu ca hsl() finit.
   Motivul e concret: componentele scriu transparențe din TON —
   hsla(var(--accent-h), 45%, 50%, .6) — iar acelea nu se pot deriva dintr-o
   culoare gata făcută. Când --accent-h lipsește, declarația devine invalidă și
   browserul o aruncă ÎNTREAGĂ, tăcut. Așa s-au născut cele trei defecte din
   share.php. Cele șase numere de mai jos sunt singurul adevăr al paletei. */
:root {
  --accent-h:  15;  --accent-s:  52%; --accent-l: 54%;
  --primary-h: 110; --primary-s: 22%; --primary-l: 20%;

  --bg:        hsl(48, 20%, 98%);
  --fg:        hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary:   hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --accent:    hsl(var(--accent-h),  var(--accent-s),  var(--accent-l));
  --secondary: hsl(50, 15%, 88%);
  --muted:     hsl(50, 20%, 93%);
  --muted-fg:  hsl(110, 10%, 40%);
  --border:    hsl(50, 15%, 86%);
  --card:      hsl(0, 0%, 100%);
  /* Antetul lipicios, semitransparent. Identic în result.html, itineraries.html
     și parteneri.html — deci token comun, nu propriu vreuneia. */
  --header-bg: rgba(255, 255, 255, .95);

  --serif:     'Playfair Display', serif;
  --sans:      'Manrope', sans-serif;
}

/* ===== TEMA: „Editorial sobru + teal" (corporate) =====
   Un singur font: --serif devine Manrope. E o decizie, nu o scăpare. */
html[data-theme="corporate"] {
  --accent-h:  182; --accent-s:  55%; --accent-l: 32%;
  --primary-h: 215; --primary-s: 26%; --primary-l: 24%;

  --bg:        hsl(210, 20%, 98%);
  --secondary: hsl(210, 20%, 92%);
  --muted:     hsl(210, 20%, 95%);
  --muted-fg:  hsl(215, 14%, 42%);
  --border:    hsl(214, 20%, 89%);
  --serif:     'Manrope', sans-serif;
}

/* ===== TEMA: Dark (teal pe fundal închis) ===== */
html[data-theme="dark"] {
  --accent-h:  180; --accent-s:  62%; --accent-l: 46%;
  --primary-h: 180; --primary-s: 48%; --primary-l: 44%;

  --bg:        hsl(215, 28%, 11%);
  --fg:        hsl(210, 22%, 92%);
  --secondary: hsl(215, 20%, 24%);
  --muted:     hsl(215, 22%, 18%);
  --muted-fg:  hsl(215, 14%, 64%);
  --border:    hsl(215, 18%, 26%);
  --card:      hsl(215, 26%, 15%);
  --header-bg: rgba(21, 29, 43, .92);
  --serif:     'Manrope', sans-serif;

  /* Spune browserului că pagina e închisă: bara de derulare, calendarele native
     și listele derulante se desenează în variantă întunecată. Până acum stătea
     doar pe :root în itinerar.php / share.php / itinerar-index.php, iar pe
     index.html și result.html — paginile PLINE de formulare — era pus pe câte un
     singur selector îngust, deci restul controalelor rămâneau deschise. */
  color-scheme: dark;
}

/* =============================================================================
   COMUTATORUL DE TEMĂ — înfățișarea
   Marcajul rămâne în fiecare pagină (etichetele sunt traduse în share.php și
   itinerar.php), dar CSS-ul și comportamentul (theme.js) sunt comune.
   ============================================================================= */
#theme-switch {
  position: fixed; left: 14px; bottom: 14px; z-index: 99999;
  display: flex; gap: 6px; align-items: center;
  background: rgba(255,255,255,.95); border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px; padding: 5px 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  font-family: 'Manrope', sans-serif; backdrop-filter: blur(4px);
  transition: gap .25s ease;
}
#theme-switch.collapsed { gap: 0; }

#theme-toggle-btn {
  border: none; cursor: pointer; border-radius: 999px; padding: 6px 14px;
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700;
  color: #fff; background: #111; letter-spacing: .04em; white-space: nowrap;
}

#theme-switch .theme-opts {
  display: flex; gap: 6px; align-items: center; overflow: hidden;
  transition: max-width .28s ease, opacity .2s ease;
}
#theme-switch.collapsed .theme-opts { max-width: 0; opacity: 0; }
#theme-switch:not(.collapsed) .theme-opts { max-width: 320px; opacity: 1; }

#theme-switch .theme-opts button {
  border: none; cursor: pointer; border-radius: 999px; padding: 6px 12px;
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600;
  color: #333; background: #ececec; transition: all .15s; white-space: nowrap;
}
#theme-switch .theme-opts button.on { background: #111; color: #fff; }

/* Regula asta exista doar în share.php și itinerar.php. Comutatorul n-are ce
   căuta în niciun PDF, deci acum se ascunde la tipărire pe toate paginile. */
@media print { #theme-switch { display: none !important; } }

/* Cine cere mai puțină mișcare nu primește tranziția de deschidere. */
@media (prefers-reduced-motion: reduce) {
  #theme-switch,
  #theme-switch .theme-opts { transition: none; }
}
