/* ═══ DARK MODE ═══ */
/* Einbinden: <link rel="stylesheet" href="theme.css"> */

html[data-theme="dark"] {
  --bg: #0a0a0a;
  --black: #e8e8e8;
  --muted: #aaa;
  --border: #e8e8e8;

}
[data-theme="dark"]  {
  border: #e8e8e8;
  color: #ffffffd9;
}

[data-theme="dark"] body {
  background: #0d1b2a;
  color: #ffffffd9;
}

/* Topbar */
[data-theme="dark"] .topbar {
  background: #0d1b2a;
  border-color: #e8e8e8;
}
[data-theme="dark"] .topbar-hamburger span {
  background: #e8e8e8;
}

/* Mobile Overlay */
[data-theme="dark"] .mobile-overlay {
  background: #e8e8e8;
}
[data-theme="dark"] .mobile-overlay a {
  color: #0a0a0a;
}

/* Nav */
[data-theme="dark"] .numbered-nav {
  border-color: #e8e8e8;
}

/* Blog & post headings */
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .blog-entry-title,
[data-theme="dark"] .post-header h1,
[data-theme="dark"] .post-body h2,
[data-theme="dark"] .post-body h3 {
  color: #e8e8e8;
}

/* Content text */
[data-theme="dark"] p,
[data-theme="dark"] span {
  color: #e8e8e8;
}
[data-theme="dark"] .page-header p span,
[data-theme="dark"] .blog-entry-excerpt,
[data-theme="dark"] .content p,
[data-theme="dark"] .post-body {
  color: #bbb;
}

/* frame 2 hero */

[data-theme="dark"] .frame {
  background: #0d1b2a;
}
[data-theme="dark"] .frame-inner,
[data-theme="dark"] div.featured-img,
[data-theme="dark"] .project-card-thumb-inner {
  background: #192a3b;
}
html[data-theme="dark"] .project-card:hover,
html[data-theme="dark"] .post-card:hover {
  background: #e8e8e8;
  color: #030303;
}
html[data-theme="dark"] .project-card:hover *,
html[data-theme="dark"] .post-card:hover * {
  color: #030303;
  border-color: #030303;
}
html[data-theme="dark"] .project-card:hover span,
html[data-theme="dark"] .post-card:hover span {
  color: #030303;
}
html[data-theme="dark"] .project-card:hover .project-card-tags .tag {
  border-color: #030303;
  color: #030303;
}
html[data-theme="dark"] .project-card:hover .project-card-thumb-inner {
  background: #e8e8e8;
}
html[data-theme="dark"] .project-card:hover .project-card-thumb-inner .frame-label {
  color: #030303;
}
[data-theme="dark"] .frame-inner *,
[data-theme="dark"] .frame-inner .frame-label,
[data-theme="dark"] .frame-inner .frame-title,
[data-theme="dark"] .frame-inner .frame-desc {
  color: #e8e8e8;
}

/* Blog entries */
[data-theme="dark"] .blog-list-divider {
  background: #2a2a2a;
}
[data-theme="dark"] .tag {
  border-color: #e8e8e8;
  color: #e8e8e8;
}
[data-theme="dark"] .blog-entry:hover .tag {
  border-color: #e8e8e8;
  color: #e8e8e8;
}

/* Post page */
[data-theme="dark"] .post-cover img {
  border-color: #2a2a2a;
}
[data-theme="dark"] .post-body code,
[data-theme="dark"] .content code {
  background: #000;;
  color: #99b098;
}
[data-theme="dark"] .post-body pre,
[data-theme="dark"] .content pre {
  background: #030303;
  border: 1px solid #516e7c;
  color: #600000;
}
[data-theme="dark"] .post-body blockquote {
  border-color: #444;
  color: #999;
}
[data-theme="dark"] .post-body img {
  border-color: #2a2a2a;
}
[data-theme="dark"] .post-footer {
  border-color: #2a2a2a;
}

/* Playground item */

[data-theme="dark"] .play-item {
  background: #0d1b2a;
  color: #e8e8e8;
}
[data-theme="dark"] .play-item * {
  color: #e8e8e8;
}
html[data-theme="dark"] .play-item:hover {
  background: #e8e8e8;
  color: #030303;
  border-color: #030303;
}
html[data-theme="dark"] .play-item:hover * {
  color: #030303;
  border-color: #030303;
}


/* Playground pages — buttons & inputs */
html[data-theme="dark"] .ctrl-btn,
html[data-theme="dark"] .preset-btn,
html[data-theme="dark"] .preset,
html[data-theme="dark"] .add-header,
html[data-theme="dark"] .url-input,
html[data-theme="dark"] .header-row input,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .range-val,
html[data-theme="dark"] .footer-info,
html[data-theme="dark"] .info,
html[data-theme="dark"] .gen-info {
  color: #e8e8e8;
  border-color: #e8e8e8;
}
html[data-theme="dark"] .ctrl-btn:hover,
html[data-theme="dark"] .preset-btn:hover,
html[data-theme="dark"] .preset:hover,
html[data-theme="dark"] .add-header:hover {
  background: #e8e8e8;
  color: #030303;
  border-color: #030303;
}

/* Playground pages */
[data-theme="dark"] .response-body {
  background: #0d1b2a;
  color: #e8e8e8;
}
[data-theme="dark"] .body-textarea {
  background: #0d1b2a;
  color: #e8e8e8;
  border-color: #e8e8e8;
}
[data-theme="dark"] .move-list {
  background: #0d1b2a;
  color: #e8e8e8;
}
[data-theme="dark"] .color-row input[type="color"],
[data-theme="dark"] .color-row input[type="text"] {
  background: #0d1b2a;
  color: #e8e8e8;
  border-color: #e8e8e8;
}

/* Progress bar */
[data-theme="dark"] .progress-bar {
  background: #e8e8e8;
}

/* Footer */
[data-theme="dark"] .site-footer {
  border-color: #2a2a2a;
}

/* Admin: Login */
[data-theme="dark"] .login-screen {
  background: #0a0a0a;
}
[data-theme="dark"] .login-box input {
  background: #161616;
  border-color: #2a2a2a;
  color: #e8e8e8;
}
[data-theme="dark"] .login-box input:focus {
  border-color: #e8e8e8;
}
[data-theme="dark"] .login-box .login-btn {
  background: #e8e8e8;
  color: #0a0a0a;
  border-color: #e8e8e8;
}

/* Admin: Tabs */
[data-theme="dark"] .tabs {
  border-color: #2a2a2a;
}
[data-theme="dark"] .tab {
  border-color: #2a2a2a;
  color: #666;
}
[data-theme="dark"] .tab.active {
  background: #e8e8e8;
  color: #0a0a0a;
}
[data-theme="dark"] .tab:hover:not(.active) {
  background: rgba(255,255,255,.04);
  color: #e8e8e8;
}

/* Admin: Forms */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea,
[data-theme="dark"] .editor-area {
  background: #161616;
  border-color: #2a2a2a;
  color: #e8e8e8;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .editor-area:focus {
  border-color: #e8e8e8;
}

/* Admin: Buttons */
[data-theme="dark"] .btn {
  background: #e8e8e8;
  color: #0a0a0a;
  border-color: #e8e8e8;
}
[data-theme="dark"] .btn-outline {
  background: transparent;
  color: #e8e8e8;
}
[data-theme="dark"] .btn-outline:hover {
  background: #e8e8e8;
  color: #0a0a0a;
}
[data-theme="dark"] .toolbar-btn {
  background: #161616;
  border-color: #2a2a2a;
  color: #777;
}
[data-theme="dark"] .toolbar-btn:hover {
  background: #e8e8e8;
  color: #0a0a0a;
  border-color: #e8e8e8;
}
[data-theme="dark"] .action-btn {
  border-color: #2a2a2a;
}
[data-theme="dark"] .action-btn:hover {
  background: #e8e8e8;
  color: #0a0a0a;
  border-color: #e8e8e8;
}
[data-theme="dark"] .topbar-badge {
  background: #e8e8e8;
  color: #0a0a0a;
}

/* Admin: Sections */
[data-theme="dark"] .section-title {
  border-color: #2a2a2a;
}
[data-theme="dark"] .admin-post-item {
  border-color: #2a2a2a;
}

/* Admin: Cover & Image upload */
[data-theme="dark"] .cover-upload {
  border-color: #2a2a2a;
}
[data-theme="dark"] .cover-upload:hover {
  border-color: #e8e8e8;
  background: rgba(255,255,255,.02);
}
[data-theme="dark"] .image-upload-zone {
  border-color: #2a2a2a;
}
[data-theme="dark"] .image-upload-zone:hover {
  border-color: #e8e8e8;
  background: rgba(255,255,255,.02);
}
[data-theme="dark"] .image-gallery {
  background: #2a2a2a;
  border-color: #2a2a2a;
}
[data-theme="dark"] .image-item {
  background: #161616;
}
[data-theme="dark"] .image-empty {
  background: #161616;
}

/* Admin: Toast */
[data-theme="dark"] .toast {
  background: #e8e8e8;
  color: #0a0a0a;
}

/* ═══ THEME TOGGLE BUTTON ═══ */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  opacity: .5;
  transition: opacity .2s;
}
.theme-toggle:hover {
  opacity: 1;
}

/* Selection */
[data-theme="dark"] ::selection {
  background: #e8e8e8;
  color: #0a0a0a;
}