[data-theme="space"] {
  --bg: #0f0c29;
  --bg-accent: #302b63;
  --card: #1a1744;
  --text: #f0f4ff;
  --text-muted: rgba(240, 244, 255, 0.65);
  --accent: #a78bfa;
  --accent-hover: #8b5cf6;
  --border: rgba(167, 139, 250, 0.35);
  --success: #4ade80;
}

[data-theme="jungle"] {
  --bg: #ecfdf5;
  --bg-accent: #6ee7b7;
  --card: #ffffff;
  --text: #14532d;
  --text-muted: rgba(20, 83, 45, 0.65);
  --accent: #059669;
  --accent-hover: #047857;
  --border: rgba(5, 150, 105, 0.25);
  --success: #22c55e;
}

[data-theme="ocean"] {
  --bg: #e0f2fe;
  --bg-accent: #7dd3fc;
  --card: #ffffff;
  --text: #0c4a6e;
  --text-muted: rgba(12, 74, 110, 0.65);
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --border: rgba(2, 132, 199, 0.25);
  --success: #14b8a6;
}

[data-theme="candy"] {
  --bg: #fdf2f8;
  --bg-accent: #f9a8d4;
  --card: #ffffff;
  --text: #831843;
  --text-muted: rgba(131, 24, 67, 0.65);
  --accent: #ec4899;
  --accent-hover: #db2777;
  --border: rgba(236, 72, 153, 0.3);
  --success: #f472b6;
}

[data-theme="arcade"] {
  --bg: #0f0a1a;
  --bg-accent: #2d1b69;
  --card: #1e1433;
  --text: #f5f0ff;
  --text-muted: rgba(245, 240, 255, 0.65);
  --accent: #00d4ff;
  --accent-hover: #00a8cc;
  --border: rgba(0, 212, 255, 0.35);
  --success: #a3e635;
}

[data-theme="space"] .pin-key,
[data-theme="space"] .chore-card,
[data-theme="space"] .kid-header,
[data-theme="space"] .admin-section,
[data-theme="space"] .stat-card,
[data-theme="space"] .card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="space"] .form input,
[data-theme="space"] .form select {
  background: #252050;
  color: var(--text);
  border-color: var(--border);
}

[data-theme="space"] .board-period {
  background: #252050;
  color: var(--text);
}

[data-theme="arcade"] .pin-key,
[data-theme="arcade"] .chore-card,
[data-theme="arcade"] .kid-header,
[data-theme="arcade"] .admin-section,
[data-theme="arcade"] .stat-card,
[data-theme="arcade"] .card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="arcade"] .form input,
[data-theme="arcade"] .form select {
  background: #2a1f45;
  color: var(--text);
  border-color: var(--border);
}

[data-theme="arcade"] .board-period {
  background: #2a1f45;
  color: var(--text);
}