/* Happy Hippo design tokens + shared components */
:root {
  --hh-teal: #0099e8;
  --hh-teal-deep: #005eb8;
  --hh-blue: #0099e8;
  --hh-blue-dark: #005eb8;
  --hh-mint: #5EEAD4;
  --hh-pink: #DB2777;
  --hh-pink-soft: #F9A8D4;
  --hh-cream: #FFF8F0;
  --hh-ink: #102244;
  --hh-muted: #42506b;
  --hh-line: #dbe8f3;
  --hh-white: #ffffff;
  --hh-danger: #B42318;
  --hh-warning: #B54708;
  --hh-success: #067647;
  --hh-info: #026AA2;
  --hh-radius: 10px;
  --hh-font: "Nunito", "Trebuchet MS", "Segoe UI", sans-serif;
}

.hh-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #EEF6F4;
  color: var(--hh-teal-deep);
}
.hh-badge--success { background: #E7F8EF; color: var(--hh-success); }
.hh-badge--warning { background: #FEF4E6; color: var(--hh-warning); }
.hh-badge--danger { background: #FEECEC; color: var(--hh-danger); }
.hh-badge--info { background: #E8F4FC; color: var(--hh-info); }
.hh-badge--brand { background: #FDE8F2; color: var(--hh-pink); }
.hh-badge--neutral { background: #F1F3F3; color: var(--hh-muted); }

.hh-metric {
  background: var(--hh-white);
  border: 1px solid var(--hh-line);
  border-radius: var(--hh-radius);
  padding: 1rem 1.1rem;
}
.hh-metric__label { font-size: 12px; color: var(--hh-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hh-metric__value { font-size: 1.6rem; font-weight: 800; color: var(--hh-teal-deep); }

.hh-timeline { list-style: none; margin: 0; padding: 0; }
.hh-timeline li { position: relative; padding: 0.55rem 0 0.55rem 1rem; border-left: 2px solid var(--hh-mint); margin-left: 0.4rem; }
.hh-empty { text-align: center; padding: 2rem 1rem; background: var(--hh-cream); border-radius: var(--hh-radius); color: var(--hh-muted); }
.hh-alert { padding: 0.75rem 1rem; border-radius: var(--hh-radius); margin: 0.5rem 0; }
.hh-alert--warning { background: #FEF4E6; color: var(--hh-warning); }
.hh-alert--error { background: #FEECEC; color: var(--hh-danger); }
.hh-alert--success { background: #E7F8EF; color: var(--hh-success); }

.hh-progress { height: 8px; background: var(--hh-line); border-radius: 99px; overflow: hidden; }
.hh-progress span { display: block; height: 100%; background: var(--hh-pink); }

.hh-modal { position: fixed; inset: 0; background: rgba(19,78,74,0.35); display: none; align-items: center; justify-content: center; z-index: 100000; }
.hh-modal.is-open { display: flex; }
.hh-modal__card { background: #fff; border-radius: 12px; padding: 1.25rem; max-width: 480px; width: 92%; }

.hh-money { font-variant-numeric: tabular-nums; font-weight: 700; }

.hh-account { max-width: 640px; margin: 2rem auto; font-family: var(--hh-font); }
.hh-account__bar { background: var(--hh-teal); color: #fff; padding: 1rem 1.25rem; border-radius: 12px 12px 0 0; }