/* =========================
   GLOBAL RESET
========================= */
* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: Arial, sans-serif;
}

/* =========================
   BODY
========================= */
body {
  background: linear-gradient(180deg, #0f172a, #111827);

  color: white;

  min-height: 100vh;

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

/* =========================
   LIGHT MODE
========================= */
html.light-mode body {
  background: #f1f5f9;
  color: #111827;
}

body.light-mode {
  background: #f1f5f9;

  color: #111827;
}

/* =========================
   LOGO
========================= */
.logo {
  color: white;

  text-decoration: none;

  font-weight: bold;

  transition: 0.2s ease;
}

body.light-mode .logo {
  color: #111827;
}

/* =========================
   TEXT
========================= */
.subtitle,
.meta,
.coming-soon {
  color: #94a3b8;
}

body.light-mode .subtitle,
body.light-mode .meta,
body.light-mode .coming-soon,
body.light-mode p {
  color: #475569;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode label,
body.light-mode span {
  color: #111827;
}

/* =========================
   CARDS / PANELS
========================= */
.card,
.signup-card,
.dashboard-card,
.settings-card,
.panel,
.sidebar {
  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 24px;

  backdrop-filter: blur(10px);

  transition: 0.25s ease;
}

body.light-mode .card,
body.light-mode .signup-card,
body.light-mode .dashboard-card,
body.light-mode .settings-card,
body.light-mode .panel,
body.light-mode .sidebar {
  background: white;

  border: 1px solid #dbeafe;

  color: #111827;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* =========================
   INPUTS
========================= */
input,
textarea,
select {
  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: white;

  padding: 14px;

  border-radius: 14px;

  outline: none;

  transition: 0.2s ease;
}

body.light-mode input,
body.light-mode textarea,
body.light-mode select {
  background: #ffffff;

  color: #111827;

  border: 1px solid #cbd5e1;
}

/* =========================
   SELECT OPTIONS
========================= */
select option {
  background: #1e293b;

  color: white;
}

body.light-mode select option {
  background: white;

  color: #111827;
}

/* =========================
   BUTTONS
========================= */
button,
.btn,
.theme-btn {
  border: none;

  border-radius: 14px;

  cursor: pointer;

  color: white;

  font-weight: bold;

  transition: 0.2s ease;
}

button:hover,
.btn:hover,
.theme-btn:hover {
  transform: translateY(-2px);
}

/* =========================
   THEME BUTTON
========================= */
.theme-btn {
  padding: 12px 18px;

  background: #2563eb;
}

/* =========================
   LINKS
========================= */
a {
  transition: 0.2s ease;
}

body.light-mode a {
  color: #2563eb;
}

/* =========================
   NAV LINKS
========================= */
.nav-links a {
  color: #94a3b8;
}

.nav-links a:hover {
  color: white;
}

body.light-mode .nav-links a {
  color: #475569;
}

body.light-mode .nav-links a:hover {
  color: #111827;
}

/* =========================
   TAGS
========================= */
.tags span {
  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: #cbd5e1;

  border-radius: 999px;

  padding: 8px 14px;

  font-size: 13px;
}

body.light-mode .tags span {
  background: #f3f4f6;

  border: 1px solid #d1d5db;

  color: #374151;
}

/* =========================
   FOOTER
========================= */
footer {
  color: #64748b;
}

body.light-mode footer {
  color: #6b7280;
}