/* ===== playful ===== */
body {
  --font-heading: "M PLUS Rounded 1c", sans-serif;
  --font-body: "M PLUS Rounded 1c", sans-serif;
  --color-bg: #FFF6E9;
  --color-surface: #FFFFFF;
  --color-text: #3A2E1F;
  --color-text-muted: #8A7A63;
  --color-primary: #FF6B4A;
  --color-primary-hover: #E8532F;
  --color-primary-text: #FFFFFF;
  --color-primary-tint: #FFE9E2;
  --color-heading: #FF6B4A;
  --color-header-bg: #FFD23F;
  --color-header-text: #3A2E1F;
  --color-border: #FFE0B8;
  --color-danger: #E8536B;
  --color-danger-tint: #FFE5EA;
  --color-success: #2FAE7E;
  --radius-card: 20px;
  --radius-button: 999px;
  --shadow-card: 0 4px 0 #FFE0B8;
}

.app-header {
  position: relative;
  overflow: hidden;
}

.app-header h1::before {
  content: "🎉 ";
}

.app-header h1::after {
  content: " 🎉";
}

.primary-button {
  box-shadow: 0 4px 0 var(--color-primary-hover);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.primary-button:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--color-primary-hover);
}

.primary-button:active {
  transform: translateY(4px);
  box-shadow: none;
}

.secondary-button {
  border-width: 2px;
  box-shadow: 0 3px 0 var(--color-primary-tint);
}

.dashboard-card {
  border: 3px dashed var(--color-border);
}

@media (hover: hover) {
  .dashboard-card:hover {
    border: 3px dashed var(--color-primary) !important;
  }
}

.dashboard-card.tap-active {
  border: 3px dashed var(--color-primary);
}

.dashboard-value.pop-in {
  animation: playfulPop 0.4s ease;
}

@keyframes playfulPop {
  0% { transform: scale(0.7); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.history-item {
  border-width: 2px;
  border-style: dashed;
}

.history-item-total::after {
  content: " 💰";
}