/* ===== ZIVERSE DESIGN TOKENS ===== */
:root {
  --bg:       #e8edf5;
  --bg2:      #f8fafc;
  --bg3:      #ffffff;
  --bg4:      #0f172a;
  --text:     #0f172a;
  --text2:    #64748b;
  --text3:    #94a3b8;
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.06);
  --accent:   #1d4ed8;
  --accent2:  #2563eb;
  --accent3:  #3b82f6;
  --accentbg: rgba(37,99,235,0.07);
  --shadow:   0 2px 8px rgba(0,0,0,0.05);
  --shadow2:  0 8px 32px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  --bg:       #0d1117;
  --bg2:      #161b27;
  --bg3:      #1e2a3a;
  --bg4:      #0a0e1a;
  --text:     #f1f5f9;
  --text2:    #94a3b8;
  --text3:    #64748b;
  --border:   rgba(255,255,255,0.09);
  --border2:  rgba(255,255,255,0.06);
  --accent:   #3b82f6;
  --accent2:  #60a5fa;
  --accent3:  #93c5fd;
  --accentbg: rgba(59,130,246,0.1);
  --shadow:   0 2px 8px rgba(0,0,0,0.3);
  --shadow2:  0 8px 32px rgba(0,0,0,0.4);
}

/* Dark mode body/section overrides */
[data-theme="dark"] body { background: var(--bg) !important; color: var(--text) !important; }
[data-theme="dark"] section { background: var(--bg) !important; }
[data-theme="dark"] #services,
[data-theme="dark"] #portfolio,
[data-theme="dark"] #blog-section { background: var(--bg2) !important; }
[data-theme="dark"] footer { background: var(--bg4) !important; }

/* Dark mode card overrides */
[data-theme="dark"] .dm-card {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="dark"] .dm-card:hover {
  border-color: var(--accent2) !important;
}

/* Dark mode text overrides */
[data-theme="dark"] .dm-h { color: var(--text) !important; }
[data-theme="dark"] .dm-p { color: var(--text2) !important; }
[data-theme="dark"] .dm-muted { color: var(--text3) !important; }

/* Dark mode input overrides */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Scroll progress bar */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(to right, #1d4ed8, #3b82f6);
  width: 0%; transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* Back to top */
#back-to-top {
  position: fixed; bottom: 90px; right: 24px; z-index: 998;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--bg3, #fff); border: 1.5px solid var(--border, rgba(0,0,0,0.1));
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; color: var(--accent, #1d4ed8);
}
#back-to-top.visible { display: flex; }
#back-to-top:hover { background: var(--accent, #1d4ed8); color: #fff; border-color: var(--accent, #1d4ed8); transform: translateY(-2px); }