/* ============================================================
   PULSE Design System — delade basskomponenter (2026-08-08)
   Extraherad från production/index.html. Domänspecifika kort
   (t.ex. BookingCard i Booking vs. i B2B) får se olika ut —
   det som delas här är knappar/fält/badges/typografi, inte
   varje UI-komponent. Se docs/superpowers/specs/2026-08-08-
   pulse-ecosystem-brutal-execution-plan.md.
   ============================================================ */

.mono, .stat-value, .time, .price {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--subtleForeground); font-weight: 400;
}
.display { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.01em; font-weight: 400; }
h1,h2,h3,h4 { font-weight: 400; letter-spacing: -0.01em; }

.btn {
  font-family: inherit; font-size: 15px; padding: 10px 20px;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  transition: transform 140ms cubic-bezier(0.23,1,0.32,1), background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { transform: none; opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--primaryForeground); }
.btn-primary:hover { background: var(--primaryHover); transform: translateY(-1px); }
.btn-secondary { background: var(--secondary); color: var(--secondaryForeground); }
.btn-secondary:hover { background: var(--secondaryHover); }
.btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); }
.btn-outline:hover { background: var(--muted); }
.btn-ghost { background: transparent; color: var(--mutedForeground); padding: 8px 14px; }
.btn-ghost:hover { color: var(--foreground); background: var(--accent-soft); }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }

.card {
  background: var(--surface);
  border: 1px solid var(--borderSubtle);
  border-radius: 16px; padding: 22px;
  box-shadow: var(--shadow);
}

.badge {
  font-size: 12px; padding: 4px 11px; border-radius: 20px;
  letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 5px;
}
.badge-success { background: var(--success-bg); color: var(--success-tx); }
.badge-warning { background: var(--warning-bg); color: var(--warning-tx); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-tx); }
.badge-dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; display:inline-block; }

.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--subtleForeground); margin-bottom: 7px;
}
.input, .textarea, .select {
  width: 100%; font-family: inherit; font-size: 15px; padding: 11px 14px;
  background: var(--surfaceElevated); border: 1px solid var(--borderSubtle);
  border-radius: 10px; color: var(--foreground);
  transition: border 0.15s ease, box-shadow 0.15s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 84px; }

.chip {
  font-size: 13px; padding: 6px 13px; border-radius: 20px;
  border: 1px solid var(--borderSubtle); background: transparent;
  color: var(--mutedForeground); cursor: pointer;
  transition: transform 140ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.chip:hover { border-color: var(--accent); color: var(--foreground); }
.chip:active { transform: scale(0.97); }
.chip.active { background: var(--accent); color: var(--accentForeground); border-color: var(--accent); }

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 46ch; margin-left: auto; margin-right: auto; line-height: 1.55;
  animation: emptyStateIn 260ms cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes emptyStateIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

#content > .grid > *, #content > .card {
  animation: contentEnter 320ms cubic-bezier(0.23,1,0.32,1) backwards;
}
#content > .grid > *:nth-child(1), #content > .card:nth-child(1) { animation-delay: 0ms; }
#content > .grid > *:nth-child(2), #content > .card:nth-child(2) { animation-delay: 40ms; }
#content > .grid > *:nth-child(3) { animation-delay: 80ms; }
@keyframes contentEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }