/* ===============================
  Variables for Colors (Day/Night)
================================= */
:root {
  /* Common */
  --font-primary: "Poppins", sans-serif;

  /* Day Mode */
  --bg-color-day: #f5f5f7;
  --text-color-day: #1a1a1a;
  --primary-color-day: #ff8a00;      /* برای گرادینت‌ها و دکمه‌ها */
  --secondary-color-day: #e52e71;
  --card-bg-day: #ffffff;
  --card-shadow-day: rgba(0, 0, 0, 0.1);
  --border-color-day: #ddd;

  /* Night Mode */
  --bg-color-night: #0f0f14;
  --text-color-night: #ffffff;
  --primary-color-night: #ff8a00;    /* می‌تونه همانند روز باشد */
  --secondary-color-night: #e52e71;
  --card-bg-night: rgba(255, 255, 255, 0.05);
  --card-shadow-night: rgba(0, 0, 0, 0.25);
  --border-color-night: rgba(255,255,255,0.1);
}

/* ===============================
  Base Styles
================================= */
body {
  margin: 0;
  font-family: var(--font-primary);
  background: var(--bg-color-night); /* Night by default */
  color: var(--text-color-night);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Day Mode Toggle */
body.day-mode {
  background: var(--bg-color-day);
  color: var(--text-color-day);
}

#animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* پشت همه المان‌ها */
  background: #111; /* پایه شب */
  overflow: hidden;
}