/* ============================================================
   星火UI 设计令牌 (Design Tokens)
   所有颜色、尺寸、间距、圆角、阴影统一在这里定义
   对标 Vant Weapp 简洁风格，主色 #3b82f6
   ============================================================ */

:root {
  /* ========== 颜色系统 - 品牌色 ========== */
  --xh-primary-50: #eff6ff;
  --xh-primary-100: #dbeafe;
  --xh-primary-200: #bfdbfe;
  --xh-primary-300: #93c5fd;
  --xh-primary-400: #60a5fa;
  --xh-primary-500: #3b82f6;   /* 主色 - Vant Blue */
  --xh-primary-600: #2563eb;
  --xh-primary-700: #1d4ed8;
  --xh-primary-800: #1e40af;
  --xh-primary-900: #1e3a8a;

  /* ========== 颜色系统 - 功能色 ========== */
  --xh-success-50: #ecfdf5;
  --xh-success-100: #d1fae5;
  --xh-success-200: #a7f3d0;
  --xh-success-500: #07c160;   /* Vant Green */
  --xh-success-600: #059669;
  --xh-success-700: #047857;

  --xh-warning-50: #fffbeb;
  --xh-warning-100: #fef3c7;
  --xh-warning-200: #fde68a;
  --xh-warning-500: #ff976a;   /* Vant Orange */
  --xh-warning-600: #f97316;
  --xh-warning-700: #ea580c;

  --xh-danger-50: #fef2f2;
  --xh-danger-100: #fee2e2;
  --xh-danger-200: #fecaca;
  --xh-danger-500: #ee0a24;   /* Vant Red */
  --xh-danger-600: #dc2626;
  --xh-danger-700: #b91c1c;

  --xh-info-50: #eff6ff;
  --xh-info-100: #dbeafe;
  --xh-info-500: #3b82f6;
  --xh-info-600: #2563eb;
  --xh-info-700: #1d4ed8;

  /* ========== 颜色系统 - 中性色 ========== */
  --xh-gray-50: #f7f8fa;
  --xh-gray-100: #f2f3f5;
  --xh-gray-200: #ebedf0;
  --xh-gray-300: #dcdee0;
  --xh-gray-400: #c8c9cc;
  --xh-gray-500: #969799;
  --xh-gray-600: #646566;
  --xh-gray-700: #323233;
  --xh-gray-800: #1e1e1e;
  --xh-gray-900: #000000;

  /* ========== 文字颜色 ========== */
  --xh-text-color: var(--xh-gray-800);         /* 主文字 */
  --xh-text-color-secondary: var(--xh-gray-600); /* 常规文字 */
  --xh-text-color-placeholder: var(--xh-gray-400); /* 次要文字/占位 */
  --xh-text-color-disabled: var(--xh-gray-300);   /* 禁用文字 */
  --xh-text-color-inverse: #ffffff;              /* 反色文字 */
  --xh-text-color-link: var(--xh-primary-500);   /* 链接文字 */
  --xh-active-color: var(--xh-gray-200);         /* 点击态背景 */

  /* ========== 背景色 ========== */
  --xh-background: var(--xh-gray-50);           /* 页面背景 */
  --xh-background-light: #ffffff;               /* 卡片/内容背景 */
  --xh-background-disabled: var(--xh-gray-100); /* 禁用背景 */
  --xh-overlay-color: rgba(0, 0, 0, 0.7);       /* 遮罩层 */

  /* ========== 边框色 ========== */
  --xh-border-color: var(--xh-gray-200);
  --xh-border-color-light: var(--xh-gray-100);
  --xh-border-color-dark: var(--xh-gray-300);

  /* ========== 字体系统 ========== */
  --xh-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --xh-font-mono: "SF Mono", Monaco, Consolas, "Cascadia Code", monospace;

  --xh-font-size-xs: 10px;
  --xh-font-size-sm: 12px;
  --xh-font-size-base: 14px;
  --xh-font-size-md: 14px;
  --xh-font-size-lg: 16px;
  --xh-font-size-xl: 18px;
  --xh-font-size-2xl: 20px;
  --xh-font-size-3xl: 24px;
  --xh-font-size-4xl: 32px;

  --xh-font-weight-normal: 400;
  --xh-font-weight-medium: 500;
  --xh-font-weight-semibold: 600;
  --xh-font-weight-bold: 700;

  --xh-line-height-xs: 1;
  --xh-line-height-sm: 1.25;
  --xh-line-height-base: 1.5;
  --xh-line-height-lg: 1.75;

  /* ========== 间距系统 (4px基数) ========== */
  --xh-padding-base: 4px;
  --xh-padding-xs: 8px;
  --xh-padding-sm: 12px;
  --xh-padding-md: 16px;
  --xh-padding-lg: 24px;
  --xh-padding-xl: 32px;

  /* ========== 圆角系统 ========== */
  --xh-border-radius-none: 0;
  --xh-border-radius-sm: 4px;
  --xh-border-radius-md: 8px;     /* 标准圆角8px */
  --xh-border-radius-lg: 12px;
  --xh-border-radius-xl: 16px;
  --xh-border-radius-2xl: 20px;
  --xh-border-radius-max: 999px;

  /* ========== 阴影系统 ========== */
  --xh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --xh-shadow-md: 0 4px 12px rgba(100, 101, 102, 0.12);
  --xh-shadow-lg: 0 8px 24px rgba(100, 101, 102, 0.16);
  --xh-shadow-xl: 0 12px 32px rgba(100, 101, 102, 0.2);

  /* ========== 动效 ========== */
  --xh-animation-duration-fast: 0.15s;
  --xh-animation-duration-base: 0.3s;
  --xh-animation-duration-slow: 0.5s;
  --xh-animation-timing-function-enter: ease-out;
  --xh-animation-timing-function-leave: ease-in;

  /* ========== Z-index 层级 ========== */
  --xh-z-index-popup: 2000;
  --xh-z-index-toast: 2010;
  --xh-z-index-notify: 2020;
  --xh-z-index-overlay: 2030;
  --xh-z-index-modal: 2040;
  --xh-z-index-popover: 2050;
  --xh-z-index-actionsheet: 2060;
  --xh-z-index-tooltip: 2070;

  /* ========== 组件专用令牌 ========== */
  --xh-cell-font-size: var(--xh-font-size-md);
  --xh-cell-line-height: 24px;
  --xh-cell-vertical-padding: 12px;
  --xh-cell-horizontal-padding: var(--xh-padding-md);
  --xh-cell-background: var(--xh-background-light);
  --xh-cell-active-color: var(--xh-active-color);

  --xh-button-default-height: 44px;
  --xh-button-default-font-size: var(--xh-font-size-md);
  --xh-button-default-border-radius: var(--xh-border-radius-md);
  --xh-button-mini-height: 24px;
  --xh-button-mini-padding: 0 8px;
  --xh-button-mini-font-size: var(--xh-font-size-xs);
  --xh-button-small-height: 32px;
  --xh-button-small-font-size: var(--xh-font-size-sm);
  --xh-button-large-height: 50px;
  --xh-button-large-font-size: var(--xh-font-size-lg);
  --xh-button-round-border-radius: var(--xh-border-radius-max);

  --xh-navbar-height: 46px;
  --xh-navbar-background: var(--xh-background-light);
  --xh-navbar-arrow-color: var(--xh-text-color);
  --xh-navbar-title-font-size: var(--xh-font-size-lg);
  --xh-navbar-title-font-weight: var(--xh-font-weight-medium);
  --xh-navbar-title-line-height: 20px;

  --xh-tabbar-height: 50px;
  --xh-tabbar-background: var(--xh-background-light);
  --xh-tabbar-item-font-size: var(--xh-font-size-xs);
  --xh-tabbar-item-active-color: var(--xh-primary-500);
  --xh-tabbar-item-inactive-color: var(--xh-gray-500);

  --xh-card-padding: var(--xh-padding-md) var(--xh-padding-md) var(--xh-padding-sm);
  --xh-card-font-size: var(--xh-font-size-md);
  --xh-card-title-font-size: var(--xh-font-size-lg);
  --xh-card-background: var(--xh-background-light);
  --xh-card-border-radius: var(--xh-border-radius-lg);

  /* ========== 标题系统（微信小程序风格） ========== */
  /* 页面大标题 */
  --xh-title-page-size: 18px;
  --xh-title-page-weight: 600;
  --xh-title-page-color: var(--xh-gray-800);    /* #1e1e1e 深黑 */
  --xh-title-page-margin: 16px 0 12px;
  --xh-title-page-line-height: 1.4;

  /* 卡片标题 */
  --xh-title-card-size: 16px;
  --xh-title-card-weight: 500;
  --xh-title-card-color: var(--xh-gray-800);    /* #323233 */
  --xh-title-card-margin: 0 0 12px;
  --xh-title-card-line-height: 1.4;

  /* 次级/区块标题 */
  --xh-title-section-size: 14px;
  --xh-title-section-weight: 500;
  --xh-title-section-color: var(--xh-gray-800);  /* #323233 */
  --xh-title-section-margin: 0 0 8px;
  --xh-title-section-line-height: 1.5;

  /* 辅助文字/次要标题 */
  --xh-title-sub-size: 12px;
  --xh-title-sub-weight: 400;
  --xh-title-sub-color: var(--xh-gray-500);     /* #969799 灰 */
  --xh-title-sub-line-height: 1.5;

  /* 正文 */
  --xh-body-size: 14px;
  --xh-body-weight: 400;
  --xh-body-color: var(--xh-gray-700);          /* #323233 */
  --xh-body-line-height: 1.6;

  --xh-tag-default-color: var(--xh-gray-500);
  --xh-tag-primary-color: var(--xh-primary-500);
  --xh-tag-success-color: var(--xh-success-500);
  --xh-tag-danger-color: var(--xh-danger-500);
  --xh-tag-warning-color: var(--xh-warning-500);
  --xh-tag-padding: 2px 8px;
  --xh-tag-font-size: var(--xh-font-size-sm);
  --xh-tag-medium-padding: 4px 10px;
  --xh-tag-large-padding: 6px 12px;
  --xh-tag-border-radius: 4px;
  --xh-tag-round-border-radius: var(--xh-border-radius-max);

  --xh-input-height: 44px;
  --xh-input-default-font-size: var(--xh-font-size-md);
  --xh-input-error-color: var(--xh-danger-500);
  --xh-input-disabled-color: var(--xh-gray-500);
  --xh-input-disabled-background: var(--xh-background);

  --xh-empty-padding: 80px 0;
  --xh-empty-image-size: 160px;
  --xh-empty-description-font-size: var(--xh-font-size-md);
  --xh-empty-description-color: var(--xh-gray-500);
  --xh-empty-description-line-height: 20px;

  /* ========== 渐变 ========== */
  --xh-gradient-primary: linear-gradient(135deg, var(--xh-primary-400) 0%, var(--xh-primary-600) 100%);
  --xh-gradient-success: linear-gradient(135deg, var(--xh-success-400) 0%, var(--xh-success-600) 100%);
  --xh-gradient-warning: linear-gradient(135deg, var(--xh-warning-400) 0%, var(--xh-warning-600) 100%);
  --xh-gradient-danger: linear-gradient(135deg, var(--xh-danger-400) 0%, var(--xh-danger-600) 100%);

  /* ========== 旧版ui-前缀兼容 (向后兼容) ========== */
  --ui-primary-50: var(--xh-primary-50);
  --ui-primary-100: var(--xh-primary-100);
  --ui-primary-200: var(--xh-primary-200);
  --ui-primary-300: var(--xh-primary-300);
  --ui-primary-400: var(--xh-primary-400);
  --ui-primary-500: var(--xh-primary-500);
  --ui-primary-600: var(--xh-primary-600);
  --ui-primary-700: var(--xh-primary-700);
  --ui-primary-800: var(--xh-primary-800);
  --ui-primary-900: var(--xh-primary-900);
  --ui-success-50: var(--xh-success-50);
  --ui-success-100: var(--xh-success-100);
  --ui-success-500: var(--xh-success-500);
  --ui-success-600: var(--xh-success-600);
  --ui-success-700: var(--xh-success-700);
  --ui-warning-50: var(--xh-warning-50);
  --ui-warning-100: var(--xh-warning-100);
  --ui-warning-500: var(--xh-warning-500);
  --ui-warning-600: var(--xh-warning-600);
  --ui-warning-700: var(--xh-warning-700);
  --ui-danger-50: var(--xh-danger-50);
  --ui-danger-100: var(--xh-danger-100);
  --ui-danger-500: var(--xh-danger-500);
  --ui-danger-600: var(--xh-danger-600);
  --ui-danger-700: var(--xh-danger-700);
  --ui-info-50: var(--xh-info-50);
  --ui-info-100: var(--xh-info-100);
  --ui-info-500: var(--xh-info-500);
  --ui-info-600: var(--xh-info-600);
  --ui-info-700: var(--xh-info-700);
  --ui-gray-50: var(--xh-gray-50);
  --ui-gray-100: var(--xh-gray-100);
  --ui-gray-200: var(--xh-gray-200);
  --ui-gray-300: var(--xh-gray-300);
  --ui-gray-400: var(--xh-gray-400);
  --ui-gray-500: var(--xh-gray-500);
  --ui-gray-600: var(--xh-gray-600);
  --ui-gray-700: var(--xh-gray-700);
  --ui-gray-800: var(--xh-gray-800);
  --ui-gray-900: var(--xh-gray-900);
  --ui-text-primary: var(--xh-text-color);
  --ui-text-regular: var(--xh-text-color-secondary);
  --ui-text-secondary: var(--xh-text-color-placeholder);
  --ui-text-placeholder: var(--xh-text-color-placeholder);
  --ui-text-disabled: var(--xh-text-color-disabled);
  --ui-text-inverse: var(--xh-text-color-inverse);
  --ui-bg-page: var(--xh-background);
  --ui-bg-card: var(--xh-background-light);
  --ui-bg-mask: var(--xh-overlay-color);
  --ui-bg-disabled: var(--xh-background-disabled);
  --ui-border-color: var(--xh-border-color);
  --ui-border-light: var(--xh-border-color-light);
  --ui-border-dark: var(--xh-border-color-dark);
  --ui-font-family: var(--xh-font-family);
  --ui-font-mono: var(--xh-font-mono);
  --ui-font-size-xs: var(--xh-font-size-xs);
  --ui-font-size-sm: var(--xh-font-size-sm);
  --ui-font-size-base: var(--xh-font-size-base);
  --ui-font-size-md: var(--xh-font-size-md);
  --ui-font-size-lg: var(--xh-font-size-lg);
  --ui-font-size-xl: var(--xh-font-size-xl);
  --ui-font-size-2xl: var(--xh-font-size-2xl);
  --ui-font-size-3xl: var(--xh-font-size-3xl);
  --ui-font-size-4xl: var(--xh-font-size-4xl);
  --ui-font-weight-normal: var(--xh-font-weight-normal);
  --ui-font-weight-medium: var(--xh-font-weight-medium);
  --ui-font-weight-semibold: var(--xh-font-weight-semibold);
  --ui-font-weight-bold: var(--xh-font-weight-bold);
  --ui-line-height-tight: var(--xh-line-height-sm);
  --ui-line-height-normal: var(--xh-line-height-base);
  --ui-line-height-relaxed: var(--xh-line-height-lg);
  --ui-spacing-0: 0;
  --ui-spacing-1: 4px;
  --ui-spacing-2: 8px;
  --ui-spacing-3: 12px;
  --ui-spacing-4: 16px;
  --ui-spacing-5: 20px;
  --ui-spacing-6: 24px;
  --ui-spacing-8: 32px;
  --ui-spacing-10: 40px;
  --ui-spacing-12: 48px;
  --ui-spacing-16: 64px;
  --ui-radius-none: 0;
  --ui-radius-sm: 4px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-xl: 16px;
  --ui-radius-2xl: 20px;
  --ui-radius-full: 9999px;
  --ui-shadow-sm: var(--xh-shadow-sm);
  --ui-shadow-md: var(--xh-shadow-md);
  --ui-shadow-lg: var(--xh-shadow-lg);
  --ui-shadow-xl: var(--xh-shadow-xl);
  --ui-shadow-card: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  --ui-shadow-card-hover: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
  --ui-transition-fast: 0.15s ease;
  --ui-transition-normal: 0.25s ease;
  --ui-transition-slow: 0.35s ease;

  /* 标题系统（微信小程序风格）- ui前缀别名 */
  --ui-title-page-size: var(--xh-title-page-size);
  --ui-title-page-weight: var(--xh-title-page-weight);
  --ui-title-page-color: var(--xh-title-page-color);
  --ui-title-card-size: var(--xh-title-card-size);
  --ui-title-card-weight: var(--xh-title-card-weight);
  --ui-title-card-color: var(--xh-title-card-color);
  --ui-title-section-size: var(--xh-title-section-size);
  --ui-title-section-weight: var(--xh-title-section-weight);
  --ui-title-section-color: var(--xh-title-section-color);
  --ui-title-sub-size: var(--xh-title-sub-size);
  --ui-title-sub-weight: var(--xh-title-sub-weight);
  --ui-title-sub-color: var(--xh-title-sub-color);
  --ui-body-size: var(--xh-body-size);
  --ui-body-weight: var(--xh-body-weight);
  --ui-body-color: var(--xh-body-color);
  --ui-z-dropdown: 1000;
  --ui-z-sticky: 1020;
  --ui-z-fixed: 1030;
  --ui-z-modal-backdrop: 1040;
  --ui-z-modal: 1050;
  --ui-z-popover: 1060;
  --ui-z-tooltip: 1070;
  --ui-z-toast: 1080;
  --ui-c-header-height: 48px;
  --ui-c-tabbar-height: 56px;
  --ui-c-max-width: 750px;
  --ui-c-padding-x: 12px;
  --ui-c-card-radius: var(--xh-border-radius-lg); /* 微信小程序风格：C端主卡片标准圆角12px */
  --ui-c-btn-radius: var(--xh-border-radius-max);
  --ui-gradient-primary: var(--xh-gradient-primary);
  --ui-gradient-success: var(--xh-gradient-success);
  --ui-gradient-warning: var(--xh-gradient-warning);
  --ui-gradient-danger: var(--xh-gradient-danger);
  --ui-b-sidebar-width: 240px;
  --ui-b-header-height: 56px;
  --ui-b-content-padding: 20px;
  --ui-b-card-radius: var(--xh-border-radius-md);
  --ui-b-btn-radius: var(--xh-border-radius-sm);
}