/* Hey, Jack! Design System v1.0 */
:root {
  --hj-cocoa-900: #332927;
  --hj-cocoa-700: #754c3b;
  --hj-rose-500: #d98387;
  --hj-rose-100: #f8eae8;
  --hj-cream-50: #fcfaf7;
  --hj-sage-500: #6e9b79;
  --hj-apricot-500: #c49755;
  --hj-white: #ffffff;
  --hj-text: var(--hj-cocoa-900);
  --hj-text-muted: #968d89;
  --hj-border: #ece7e3;
  --hj-success: var(--hj-sage-500);
  --hj-warning: var(--hj-apricot-500);
  --hj-font-brand: 'Pacifico', cursive;
  --hj-font-display: 'Playfair Display', serif;
  --hj-font-ui: 'DM Sans', sans-serif;
  --hj-radius-sm: 8px;
  --hj-radius-md: 12px;
  --hj-radius-lg: 16px;
  --hj-shadow-sm: 0 3px 12px rgba(64, 45, 39, 0.04);
  --hj-shadow-md: 0 8px 24px rgba(64, 45, 39, 0.10);
  --hj-space-1: 4px;
  --hj-space-2: 8px;
  --hj-space-3: 12px;
  --hj-space-4: 16px;
  --hj-space-5: 20px;
  --hj-space-6: 24px;
  --hj-space-8: 32px;
}

.hj-button {
  border: 0;
  border-radius: var(--hj-radius-sm);
  padding: 12px 17px;
  font: 600 12px var(--hj-font-ui);
  cursor: pointer;
}
.hj-button--primary { color: var(--hj-white); background: var(--hj-cocoa-900); }
.hj-button--soft { color: #965d5f; background: var(--hj-rose-100); }
.hj-card {
  background: var(--hj-white);
  border: 1px solid var(--hj-border);
  border-radius: var(--hj-radius-md);
  box-shadow: var(--hj-shadow-sm);
}