:root {
  --bg-from: #f8fafc; /* slate-50 */
  --bg-to: #f3f4f6;   /* gray-100 */
  --text: #0f172a;    /* slate-900 */
  --muted: #475569;   /* slate-600 */
  --card: #ffffff;
  --border: #e5e7eb;
  --ring: #94a3b8;    /* slate-400 */
  --radius: 18px;
  --accent: #3b82f6;  /* blue-500 */
}

[data-theme='dark'] {
  --bg-from: #0b1220;
  --bg-to: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --card: #0f172a;
  --border: #1f2937;
  --ring: #475569;
  --accent: #2563eb; /* blue-600 */
}

[data-theme='dark'] .chip {
  background: rgba(255,255,255,.06);
}

[data-theme='dark'] .accent {
  background: linear-gradient(90deg, #1f2937, #475569, #1f2937);
}

[data-theme='dark'] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.theme-toggle,
.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.theme-toggle:hover,
.sound-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.12);
}