@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', system-ui, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==================== THEME VARIABLES ==================== */
body.light   { --bg: 250 250 250; --card: 255 255 255; --border: 228 228 231; --text: 9 9 11; --muted: 113 113 122; --accent: 29 78 216; }
body.dark    { --bg: 9 9 11; --card: 24 24 27; --border: 39 39 42; --text: 244 244 245; --muted: 161 161 170; --accent: 59 130 246; }
body.ocean   { --bg: 15 23 42; --card: 30 41 59; --border: 51 65 85; --text: 241 245 255; --muted: 148 163 184; --accent: 14 165 233; }
body.purple  { --bg: 17 17 27; --card: 30 30 46; --border: 67 56 202; --text: 236 235 254; --muted: 161 161 190; --accent: 139 92 246; }
body.emerald { --bg: 16 23 19; --card: 21 32 27; --border: 52 211 153; --text: 236 253 245; --muted: 163 230 187; --accent: 16 185 129; }

body { background-color: rgb(var(--bg)); color: rgb(var(--text)); }
#settings-card, #preview-card, #upload-area { background-color: rgb(var(--card)); border: 1px solid rgb(var(--border)); }

.drop-zone { border-color: rgb(var(--border)); transition: all 0.3s ease; }
.drop-zone.dragover { border-color: rgb(var(--accent)); background-color: rgba(var(--accent), 0.1); }

#download-btn { background-color: rgb(var(--accent)); color: white; transition: all 0.2s; }
#download-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.format-btn { background: rgba(var(--muted), 0.1); border: 1px solid rgb(var(--border)); color: rgb(var(--muted)); }
.format-btn.active { background-color: rgb(var(--accent)); color: white; border-color: rgb(var(--accent)); }

input[type="number"], input[type="range"] { 
  background-color: rgb(var(--bg)); 
  border: 1px solid rgb(var(--border)); 
  color: rgb(var(--text)); 
}

/* Gallery Styling */
.preview-item { 
  background: rgba(var(--muted), 0.05); 
  border: 1px solid rgb(var(--border)); 
  transition: transform 0.2s;
}
.preview-item:hover { transform: scale(1.02); }
.file-size-tag { 
  background: rgb(var(--accent)); 
  color: white; 
  font-size: 10px; 
  font-weight: bold;
}