/* ================================
   THEME SYSTEM
================================ */
:root{
  --bg-main:#f1f5f9;
  --bg-card:#ffffff;
  --text-main:#111827;
  --text-soft:#6b7280;
  --border:#e5e7eb;

  --primary:#6366f1;
  --primary-dark:#4f46e5;
  --success:#22c55e;
  --danger:#ef4444;
}

body.dark{
  --bg-main:#020617;
  --bg-card:#1e293b;
  --text-main:#e2e8f0;
  --text-soft:#94a3b8;
  --border:#334155;
}

/* ================================
   RESET
================================ */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Poppins', Arial, sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
  transition:0.3s;
}

/* ================================
   BUTTON SYSTEM
================================ */
button{
  padding:10px 16px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  transition:0.2s;
}

button:hover{
  opacity:.9;
}

button.primary{
  background:var(--primary);
  color:#fff;
}

button.success{
  background:var(--success);
  color:#fff;
}

button.danger{
  background:var(--danger);
  color:#fff;
}

/* ================================
   FORM ELEMENTS (GLOBAL SAFE)
================================ */
input, select{
  padding:10px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-main);
}

/* ================================
   UTILITY
================================ */
.container{
  max-width:1200px;
  margin:auto;
  padding:20px;
}