/*
 * 锦宸设备管家设计规范 v1
 * 来源：public/design-system.json（用户于 2026-09-02 确认）
 * 仅统一视觉层级，不改变业务结构或交互规则。
 */

html:root {
  --ds-page-title-size: 28px;
  --ds-section-title-size: 20px;
  --ds-card-title-size: 16px;
  --ds-metric-size: 26px;
  --ds-body-size: 14px;
  --ds-label-size: 15px;
  --ds-helper-size: 12px;
  --ds-title-weight: 700;
  --ds-body-weight: 400;
  --ds-body-line-height: 1.5;
  --ds-nav-icon-size: 21px;
  --ds-action-icon-size: 16px;
  --ds-metric-icon-size: 24px;
  --ds-icon-container-size: 36px;
  --ds-icon-stroke: 1.7;
  --ds-card-padding: 16px;
  --ds-gap: 14px;
  --ds-card-radius: 18px;
  --ds-control-radius: 12px;
  --ds-input-height: 42px;
  --ds-button-height: 40px;
  --ds-primary: #765f79;
  --ds-page: #f4f1f5;
  --ds-surface: #ffffff;
  --ds-title: #1f2937;
  --ds-body: #4b5563;
  --ds-muted: #8c919c;
  --ds-border: #ded9e1;

  /* 将最终配置接到业务页现有的颜色变量，避免旧主题覆盖已确认规范。 */
  --primary: var(--ds-primary);
  --primary-rgb: 118, 95, 121;
  --primary-hover: color-mix(in srgb, var(--ds-primary) 82%, #000000);
  --primary-light: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface));
  --primary-ink: color-mix(in srgb, var(--ds-primary) 82%, #000000);
  --primary-text: var(--primary-ink);
  --accent: var(--ds-primary);
  --accent-rgb: 118, 95, 121;
  --page: var(--ds-page);
  --bg-page: var(--ds-page);
  --surface: var(--ds-surface);
  --surface-solid: var(--ds-surface);
  --surface-soft: color-mix(in srgb, var(--ds-page) 58%, var(--ds-surface));
  --surface-tint: color-mix(in srgb, var(--ds-primary) 7%, var(--ds-surface));
  --text: var(--ds-body);
  --text-title: var(--ds-title);
  --text-body: var(--ds-body);
  --text-soft: var(--ds-body);
  --muted: var(--ds-muted);
  --text-muted: var(--ds-muted);
  --line: var(--ds-border);
  --border-color: var(--ds-border);
  --radius: var(--ds-control-radius);
  --radius-md: var(--ds-control-radius);
}

body {
  color: var(--ds-body);
  font-size: var(--ds-body-size);
  font-weight: var(--ds-body-weight);
  line-height: var(--ds-body-line-height);
}

.topbar h1 {
  color: var(--ds-title);
  font-size: var(--ds-page-title-size);
  font-weight: var(--ds-title-weight);
  line-height: 1.2;
}

.section-heading h2,
.section-header h2,
.market-head h2,
.customer-review-toolbar h2,
.availability-hero h2 {
  color: var(--ds-title);
  font-size: var(--ds-section-title-size);
  font-weight: var(--ds-title-weight);
  line-height: 1.25;
}

.section-header h3,
.detail-section-heading h3,
.chart-title strong,
.inventory-card h3,
.customer-card h3,
.todo-card strong,
.timeline-item h4,
.finance-category {
  font-size: var(--ds-card-title-size);
  font-weight: var(--ds-title-weight);
}

.form-field > label,
.form-field > span,
.checkbox-field,
.filter-row label > span,
.chart-range-controls label > span,
.nav-item,
.primary-button,
.secondary-button,
.card-action,
.icon-text-button,
.text-button,
.danger-button,
.detail-edit-button {
  font-size: var(--ds-label-size);
}

.eyebrow,
.section-note,
.section-heading p,
.metric-card small,
.metric-card .metric-label,
.table-card th,
.finance-table th,
.customer-card small,
.inventory-card small,
.timeline-meta,
.subtle,
.micro-copy {
  font-size: var(--ds-helper-size);
}

.metric-card > strong,
.metric-card .metric-value,
.finance-core-grid .metric-card strong,
.inventory-metric-card strong,
.customer-metrics article strong {
  font-size: var(--ds-metric-size);
  font-weight: var(--ds-title-weight);
  line-height: 1.15;
}

.nav-icon,
.nav-icon svg {
  width: var(--ds-nav-icon-size);
  height: var(--ds-nav-icon-size);
}

.nav-icon svg,
.ui-icon,
.metric-icon svg,
.summary-metric-icon svg,
.summary-primary-icon svg {
  stroke-width: var(--ds-icon-stroke);
}

.primary-button .ui-icon,
.secondary-button .ui-icon,
.card-action .ui-icon,
.icon-text-button .ui-icon,
.text-button .ui-icon,
.danger-button .ui-icon,
.section-header-actions .ui-icon,
.toolbar-actions .ui-icon {
  width: var(--ds-action-icon-size);
  height: var(--ds-action-icon-size);
}

.metric-icon,
.summary-metric-icon {
  width: var(--ds-icon-container-size);
  height: var(--ds-icon-container-size);
  border-radius: var(--ds-control-radius);
}

.metric-icon svg,
.summary-metric-icon .ui-icon {
  width: var(--ds-metric-icon-size);
  height: var(--ds-metric-icon-size);
}

.card-section,
.table-card,
.workbench-panel,
.dashboard-summary,
.metric-card,
.finance-card,
.inventory-card,
.customer-card,
.todo-card,
.chart-card,
.availability-detail-panel,
.customer-review-detail,
.inventory-preview,
.detail-section-card {
  border-radius: var(--ds-card-radius);
}

.card-section,
.table-card,
.finance-card,
.inventory-card,
.customer-card,
.todo-card,
.chart-card,
.availability-detail-panel,
.customer-review-detail,
.inventory-preview,
.detail-section-card {
  padding: var(--ds-card-padding);
}

.metric-grid,
.dashboard-grid,
.chart-grid,
.todo-card-grid,
.inventory-card-grid,
.customer-grid,
.form-grid,
.field-pair {
  gap: var(--ds-gap);
}

.form-field input,
.form-field select,
.filter-row input,
.filter-row select,
.search-control,
.sort-control,
.select-control select,
.hero-search input,
.hero-search select {
  min-height: var(--ds-input-height);
  border-radius: var(--ds-control-radius);
}

.primary-button,
.secondary-button,
.card-action,
.icon-text-button,
.danger-button,
.detail-edit-button {
  min-height: var(--ds-button-height);
  border-radius: var(--ds-control-radius);
}

/* 用户确认隐藏的文字层级。 */
.topbar .crumb,
.topbar .page-description,
.section-heading > p,
.section-heading > div > p,
.section-header > div > .section-note,
.market-head > div > p,
.customer-review-toolbar > div:first-child > p,
.availability-hero > p,
.form-hint {
  display: none !important;
}

@media (min-width: 980px) {
  .nav-item .nav-icon {
    width: var(--ds-icon-container-size);
    height: var(--ds-icon-container-size);
    border-radius: var(--ds-control-radius);
  }
}

@media (max-width: 979px) {
  .topbar h1 { font-size: var(--ds-page-title-size); }
  .section-heading h2,
  .section-header h2,
  .market-head h2,
  .customer-review-toolbar h2,
  .availability-hero h2 { font-size: var(--ds-section-title-size); }
  .nav-item { font-size: var(--ds-label-size); }
}