/* ============================================================
   TEVEL — Theme System (light / dark)
   Central color variables. Light mode = the existing design,
   left untouched. Dark mode = a full override layer driven by
   the variables below. To retune the dark theme, edit ONLY the
   variables in the :root[data-theme="dark"] block.
   ============================================================ */

:root[data-theme="dark"]{
  /* — surfaces / backgrounds — */
  --c-bg:            #06080D;   /* page background (rich black) */
  --c-surface:       #0E141F;   /* cards (was white) */
  --c-surface-2:     #0A0F18;   /* muted panels / hover */
  --c-surface-frost: rgba(12,17,26,.85); /* frosted sticky bars */
  --c-border:        #202A3A;   /* borders */
  --c-border-soft:   #19212F;

  /* — dark section backgrounds (navy-*) get deeper — */
  --c-navy-900:      #04060C;
  --c-navy-800:      #0A1120;
  --c-navy-700:      #0F1929;
  --c-navy-600:      #17233C;

  /* — text — */
  --c-text:          #EEF2FA;   /* primary / headings (was navy-900) */
  --c-text-2:        #C4D0E6;   /* secondary (was navy-700) */
  --c-ink-700:       #D2DBEC;
  --c-ink-600:       #B7C3D9;
  --c-ink-500:       #94A2BD;
  --c-ink-400:       #7A88A4;
  --c-ink-300:       #59667F;

  /* — accent (cobalt) — */
  --c-accent:        #3B6FCC;   /* primary button bg */
  --c-accent-700bg:  #2A5CB8;   /* button hover */
  --c-accent-text:   #8FB2EC;   /* accent text (lightened for contrast) */
  --c-accent-text-2: #A9C4F0;
  --c-accent-400:    #5C8EE0;
  --c-accent-300:    #8EB1ED;
  --c-accent-soft:   #101F38;   /* was cobalt-50 chip bg */
  --c-accent-soft2:  #16294A;   /* was cobalt-100 */
  --c-accent-border: #22406E;
}

/* ===== smooth cross-fade only while switching (not always) ===== */
html.theme-anim, html.theme-anim *,
html.theme-anim *::before, html.theme-anim *::after{
  transition: background-color .35s ease, border-color .35s ease,
              color .35s ease, fill .35s ease, stroke .35s ease,
              box-shadow .35s ease !important;
}

/* ============================================================
   DARK MODE OVERRIDES  (light mode is intentionally untouched)
   Selector prefix html[data-theme="dark"] outranks Tailwind's
   single-class utilities, so no !important is needed.
   ============================================================ */
html[data-theme="dark"]{ background-color: var(--c-bg); color: var(--c-text); }
html[data-theme="dark"] body{ background-color: var(--c-bg); color: var(--c-text); }

/* — solid backgrounds — */
html[data-theme="dark"] .bg-white{ background-color: var(--c-surface); }
html[data-theme="dark"] .bg-surface-muted{ background-color: var(--c-surface-2); }
html[data-theme="dark"] .bg-surface-border{ background-color: var(--c-border); }
html[data-theme="dark"] .bg-navy-900{ background-color: var(--c-navy-900); }
html[data-theme="dark"] .bg-navy-800{ background-color: var(--c-navy-800); }
html[data-theme="dark"] .bg-navy-700{ background-color: var(--c-navy-700); }
html[data-theme="dark"] .bg-navy-600{ background-color: var(--c-navy-600); }
html[data-theme="dark"] .bg-ink-300{ background-color: var(--c-ink-300); }

/* — frosted / translucent white surfaces (sticky headers) — */
html[data-theme="dark"] .bg-white\/95,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/80{ background-color: var(--c-surface-frost) !important; }

/* — accent backgrounds (cobalt) — */
html[data-theme="dark"] .bg-cobalt-600{ background-color: var(--c-accent); }
html[data-theme="dark"] .bg-cobalt-500{ background-color: var(--c-accent); }
html[data-theme="dark"] .bg-cobalt-400{ background-color: var(--c-accent-400); }
html[data-theme="dark"] .bg-cobalt-300{ background-color: var(--c-accent-300); }
html[data-theme="dark"] .bg-cobalt-100{ background-color: var(--c-accent-soft2); }
html[data-theme="dark"] .bg-cobalt-50{ background-color: var(--c-accent-soft); }

/* — borders — */
html[data-theme="dark"] .border-surface-border{ border-color: var(--c-border); }
html[data-theme="dark"] .border-surface-border\/70{ border-color: var(--c-border-soft); }
html[data-theme="dark"] .border-cobalt-100{ border-color: var(--c-accent-border); }
html[data-theme="dark"] .border-cobalt-200{ border-color: var(--c-accent-border); }
html[data-theme="dark"] .border-cobalt-500{ border-color: var(--c-accent); }
html[data-theme="dark"] .border-cobalt-600{ border-color: var(--c-accent); }

/* — text — */
html[data-theme="dark"] .text-navy-900{ color: var(--c-text); }
html[data-theme="dark"] .text-navy-700{ color: var(--c-text-2); }
html[data-theme="dark"] .text-ink-700{ color: var(--c-ink-700); }
html[data-theme="dark"] .text-ink-600{ color: var(--c-ink-600); }
html[data-theme="dark"] .text-ink-500{ color: var(--c-ink-500); }
html[data-theme="dark"] .text-ink-400{ color: var(--c-ink-400); }
html[data-theme="dark"] .text-ink-300{ color: var(--c-ink-300); }
html[data-theme="dark"] .text-cobalt-700{ color: var(--c-accent-text); }
html[data-theme="dark"] .text-cobalt-600{ color: var(--c-accent-text); }
html[data-theme="dark"] .text-cobalt-400{ color: var(--c-accent-text-2); }

/* — hover / focus states — */
html[data-theme="dark"] .hover\:bg-surface-muted:hover{ background-color: var(--c-surface-2); }
html[data-theme="dark"] .hover\:bg-white:hover{ background-color: var(--c-surface); }
html[data-theme="dark"] .hover\:bg-cobalt-700:hover{ background-color: var(--c-accent-700bg); }
html[data-theme="dark"] .hover\:bg-cobalt-500:hover{ background-color: var(--c-accent); }
html[data-theme="dark"] .hover\:bg-cobalt-50:hover{ background-color: var(--c-accent-soft); }
html[data-theme="dark"] .hover\:bg-cobalt-100:hover{ background-color: var(--c-accent-soft2); }
html[data-theme="dark"] .hover\:bg-navy-800:hover{ background-color: var(--c-navy-800); }
html[data-theme="dark"] .hover\:text-navy-900:hover{ color: var(--c-text); }
html[data-theme="dark"] .hover\:text-navy-700:hover{ color: var(--c-text-2); }
html[data-theme="dark"] .hover\:text-cobalt-700:hover{ color: var(--c-accent-text); }
html[data-theme="dark"] .hover\:text-cobalt-600:hover{ color: var(--c-accent-text); }
html[data-theme="dark"] .hover\:border-navy-700:hover{ border-color: var(--c-text-2); }
html[data-theme="dark"] .hover\:border-navy-300:hover{ border-color: var(--c-border); }
html[data-theme="dark"] .hover\:border-cobalt-400:hover{ border-color: var(--c-accent-border); }
html[data-theme="dark"] .hover\:border-cobalt-300:hover{ border-color: var(--c-accent-border); }
html[data-theme="dark"] .focus\:border-cobalt-500:focus{ border-color: var(--c-accent); }
html[data-theme="dark"] .focus\:border-cobalt-400:focus{ border-color: var(--c-accent); }
html[data-theme="dark"] .focus\:bg-white:focus{ background-color: var(--c-surface); }
html[data-theme="dark"] .group:hover .group-hover\:text-navy-700{ color: var(--c-text-2); }

/* — form fields: placeholders & inputs — */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{ color: var(--c-text); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color: var(--c-ink-400); }

/* keep native controls dark-aware */
html[data-theme="dark"]{ color-scheme: dark; }

/* ============================================================
   THEME TOGGLE BUTTON  (floating, elegant, sun/moon crossfade)
   ============================================================ */
#tv-theme-toggle{
  display: grid; place-items: center;      /* both icons share one cell → crossfade */
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  padding: 0;
  transition: transform .2s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#tv-theme-toggle svg{ grid-area: 1 / 1; transition: opacity .3s ease, transform .4s ease; }
/* light mode → show MOON (click to go dark) */
#tv-theme-toggle .ic-sun{ opacity: 0; transform: rotate(-90deg) scale(.5); }
#tv-theme-toggle .ic-moon{ opacity: 1; transform: rotate(0) scale(1); }
/* dark mode → show SUN (click to go light) */
html[data-theme="dark"] #tv-theme-toggle .ic-sun{ opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] #tv-theme-toggle .ic-moon{ opacity: 0; transform: rotate(90deg) scale(.5); }

/* ---- inline (inside the header nav, next to EN/HE) ---- */
.tv-theme-btn{
  width: 34px; height: 30px;
  margin-inline-start: 2px; margin-inline-end: 2px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: inherit;                          /* adapts to the header's text color */
}
.tv-theme-btn svg{ width: 19px; height: 19px; }
.tv-theme-btn:hover{ background: color-mix(in srgb, currentColor 15%, transparent); }
@supports not (background: color-mix(in srgb, red, red)){
  .tv-theme-btn:hover{ background: rgba(128,150,190,.18); }
}

/* ---- floating fallback (pages without a language switch) ---- */
.tv-theme-float{
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 20px;
  z-index: 2147483000;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(140,177,237,.35);
  background: rgba(255,255,255,.9);
  color: #1A2D4F;
  box-shadow: 0 10px 30px -8px rgba(10,21,48,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tv-theme-float svg{ width: 22px; height: 22px; }
.tv-theme-float:hover{ transform: translateY(-2px) scale(1.05); }
html[data-theme="dark"] .tv-theme-float{
  background: rgba(20,28,42,.85); color: #EAF0FB;
  border-color: rgba(140,177,237,.28); box-shadow: 0 10px 30px -8px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce){
  html.theme-anim, html.theme-anim *{ transition: none !important; }
  #tv-theme-toggle svg{ transition: opacity .01s; }
}