/* HostHavn Design System v1
   Canonical modal and form tokens for customer onboarding. */

:root {
  /* Typography */
  --hh-font-family: Inter, "Open Sans", Arial, sans-serif;
  --hh-font-size-modal-title: 1.5rem;
  --hh-font-size-section-title: 1.125rem;
  --hh-font-size-body: 0.95rem;
  --hh-font-size-small: 0.875rem;
  --hh-font-size-muted: 0.8125rem;
  --hh-font-size-label: 0.875rem;
  --hh-font-weight-title: 700;
  --hh-font-weight-section: 650;
  --hh-font-weight-label: 650;
  --hh-font-weight-button: 650;
  --hh-line-height-body: 1.55;

  /* Color */
  --hh-color-text: #1f2937;
  --hh-color-text-strong: #111827;
  --hh-color-muted: #6b7280;
  --hh-color-border: #d1d5db;
  --hh-color-border-soft: #e5e7eb;
  --hh-color-surface: #ffffff;
  --hh-color-surface-soft: #f8fafc;
  --hh-color-brand: #0f7a40;
  --hh-color-brand-dark: #0b5f32;
  --hh-color-action: #0f7a40;
  --hh-color-action-dark: #0d6b38;
  --hh-color-success: #0f8f45;
  --hh-color-success-bg: #f0fdf4;
  --hh-color-success-border: #bbf7d0;
  --hh-color-error: #dc2626;
  --hh-color-error-bg: #fffafa;
  --hh-color-error-border: #fca5a5;
  --hh-color-info-bg: #eff6ff;
  --hh-color-info-border: #bfdbfe;

  /* Spacing */
  --hh-space-1: 0.25rem;
  --hh-space-2: 0.5rem;
  --hh-space-3: 0.75rem;
  --hh-space-4: 1rem;
  --hh-space-5: 1.25rem;
  --hh-space-6: 1.5rem;
  --hh-space-8: 2rem;

  /* Shape and elevation */
  --hh-radius-sm: 0.5rem;
  --hh-radius-md: 0.625rem;
  --hh-radius-lg: 1rem;
  --hh-shadow-modal: 0 20px 60px rgba(15, 23, 42, 0.28);
  --hh-shadow-card: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(15,122,64,0.12);

  /* Modal */
  --hh-modal-width: 600px;
  --hh-modal-padding-x: 1.5rem;
  --hh-modal-header-padding: 1.5rem 1.5rem 1rem;
  --hh-modal-step-padding: 1.5rem;
  --hh-modal-footer-padding: 1rem 0 0;
  --hh-modal-section-gap: 1.25rem;

  /* Form */
  --hh-input-height: 2.75rem;
  --hh-input-padding: 0.65rem 0.75rem;
  --hh-input-radius: var(--hh-radius-sm);
  --hh-input-border: 1px solid var(--hh-color-border);
  --hh-focus-ring: 0 0 0 3px rgba(15, 122, 64, 0.12);

  /* Buttons */
  --hh-button-height: 2.75rem;
  --hh-button-padding: 0 1.5rem;
  --hh-button-radius: 0.625rem;
  --hh-button-primary-bg: linear-gradient(135deg, #0f7a40 0%, #138f4a 100%);
  --hh-button-primary-bg-hover: linear-gradient(135deg, #0d6b38 0%, #0f7a40 100%);
  --hh-button-primary-shadow: 0 4px 16px -3px rgba(15,122,64,0.38);
}

.hh-ds-card {
  background: var(--hh-color-surface);
  border: 1px solid var(--hh-color-border-soft);
  border-radius: var(--hh-radius-md);
  box-shadow: var(--hh-shadow-card);
  padding: var(--hh-space-4);
}

.hh-ds-helper {
  color: var(--hh-color-muted);
  font-size: var(--hh-font-size-muted);
  line-height: var(--hh-line-height-body);
}