/* Blog light/dark switch (2026-10-25). Loaded after the active skin by blog_header.php, so it works with ANY skin (default, news...).
   The skins use --white for BOTH surfaces and text on dark bars (menu, footer, buttons), so the variable is NOT touched: surfaces are repainted explicitly instead.
   html[data-theme] is set by an inline script at the top of blog_header.php (stored choice in localStorage 'chzr_blog_theme', else the system preference). */

/* the switch itself (visible in both themes, lives in the top bar) */
.theme-toggle { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; padding: 0; }
.theme-toggle:hover { background: rgba(255,255,255,.2); }
.theme-toggle:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; }

html[data-theme="dark"] { color-scheme: dark; --text-color: #e6e7ec; --light-gray: #1f222b; --dark-gray: #a9aebb; --accent-color: #7db1ff; }
html[data-theme="dark"] body { background: #12141a; color: var(--text-color); }
html[data-theme="dark"] .main-header,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .sidebar-widget { background: #1a1d25; box-shadow: 0 5px 15px rgba(0,0,0,.45); }
html[data-theme="dark"] .main-header { box-shadow: 0 2px 10px rgba(0,0,0,.5); }
html[data-theme="dark"] .categories-list li,
html[data-theme="dark"] .post-header,
html[data-theme="dark"] .blog-author-card { border-color: #2c303b; }
html[data-theme="dark"] .tag-cloud a,
html[data-theme="dark"] .post-container .post-content a:not(.pill),
html[data-theme="dark"] .post-container .post-content details.post-references,
html[data-theme="dark"] .post-container .post-content .post-faq details,
html[data-theme="dark"] .blog-author-card .pill { border-color: #383d4b; }
html[data-theme="dark"] .post-header .post-title,
html[data-theme="dark"] .post-container .post-intro,
html[data-theme="dark"] .post-container .post-content h3 { color: var(--text-color); }
html[data-theme="dark"] .post-header .post-meta { color: var(--dark-gray); }
html[data-theme="dark"] .back-button { color: #7db1ff; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #232733; color: var(--text-color); border-color: #383d4b; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #8b91a1; }
html[data-theme="dark"] img { filter: brightness(.92); }
html[data-theme="dark"] .post-container .post-content a:not(.pill):not(:hover) { color: var(--accent-color); }
html[data-theme="dark"] ::selection { background: #3a4a78; color: #fff; }