:root{

  /* DARK MODE DEFAULT */
  --bg:#0a0a12;
  --bg-secondary:#11111b;
  --card:#1a1a2e;
  --text:#ffffff;
  --muted:#8e8e8e;

  --purple:#8B5CF6;
  --purple-glow:rgba(139,92,246,0.45);

  --gold:#FBBF24;
  --red:#ef4444;

  --border:rgba(255,255,255,0.08);

  --header:#0a0a12;
  --mobile:#05050b;

  --toggle-bg:#17171f;
  --toggle-circle:#8B5CF6;

}

/* LIGHT MODE */
body.light-mode{

  --bg:#ececff;
  --bg-secondary:#e3e4ff;
  --card:#f7f7ff;

  --text:#181825;
  --muted:#6b6b80;

  --purple:#7c3aed;
  --purple-glow:rgba(124,58,237,0.35);

  --gold:#f59e0b;

  --border:rgba(124,58,237,0.15);

  --header:rgba(245,245,255,0.88);
  --mobile:#f7f7ff;

  --toggle-bg:#dadcff;
  --toggle-circle:#f59e0b;

}

/* GLOBAL BODY */
body{
  background:
  radial-gradient(circle at top left, rgba(139,92,246,0.15), transparent 30%),
  radial-gradient(circle at bottom right, rgba(139,92,246,0.08), transparent 30%),
  var(--bg);

  color:var(--text);

  transition:
  background 0.4s ease,
  color 0.4s ease;
}

/* GLOBAL TRANSITIONS */
.header,
.card,
.mobile-menu,
button,
select,
a,
.nav-links a,
.logo{
  transition:0.35s ease;
}

/* THEME TOGGLE */

.theme-toggle{
  width:88px;
  height:42px;
  border-radius:999px;
  background:var(--toggle-bg);
  position:relative;
  cursor:pointer;
  display:flex;
  align-items:center;
  padding:0 6px;
  border:1px solid var(--border);

  box-shadow:
  inset 0 0 10px rgba(255,255,255,0.05),
  0 0 20px rgba(0,0,0,0.15);

  transition:0.4s ease;
}

.theme-toggle:hover{
  box-shadow:
  0 0 18px var(--purple-glow),
  inset 0 0 10px rgba(255,255,255,0.08);
}

.toggle-circle{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--toggle-circle);
  position:absolute;
  left:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  transition:0.4s cubic-bezier(.68,-0.55,.27,1.55);

  box-shadow:
  0 0 18px rgba(255,255,255,0.2),
  0 0 25px var(--purple-glow);
}

body.light-mode .toggle-circle{
  left:48px;
}

.toggle-icons{
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 10px;
  font-size:14px;
  opacity:0.75;
}