/* -----------------------------------
   GLOBAL
----------------------------------- */
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background: #fafafa;
  color: #222;
  transition: background 0.3s, color 0.3s;
}

/* Center the entire app */
#app {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* -----------------------------------
   CSS VARIABLES — LIGHT MODE
----------------------------------- */
:root {
  --card-1: #abdbfd; /* bright sky blue */
  --card-2: #faa8c4; /* bright rose pink */
  --card-3: #b8f9be; /* bright mint green */
  --card-4: #fbdba8; /* bright apricot */
  --card-5: #f2b1fc; /* bright lilac */
}

/* -----------------------------------
   DARK MODE
----------------------------------- */
body.dark-mode {
  background: #121212;
  color: #eee;
  --card-1: #2a2438;
  --card-2: #1f2a38;
  --card-3: #382a24;
  --card-4: #24382a;
  --card-5: #38242f;
}

/* -----------------------------------
   APP COLUMN
----------------------------------- */
.app-column {
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
}

/* -----------------------------------
   UTILITY
----------------------------------- */
.hidden {
  display: none;
}