:root {
  --primary: #06b6d4;
  --accent: #0ea5e9;

  --dark-bg: #0f172a;
  --dark-card: #111827;

  --light-bg: #e6faff;
  --light-card: #ffffff;

  --text-dark: #020617;
  --text-light: #f8fafc;

  --muted-dark: #94a3b8;
  --muted-light: #64748b;

  --border-dark: rgba(255,255,255,0.08);
  --border-light: rgba(0,0,0,0.08);
}

/* THEME */
body.theme-dark {
  background: var(--dark-bg);
  color: var(--text-light);

  --content-bg: var(--content-dark);
  --card-bg: var(--dark-card);
  --border-color: var(--border-dark);
  --muted: var(--muted-dark);
}

body.theme-light {
  background: var(--light-bg);
  color: var(--text-dark);

  --content-bg: var(--content-light);
  --card-bg: var(--light-card);
  --border-color: var(--border-light);
  --muted: var(--muted-light);
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 56px;
  height: 28px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 6px;
  user-select: none;
}

.theme-toggle .icon {
  font-size: 14px;
  z-index: 2;
}

.theme-toggle .thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  left: 4px;
  transition: transform .3s ease;
}

body.theme-light .theme-toggle .thumb {
  transform: translateX(26px);
}