:root {
  --hp-paper: #f3f6fa;
  --hp-sheet: #ffffff;
  --hp-ink: #102d39;
  --hp-muted: #526274;
  --hp-text-secondary: #526274;
  --hp-rule: #aebdcc;
  --hp-stroke: #dbe3ec;
  --hp-teal: #087f8c;
  --hp-pine: #147d64;
  --hp-ochre: #d39724;
  --hp-current: #d9f5ec;
  --hp-action: #087f8c;
  --hp-focus: #3155c6;
  --hp-danger: #b52d45;
  --hp-overlay: rgb(16 45 57 / 0.48);
  --hp-review-fill: #fff1d4;
  --hp-review-ink: #805313;
  --hp-neutral-fill: #e9eef5;
  --hp-neutral-ink: #34495e;
  --hp-in-progress-fill: #e4efff;
  --hp-in-progress-ink: #284ca5;
  --hp-complete-fill: #147d64;
  --hp-complete-ink: #ffffff;
  --hp-space-1: 4px;
  --hp-space-2: 8px;
  --hp-space-3: 12px;
  --hp-space-4: 16px;
  --hp-space-6: 24px;
  --hp-space-8: 32px;
  --hp-space-12: 48px;
  --hp-radius-mark: 8px;
  --hp-radius-control: 10px;
  --hp-radius-workbench: 20px;
  --hp-font-ui: "DM Sans", Arial, sans-serif;
  --hp-font-amount: Inter, Arial, sans-serif;
  --hp-font-code: "DM Sans", Arial, sans-serif;
  --hp-type-caption: 0.75rem;
  --hp-type-body: 0.9375rem;
  --hp-type-title: clamp(1.875rem, 3vw, 2.5rem);
  --hp-control-height: 44px;
  --hp-rail: #0a2d35;
  --hp-rail-ink: #f0fbff;
  --hp-accent-cobalt: #5367e8;
  --hp-accent-lilac: #ede9ff;
  --hp-accent-mint: #d9f5ec;
  --hp-surface-raised: #ffffff;
  --hp-shadow-surface: 0 8px 28px rgb(16 45 57 / 0.05);
  --hp-motion-feedback: 160ms ease;
  --hp-text-accent: #076d79;
  --hp-control-border: #748499;
}

/* Compatibility names stay scoped: adopting the kit does not retheme an app. */
.hp-ui {
  --paper: var(--hp-paper);
  --sheet: var(--hp-sheet);
  --ink: var(--hp-ink);
  --muted: var(--hp-text-secondary);
  --rule: var(--hp-rule);
  --stroke: var(--hp-stroke);
  --teal: var(--hp-teal);
  --pine: var(--hp-pine);
  --ochre: var(--hp-ochre);
  --current: var(--hp-current);
  --primary: var(--hp-action);
  --action: var(--hp-action);
  --focus: var(--hp-focus);
  --success: var(--hp-pine);
  --verified: var(--hp-pine);
  --info: var(--hp-teal);
  --danger: var(--hp-danger);
  --warning: var(--hp-review-ink);
  --review-fill: var(--hp-review-fill);
  --review-ink: var(--hp-review-ink);
  --overlay: var(--hp-overlay);
  --space: var(--hp-space-1);
  --radius: var(--hp-radius-mark);
  --type-ui: var(--font-ui, var(--hp-font-ui));
  --type-amount: var(--font-amount, var(--hp-font-amount));
  --motion-plane: var(--hp-motion-feedback);
}