:root {
  --hf-color-bg: #f8faff;
  --hf-color-bg-app: #f8faff;
  --hf-color-surface: #ffffff;
  --hf-color-surface-muted: #f6f8fc;
  --hf-color-surface-soft: #fafaff;
  --hf-color-text: #141b3a;
  --hf-color-text-muted: #6f7892;
  --hf-color-border: #e5e8f1;
  --hf-color-primary: #625bf6;
  --hf-color-primary-strong: #5149df;
  --hf-color-primary-hover: #5149df;
  --hf-color-primary-soft: #f0efff;
  --hf-gradient-primary: linear-gradient(135deg, #6c63ff 0%, #5357df 100%);
  --hf-color-success: #18864b;
  --hf-color-warning: #b76a12;
  --hf-color-danger: #c33a47;
  --hf-color-info: #2d73c7;
  --hf-space-1: .25rem;
  --hf-space-2: .5rem;
  --hf-space-3: .75rem;
  --hf-space-4: 1rem;
  --hf-space-5: 1.25rem;
  --hf-space-6: 1.5rem;
  --hf-space-8: 2rem;
  --hf-radius-sm: .5rem;
  --hf-radius-md: .625rem;
  --hf-radius-lg: .75rem;
  --hf-radius-xl: .875rem;
  --hf-shadow-sm: 0 1px 2px rgb(20 27 58 / .025);
  --hf-shadow-md: 0 8px 22px rgb(20 27 58 / .05);
  --hf-shadow-card: 0 2px 10px rgb(20 27 58 / .035);
  --hf-font-size-xs: .75rem;
  --hf-font-size-sm: .8125rem;
  --hf-font-size-md: .875rem;
  --hf-font-size-lg: 1rem;
  --hf-font-size-xl: 1.25rem;
  --hf-line-height-ui: 1.55;
  --hf-heading-1-size: 18px;
  --hf-heading-2-size: 16px;
  --hf-heading-3-size: 14px;
  --hf-heading-4-size: 14px;
  --hf-heading-5-size: 14px;
  --hf-heading-6-size: 14px;
  --hf-text-size: 14px;
  --hf-text-weight: 500;
  --hf-heading-weight: 500;
  --hf-control-height: 2.875rem;
  --hf-control-radius: .625rem;
  --hf-control-font-size: .875rem;
  --hf-label-size: .8125rem;
  --hf-label-weight: 500;
  --hf-button-weight: 500;
  --hf-sidebar-width: 14.25rem;
  --hf-sidebar-collapsed: 4rem;
  --hf-topbar-height: 3.5rem;
  --hf-mobile-nav-height: 4.25rem;
  --hf-motion-fast: 120ms;
  --hf-motion-normal: 180ms;
  --hf-motion-slow: 240ms;
  --hf-ease: cubic-bezier(.2,.8,.2,1);
  --hf-z-dropdown: 30;
  --hf-z-sticky: 40;
  --hf-z-overlay: 80;
  --hf-z-modal: 90;
}