:root {
  /* Brand */
  --qa-brand-logo-tone: #111111;
  --qa-brand-primary: #FF9CCA;

  /* Colors - semantic */
  --qa-color-primary: #FF9CCA;
  --qa-color-danger: #FF7070;
  --qa-color-warning: #FFC803;
  --qa-color-success: #3ACF08;
  --qa-color-purple: #A688FD;
  --qa-color-orange: #FFA319;
  --qa-color-info: #6BA4F5;

  /* Colors - neutral */
  --qa-color-white: #FFFFFF;
  --qa-color-bg: #F3F5F8;
  --qa-color-line: #E2E2E2;
  --qa-color-gray: #CCCCCC;
  --qa-color-cool-gray: #CECED2;

  /* Colors - observed app text */
  --qa-color-text-main: #17235D;
  --qa-color-text-sub: #7781A3;
  --qa-color-text-disabled: #AAB1C9;

  /* Typography family */
  --qa-font-cn: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --qa-font-num: "Rubik", "PingFang SC", "Helvetica Neue", sans-serif;

  /* Typography size */
  --qa-font-heading-1: 20px;
  --qa-font-heading-2: 18px;
  --qa-font-body-large: 16px;
  --qa-font-body-medium: 14px;
  --qa-font-body-small: 12px;
  --qa-font-mini: 10px;

  /* Typography line-height */
  --qa-line-heading-1: 24px;
  --qa-line-heading-2: 20px;
  --qa-line-body-large: 18px;
  --qa-line-body-medium: 16px;
  --qa-line-body-small: 14px;
  --qa-line-mini: 12px;

  /* Typography weight */
  --qa-weight-light: 300;
  --qa-weight-regular: 400;
  --qa-weight-medium: 500;
  --qa-weight-semibold: 600;

  /* Layout */
  --qa-canvas-width: 375px;
  --qa-canvas-height: 812px;
  --qa-space-page-x: 18px;
  --qa-status-bar-height: 44px;
  --qa-nav-bar-height: 50px;
  --qa-tab-bar-height: 56px;
  --qa-home-indicator-height: 34px;

  /* Spacing scale */
  --qa-space-2: 2px;
  --qa-space-4: 4px;
  --qa-space-6: 6px;
  --qa-space-8: 8px;
  --qa-space-10: 10px;
  --qa-space-12: 12px;
  --qa-space-14: 14px;
  --qa-space-16: 16px;
  --qa-space-18: 18px;
  --qa-space-20: 20px;
  --qa-space-24: 24px;

  /* Radius */
  --qa-radius-xs: 6px;
  --qa-radius-sm: 10px;
  --qa-radius-md: 14px;
  --qa-radius-card: 18px;
  --qa-radius-sheet: 24px;
  --qa-radius-pill: 999px;

  /* Component size */
  --qa-button-height: 52px;
  --qa-button-height-sm: 36px;
  --qa-input-height: 52px;
  --qa-nav-icon-size: 24px;
  --qa-tab-icon-size: 24px;

  /* Effects */
  --qa-shadow-card: 0 3px 10px rgba(23, 35, 93, 0.04);
  --qa-shadow-float: 0 8px 24px rgba(23, 35, 93, 0.08);
  --qa-shadow-primary: 0 10px 24px rgba(255, 156, 202, 0.28);
  --qa-overlay: rgba(15, 18, 48, 0.42);
  --qa-toast-bg: rgba(20, 24, 42, 0.86);

  /* Motion */
  --qa-motion-fast: 160ms;
  --qa-motion-base: 220ms;
  --qa-motion-slow: 320ms;
  --qa-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}