/* ===============================
   BASE THEME (LIGHT)
================================ */
.no-copy {
  user-select: none;
  -webkit-user-select: none;
}


html, body {
  height: auto;
  overflow-y: auto;
}

body {
  background-color: #fdfdfd;
  color: #333;
  font-family: 'Poppins', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===============================
   TEXT COLOR SAFETY (TAILWIND)
================================ */

body.dark .text-gray-400,
body.dark .text-gray-500,
body.dark .text-gray-600,
body.dim .text-gray-400,
body.dim .text-gray-500,
body.dim .text-gray-600 {
  color: inherit;
}


/* ===============================
   DIM MODE
================================ */

body.dim {
  background-color: #161e2f;
  color: #d1d5db;
}

body.dim header,
body.dim .nav,
body.dim .card {
  background-color: #1f2937;
}

/* ===============================
   DARK MODE
================================ */

body.dark {
  background-color: #010824;
  color: #e5e7eb;
}

body.dark header,
body.dark .nav,
body.dark .card {
  background-color: #020617;
}

/* ===============================
   SHARED UTILITIES
================================ */

.gold {
  color: #bfa742;
}

body.dark .gold,
body.dim .gold {
  color: #facc15;
}

/* ===============================
   LINKS
================================ */

a {
  text-decoration: none;
}

body.dark a,
body.dim a {
  color: #60a5fa;
}

/* ===============================
   BUTTONS
================================ */

button {
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.dark button,
body.dim button {
  background-color: #020617;
  color: #e5e7eb;
  border-color: #374151;
}

/* ===============================
   FORM ELEMENTS
================================ */

input,
select {
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.dark input,
body.dark select,
body.dim input,
body.dim select {
  background-color: #020617;
  color: #e5e7eb;
  border-color: #374151;
}

/* ===============================
   SCROLLBAR (DESKTOP ONLY)
================================ */

@media (hover: hover) {
  body.dark::-webkit-scrollbar,
  body.dim::-webkit-scrollbar {
    width: 10px;
  }

  body.dark::-webkit-scrollbar-thumb,
  body.dim::-webkit-scrollbar-thumb {
    background-color: #374151;
    border-radius: 6px;
  }
}

/* ===============================
   SAFE-AREA SUPPORT (MOBILE)
================================ */

body {
  padding-bottom: env(safe-area-inset-bottom);
}