/* ═══════════════════════════════════════════════════════════════
   THEME.CSS — ChciVlastníDům.cz
   Loaded AFTER each page's inline <style> so cascade order wins.

   Responsibility:
   · color-scheme declaration (disables browser auto-darkening)
   · semantic token extensions (--bg-card, --bg-input, etc.)
   · dark mode token overrides — system pref + manual toggle
   · shared component fixes for hardcoded colors
   · theme toggle button styles
═══════════════════════════════════════════════════════════════ */

/* ── 1. Light-mode token baseline (extends inline :root) ─────── */
:root {
  color-scheme: light dark;

  /* Card & surface tokens (new — not in inline CSS) */
  --bg-card:     #ffffff;
  --bg-input:    #ffffff;
  --bg-overlay:  rgba(9, 9, 11, 0.5);

  /* Shadow tokens */
  --sh:    0 1px 3px rgba(0,0,0,0.07), 0 8px 24px rgba(0,0,0,0.06);
  --sh-lg: 0 4px 8px rgba(0,0,0,0.05), 0 20px 50px rgba(0,0,0,0.10);
}

/* ── 2. Dark mode: system preference (opt-out via data-theme=light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #09090B;
    --bg-soft:     #111113;
    --bg-dark:     #000000;
    --bg-card:     #18181B;
    --bg-input:    #18181B;
    --bg-overlay:  rgba(0, 0, 0, 0.7);
    --text:        #F4F4F5;
    --text-2:      #D4D4D8;
    --text-muted:  #A1A1AA;
    --border:      #27272A;
    --green-pale:  rgba(22, 163, 74, 0.15);
    --green-light: rgba(22, 163, 74, 0.25);
    --sh:    0 1px 3px rgba(0,0,0,0.3),  0 8px 24px rgba(0,0,0,0.25);
    --sh-lg: 0 4px 8px rgba(0,0,0,0.3),  0 20px 50px rgba(0,0,0,0.4);
    --bg-dark-section: #0b0f14;
    --bg-dark-card:    #111827;
  }
}

/* ── 3. Dark mode: manual toggle ─────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #09090B;
  --bg-soft:     #111113;
  --bg-dark:     #000000;
  --bg-card:     #18181B;
  --bg-input:    #18181B;
  --bg-overlay:  rgba(0, 0, 0, 0.7);
  --text:        #F4F4F5;
  --text-2:      #D4D4D8;
  --text-muted:  #A1A1AA;
  --border:      #27272A;
  --green-pale:  rgba(22, 163, 74, 0.15);
  --green-light: rgba(22, 163, 74, 0.25);
  --sh:    0 1px 3px rgba(0,0,0,0.3),  0 8px 24px rgba(0,0,0,0.25);
  --sh-lg: 0 4px 8px rgba(0,0,0,0.3),  0 20px 50px rgba(0,0,0,0.4);
  --bg-dark-section: #0b0f14;
  --bg-dark-card:    #111827;
}

/* ── 4. Light mode: manual toggle (restores defaults) ─────────── */
html[data-theme="light"] {
  color-scheme: light;
  --bg:          #ffffff;
  --bg-soft:     #F8FAFB;
  --bg-dark:     #09090B;
  --bg-card:     #ffffff;
  --bg-input:    #ffffff;
  --bg-overlay:  rgba(9, 9, 11, 0.5);
  --text:        #09090B;
  --text-2:      #3F3F46;
  --text-muted:  #71717A;
  --border:      #E4E4E7;
  --green-pale:  #F0FDF4;
  --green-light: #DCFCE7;
  --sh:    0 1px 3px rgba(0,0,0,0.07), 0 8px 24px rgba(0,0,0,0.06);
  --sh-lg: 0 4px 8px rgba(0,0,0,0.05), 0 20px 50px rgba(0,0,0,0.10);
}

/* ═══════════════════════════════════════════════════════════════
   5. COMPONENT OVERRIDES
   Replace hardcoded color values with CSS variables.
   Written unconditionally — in light mode the variables resolve
   to the same values the original hardcoded colors had, so light
   mode is pixel-identical. Dark mode gets the dark values.
═══════════════════════════════════════════════════════════════ */

/* ── Site header (hardcoded #ffffff / #E4E4E7 in all pages) ──── */
#site-header {
  background: var(--bg-card);
  border-bottom-color: var(--border);
  transition: background 0.25s, border-color 0.25s;
}

/* ── Logo color — hardcoded #09090B in article + checklist pages  */
.logo           { color: var(--text); }
.logo--light    { color: var(--text); }
/* Footer always has a dark background — keep logo white in every mode */
footer .logo    { color: #ffffff; }

/* ── Nav link hover (hardcoded #09090B) ──────────────────────── */
.hdr-nav a:hover  { color: var(--text); }

/* ── Hamburger lines (hardcoded #09090B) ─────────────────────── */
.hdr-toggle span  { background: var(--text); }

/* ── Related articles section (article pages) ────────────────── */
.related-articles {
  background: var(--bg-soft);
  border-top-color: var(--border);
}
.related-card {
  background: var(--bg-card);
  border-color: var(--border);
}
.related-card:hover {
  box-shadow: var(--sh);
}
.related-card-name { color: var(--text); }
.related-card-tag  { color: var(--text-muted); }

/* ── Checklist page — hardcoded white surfaces ───────────────── */
.overall-progress   { background: var(--bg-card); }
.btn-action         { background: var(--bg-card); border-color: var(--border); }
.cl-section         { background: var(--bg-card); border-color: var(--border); }
.cl-section-head    { border-bottom-color: var(--border); }
.cl-item            { border-bottom-color: var(--bg-soft); }
.cl-item:hover      { background: var(--bg-soft); }
.cl-checkbox        { background: var(--bg-card); border-color: var(--border); }
.done-card          { background: var(--bg-card); }
.done-btn-ghost     { border-color: var(--border); color: var(--text-2); }

/* ── Legal pages (cookies, ochrana, podminky) — nav element ──── */
nav {
  /* Replace rgba(255,255,255,0.92) with theme-aware value */
  border-bottom-color: var(--border);
}

/* ─────────────────────────────────────────────────────────────
   6. DARK-MODE-ONLY OVERRIDES
   For values that cannot be expressed as simple variable swaps
   (different opacity, rgba constructs, component-specific hacks).
───────────────────────────────────────────────────────────────*/

/* Shared dark styles — applied by both system pref and manual */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #site-header,
  :root:not([data-theme="light"]) #site-header.scrolled { background: rgba(9,9,11,0.96); }

  :root:not([data-theme="light"]) #hdr-menu {
    background: #09090B;
    border-top-color: #27272A;
  }

  /* Legal page nav with backdrop blur */
  :root:not([data-theme="light"]) nav {
    background: rgba(9, 9, 11, 0.93);
  }

  /* Reading progress bar stays green — fine */

  /* Checklist done items */
  :root:not([data-theme="light"]) .cl-item.done:hover {
    background: rgba(22, 163, 74, 0.18);
  }

  /* btn-dark hover (index.html) */
  :root:not([data-theme="light"]) .btn-dark:hover { background: #27272A; }

  /* Form fields (index.html .fi) */
  :root:not([data-theme="light"]) .fi {
    background: var(--bg-input);
    border-color: #3F3F46;
    color: var(--text);
  }
  :root:not([data-theme="light"]) .fi:focus {
    border-color: var(--green);
    background: var(--bg-input);
  }
  :root:not([data-theme="light"]) .fi::placeholder { color: var(--text-muted); }

  /* footer (already dark but bg-dark can differ, align it) */
  :root:not([data-theme="light"]) footer { background: #000000; }

  /* warn-box: hardcoded #FFF7ED background → dark orange tint */
  :root:not([data-theme="light"]) .warn-box {
    background: rgba(249, 115, 22, 0.10);
    color: var(--text);
  }
}

/* Manual dark — mirror of above */
html[data-theme="dark"] #site-header,
html[data-theme="dark"] #site-header.scrolled { background: rgba(9,9,11,0.96); }

html[data-theme="dark"] #hdr-menu {
  background: #09090B;
  border-top-color: #27272A;
}

html[data-theme="dark"] nav { background: rgba(9, 9, 11, 0.93); }

html[data-theme="dark"] .cl-item.done:hover { background: rgba(22, 163, 74, 0.18); }
html[data-theme="dark"] .btn-dark:hover { background: #27272A; }

html[data-theme="dark"] .fi {
  background: var(--bg-input);
  border-color: #3F3F46;
  color: var(--text);
}
html[data-theme="dark"] .fi:focus {
  border-color: var(--green);
  background: var(--bg-input);
}
html[data-theme="dark"] .fi::placeholder { color: var(--text-muted); }
html[data-theme="dark"] footer { background: #000000; }
html[data-theme="dark"] .solution-panel { background: var(--bg-dark-card); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .sp-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); }
html[data-theme="dark"] .sp-item-ico.yellow { background: rgba(251,191,36,0.15); }
html[data-theme="dark"] .sp-item-ico.blue { background: rgba(59,130,246,0.15); }
/* ── Dark sections: solution / process / types */
html[data-theme="dark"] #solution,
html[data-theme="dark"] #process,
html[data-theme="dark"] #types    { background: var(--bg-dark-section); }
html[data-theme="dark"] .type-card,
html[data-theme="dark"] .process-sticky { background: var(--bg-dark-card); }
html[data-theme="dark"] .type-ico { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .type-card:hover { background: #1a2234; box-shadow: var(--sh-lg); }
html[data-theme="dark"] #solution .label,
html[data-theme="dark"] #process .label,
html[data-theme="dark"] #types .label { color: #6EE7B7; }
html[data-theme="dark"] #solution .label::before,
html[data-theme="dark"] #process .label::before,
html[data-theme="dark"] #types .label::before { background: #6EE7B7; }

/* ── index.html: extra component overrides for manual dark toggle  */
/* These mirror the existing @media block so the manual toggle      */
/* produces the same result as system dark.                         */
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .type-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .founder-portrait,
html[data-theme="dark"] .process-sticky,
html[data-theme="dark"] .calc-wrap      { background: #18181B; }

html[data-theme="dark"] .article-card  { border-color: #27272A; }
html[data-theme="dark"] .pricing-card  { border-color: #27272A; }
html[data-theme="dark"] .pricing-card.featured { border-color: var(--green); }
html[data-theme="dark"] .faq-item      { border-color: #27272A; }
html[data-theme="dark"] .calc-sliders  { background: #18181B; }
html[data-theme="dark"] .calc-result   { background: #111113; border-color: #27272A; }
html[data-theme="dark"] .pt-dot        { background: #18181B; }
html[data-theme="dark"] .hero-card     { border-color: #27272A; }
html[data-theme="dark"] .hero-card-rec {
  background: rgba(22,163,74,0.15);
  border-color: rgba(22,163,74,0.25);
}
html[data-theme="dark"] input[type="range"] { accent-color: var(--green); }
html[data-theme="dark"] #mobile-cta-bar {
  background: #18181B;
  border-top-color: #27272A;
}
html[data-theme="dark"] .solution-card { background: #18181B; border-color: #27272A; }
html[data-theme="dark"] .how-step      { background: #18181B; }
html[data-theme="dark"] .footer-bottom { border-top-color: #1F1F23; }

/* warn-box: hardcoded #FFF7ED background → dark orange tint */
html[data-theme="dark"] .warn-box {
  background: rgba(249, 115, 22, 0.10);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   7. THEME TOGGLE BUTTON
═══════════════════════════════════════════════════════════════ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--bg-soft);
}

/* Moon shown in light mode, Sun shown in dark mode */
.theme-toggle .t-sun  { display: none; }
.theme-toggle .t-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .t-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .t-moon { display: none; }
}
html[data-theme="dark"] .theme-toggle .t-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .t-moon { display: none; }
html[data-theme="light"] .theme-toggle .t-sun  { display: none; }
html[data-theme="light"] .theme-toggle .t-moon { display: block; }