/*
 * v2 design system — small custom CSS layered on top of Tailwind.
 *
 * Tailwind is loaded via CDN for now (fast iteration, no build step).
 * When the redesign rollout is complete we'll switch to a compiled
 * tailwind.css for production performance.
 *
 * Anything that's a Tailwind utility class lives in the markup.
 * Anything that needs a CSS feature Tailwind doesn't ship by default
 * (font tabular-nums, animated dot, custom hairline ring) lives here.
 */

:root { color-scheme: dark; }

html, body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: hsl(240 10% 3.9%);
  color: rgb(244 244 245);
}

/* Tabular numerics for amounts — keeps columns aligned */
.num {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* Hairline border that survives both dark/light bg via inset shadow */
.ring-line {
  box-shadow: inset 0 0 0 1px hsl(240 4% 14%);
}

/* Pulsing earning indicator */
.pulse-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #78BE43;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px rgba(120, 190, 67, 0.18);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/*
 * Brand button — used a lot, so a small CSS class keeps markup tidy.
 * Tailwind equivalent would need ~6 utility classes per button.
 */
.btn-brand {
  background: #78BE43;
  color: rgb(9 9 11);
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  transition: background 150ms;
}
.btn-brand:hover { background: #5fa030; }
.btn-brand:disabled { background: rgb(63 63 70); color: rgb(161 161 170); cursor: not-allowed; }

.btn-ghost {
  background: hsl(240 6% 6%);
  box-shadow: inset 0 0 0 1px hsl(240 4% 14%);
  color: rgb(244 244 245);
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  transition: box-shadow 150ms;
}
.btn-ghost:hover { box-shadow: inset 0 0 0 2px hsl(240 4% 30%); }

/* Form inputs — minimum-friction style for the redesign */
.input-v2 {
  background: hsl(240 6% 6%);
  box-shadow: inset 0 0 0 1px hsl(240 4% 14%);
  color: rgb(244 244 245);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  width: 100%;
  outline: none;
  transition: box-shadow 150ms;
}
.input-v2:focus {
  box-shadow: inset 0 0 0 2px #78BE43;
}
.input-v2::placeholder { color: rgb(82 82 91); }

/* Status pill — small uppercase badge with color-tinted background */
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
}
.pill-brand   { background: rgba(120, 190, 67, 0.15); color: rgb(167 215 119); }
.pill-amber   { background: rgba(245, 158, 11, 0.15); color: rgb(252 211 77); }
.pill-violet  { background: rgba(139, 92, 246, 0.15); color: rgb(196 181 253); }
.pill-zinc    { background: hsl(240 4% 14%);          color: rgb(212 212 216); }
.pill-rose    { background: rgba(244, 63, 94, 0.15);  color: rgb(252 165 165); }

/* Alert banner — used for warnings (TOTP not enrolled, etc) */
.alert-v2 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
}
.alert-v2.warn  { background: rgba(245, 158, 11, 0.08); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25); color: rgb(252 211 77); }
.alert-v2.error { background: rgba(244, 63, 94, 0.08);  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.25);  color: rgb(252 165 165); }
.alert-v2.ok    { background: rgba(120, 190, 67, 0.08); box-shadow: inset 0 0 0 1px rgba(120, 190, 67, 0.25); color: rgb(167 215 119); }