/* 资金览图 H5 · Design Tokens
   数值来源：../Design-Tokens.md（五险一金 Dashboard Design Tokens）
   层级：Primitive(--p-*) → Semantic(--sem-*) → Component(--cmp-*)
   规则：组件与页面样式只引用 Component / Semantic，不直接写真实值。 */

/* =============== 1. Primitive =============== */
:root {
  /* 中性 / 文字 */
  --p-neutral-0: #fff;
  --p-neutral-950: #03080f;
  --p-text-dark-primary: #dceaff;
  --p-text-dark-secondary: #7c93b8;
  --p-text-dark-tertiary: #a8bcd8;
  --p-text-dark-heading: #e6f2ff;
  --p-text-light-primary: #17253b;
  --p-text-light-secondary: #66758a;
  --p-text-light-tertiary: #526b84;
  --p-text-on-action-dark: #031326;

  /* 背景 / 表面 */
  --p-bg-dark: radial-gradient(1100px 620px at 8% -8%, rgba(56, 168, 255, .2), transparent 62%), radial-gradient(980px 560px at 96% 2%, rgba(34, 225, 240, .14), transparent 64%), radial-gradient(900px 620px at 50% 112%, rgba(167, 139, 250, .14), transparent 62%), linear-gradient(180deg, #030a16 0%, #061227 42%, #03080f 100%);
  --p-bg-light: radial-gradient(850px 480px at 5% -8%, rgba(56, 168, 255, .11), transparent 64%), radial-gradient(760px 440px at 98% 2%, rgba(34, 225, 240, .08), transparent 64%), linear-gradient(180deg, #f7faff, #eef3f9);
  --p-surface-dark-glass: linear-gradient(165deg, rgba(16, 38, 74, .86), rgba(6, 17, 36, .92));
  --p-surface-light-glass: linear-gradient(165deg, rgba(255, 255, 255, .98), rgba(246, 249, 253, .98));
  --p-surface-dark-muted: rgba(56, 168, 255, .055);
  --p-surface-light-muted: #f2f6fb;
  --p-surface-dark-selected: rgba(56, 168, 255, .16);
  --p-surface-light-selected: rgba(18, 111, 194, .1);
  --p-overlay-dark: rgba(0, 0, 0, .34);
  --p-overlay-light: rgba(23, 37, 59, .32);

  /* 交互 / 状态 */
  --p-action-dark-default: #38a8ff;
  --p-action-dark-hover: #2f8fe8;
  --p-action-light-default: #126fc2;
  --p-action-light-hover: #258fdf;
  --p-action-light-border: #0f69b7;
  --p-focus-dark: #22e1f0;
  --p-focus-light: #126fc2;
  --p-status-info: #38a8ff;
  --p-status-success: #2ee6a8;
  --p-status-warning: #ffb020;
  --p-status-danger: #ff5c7c;

  /* 业务 / 图表 */
  --p-chart-social: #38a8ff;
  --p-chart-housing: #2ee6a8;
  --p-chart-medical: #ff5c7c;
  --p-chart-pension: #a78bfa;
  --p-chart-unemployment: #ffb020;
  --p-chart-injury: #22e1f0;
  --p-chart-maternity: #ff6ec7;
  --p-chart-cash: #38a8ff;
  --p-chart-company-out: #ffb020;
  --p-chart-personal-asset: #a78bfa;

  /* 边框 */
  --p-border-dark-subtle: rgba(96, 166, 255, .16);
  --p-border-dark-default: rgba(64, 160, 255, .22);
  --p-border-dark-strong: rgba(88, 196, 255, .62);
  --p-border-light-subtle: rgba(37, 91, 150, .14);
  --p-border-light-default: rgba(38, 103, 173, .16);
  --p-border-light-strong: rgba(38, 116, 198, .36);
  --p-transparent: transparent;

  /* Spacing */
  --p-space-0: 0;
  --p-space-1: 2px;
  --p-space-2: 4px;
  --p-space-3: 6px;
  --p-space-4: 8px;
  --p-space-5: 10px;
  --p-space-6: 12px;
  --p-space-7: 14px;
  --p-space-8: 16px;
  --p-space-9: 18px;
  --p-space-10: 20px;
  --p-space-11: 22px;
  --p-space-12: 28px;
  --p-space-13: 40px;

  /* Radius */
  --p-radius-none: 0;
  --p-radius-xs: 2px;
  --p-radius-sm: 3px;
  --p-radius-md: 6px;
  --p-radius-lg: 8px;
  --p-radius-xl: 10px;
  --p-radius-2xl: 12px;
  --p-radius-3xl: 14px;
  --p-radius-hero: 16px;
  --p-radius-circle: 50%;
  --p-radius-pill: 999px;

  /* Size（含 H5 触屏新增值） */
  --p-size-dot-sm: 6px;
  --p-size-mark: 10px;
  --p-size-track-sm: 12px;
  --p-size-track-md: 14px;
  --p-size-title-mark: 16px;
  --p-size-icon-box: 34px;
  --p-size-tap: 44px;
  --p-size-appbar: 52px;
  --p-size-tabbar: 56px;
  --p-size-fab: 52px;
  --p-size-sheet-max: 560px;
  --p-size-content-max: 560px;
  --p-size-sheet-handle: 36px;
  --p-size-toast-offset: 70px;

  /* Typography */
  --p-font-sans: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --p-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --p-font-size-1: 11px;
  --p-font-size-2: 12px;
  --p-font-size-3: 13px;
  --p-font-size-4: 14px;
  --p-font-size-5: 15px;
  --p-font-size-6: 18px;
  --p-font-size-7: 20px;
  --p-font-size-8: 24px;
  --p-font-size-9: 28px;
  --p-font-size-10: 34px;
  --p-font-weight-regular: 400;
  --p-font-weight-medium: 500;
  --p-font-weight-semibold: 600;
  --p-font-weight-bold: 700;
  --p-font-weight-heavy: 800;
  --p-line-height-tight: 1.35;
  --p-line-height-base: 1.5;
  --p-line-height-relaxed: 1.65;
  --p-line-height-loose: 1.8;

  /* Border */
  --p-border-width-0: 0;
  --p-border-width-1: 1px;
  --p-border-width-2: 1.5px;
  --p-border-width-accent: 4px;
  --p-border-style-solid: solid;
  --p-border-style-dashed: dashed;

  /* Shadow / Blur */
  --p-shadow-none: none;
  --p-shadow-dark-raised: inset 0 1px 0 rgba(140, 210, 255, .07), 0 24px 50px -30px rgba(0, 0, 0, .95), 0 0 30px -18px rgba(56, 168, 255, .55);
  --p-shadow-light-raised: 0 14px 35px -28px rgba(28, 61, 104, .38), 0 2px 8px rgba(45, 77, 116, .06);
  --p-shadow-focus-dark: 0 0 0 3px rgba(34, 225, 240, .14);
  --p-shadow-focus-light: 0 0 0 3px rgba(18, 111, 194, .14);
  --p-shadow-tooltip-dark: 0 18px 44px -12px rgba(0, 6, 20, .9), 0 0 26px -8px rgba(56, 168, 255, .6);
  --p-shadow-tooltip-light: 0 16px 40px -18px rgba(23, 57, 94, .36);
  --p-shadow-text-data: 0 0 15px currentColor;
  --p-shadow-bar-dark: 0 -10px 30px -18px rgba(0, 0, 0, .95);
  --p-shadow-bar-light: 0 -10px 30px -22px rgba(28, 61, 104, .4);
  --p-blur-surface: blur(7px);
  --p-blur-floating: blur(16px);

  /* Motion */
  --p-duration-fast: 120ms;
  --p-duration-control: 160ms;
  --p-duration-chart: 180ms;
  --p-duration-base: 200ms;
  --p-ease-standard: ease;
}

/* =============== 2. Semantic =============== */
/* 3.1 主题映射：默认深色，[data-theme="light"] 切换白色主题 */
:root,
[data-theme="dark"] {
  --sem-bg-canvas: var(--p-bg-dark);
  --sem-bg-muted: var(--p-surface-dark-muted);
  --sem-surface-default: var(--p-surface-dark-glass);
  --sem-surface-raised: var(--p-surface-dark-glass);
  --sem-surface-selected: var(--p-surface-dark-selected);
  --sem-text-primary: var(--p-text-dark-primary);
  --sem-text-secondary: var(--p-text-dark-secondary);
  --sem-text-tertiary: var(--p-text-dark-tertiary);
  --sem-text-heading: var(--p-text-dark-heading);
  --sem-text-on-action: var(--p-text-on-action-dark);
  --sem-border-subtle: var(--p-border-dark-subtle);
  --sem-border-default: var(--p-border-dark-default);
  --sem-border-strong: var(--p-border-dark-strong);
  --sem-action-primary: var(--p-action-dark-default);
  --sem-action-primary-hover: var(--p-action-dark-hover);
  --sem-action-primary-border: var(--p-action-dark-default);
  --sem-action-focus: var(--p-focus-dark);
  --sem-overlay-scrim: var(--p-overlay-dark);
  --sem-shadow-raised: var(--p-shadow-dark-raised);
  --sem-shadow-focus: var(--p-shadow-focus-dark);
  --sem-shadow-tooltip: var(--p-shadow-tooltip-dark);
  --sem-shadow-bar: var(--p-shadow-bar-dark);
}

[data-theme="light"] {
  --sem-bg-canvas: var(--p-bg-light);
  --sem-bg-muted: var(--p-surface-light-muted);
  --sem-surface-default: var(--p-surface-light-glass);
  --sem-surface-raised: var(--p-surface-light-glass);
  --sem-surface-selected: var(--p-surface-light-selected);
  --sem-text-primary: var(--p-text-light-primary);
  --sem-text-secondary: var(--p-text-light-secondary);
  --sem-text-tertiary: var(--p-text-light-tertiary);
  --sem-text-heading: var(--p-text-light-primary);
  --sem-text-on-action: var(--p-neutral-0);
  --sem-border-subtle: var(--p-border-light-subtle);
  --sem-border-default: var(--p-border-light-default);
  --sem-border-strong: var(--p-border-light-strong);
  --sem-action-primary: var(--p-action-light-default);
  --sem-action-primary-hover: var(--p-action-light-hover);
  --sem-action-primary-border: var(--p-action-light-border);
  --sem-action-focus: var(--p-focus-light);
  --sem-overlay-scrim: var(--p-overlay-light);
  --sem-shadow-raised: var(--p-shadow-light-raised);
  --sem-shadow-focus: var(--p-shadow-focus-light);
  --sem-shadow-tooltip: var(--p-shadow-tooltip-light);
  --sem-shadow-bar: var(--p-shadow-bar-light);
}

/* Status / Chart：两个主题保持同一业务身份 */
:root {
  --sem-status-info: var(--p-status-info);
  --sem-status-success: var(--p-status-success);
  --sem-status-warning: var(--p-status-warning);
  --sem-status-danger: var(--p-status-danger);
  --sem-chart-social: var(--p-chart-social);
  --sem-chart-housing: var(--p-chart-housing);
  --sem-chart-medical: var(--p-chart-medical);
  --sem-chart-pension: var(--p-chart-pension);
  --sem-chart-unemployment: var(--p-chart-unemployment);
  --sem-chart-injury: var(--p-chart-injury);
  --sem-chart-maternity: var(--p-chart-maternity);
  --sem-chart-cash: var(--p-chart-cash);
  --sem-chart-company-out: var(--p-chart-company-out);
  --sem-chart-personal-asset: var(--p-chart-personal-asset);
}

/* 3.2 支撑型 Semantic */
:root {
  --sem-space-control-x: var(--p-space-5);
  --sem-space-control-y: var(--p-space-4);
  --sem-space-card: var(--p-space-7);
  --sem-space-card-gap: var(--p-space-6);
  --sem-space-inline: var(--p-space-4);
  --sem-space-stack: var(--p-space-5);
  --sem-space-page-x: var(--p-space-8);
  --sem-space-page-y: var(--p-space-6);
  --sem-space-safe-bottom: var(--p-space-8);
  --sem-radius-control: var(--p-radius-lg);
  --sem-radius-surface: var(--p-radius-3xl);
  --sem-radius-surface-small: var(--p-radius-xl);
  --sem-radius-badge: var(--p-radius-pill);
  --sem-radius-circle: var(--p-radius-circle);
  --sem-font-body: var(--p-font-sans);
  --sem-font-data: var(--p-font-mono);
  --sem-font-size-caption: var(--p-font-size-2);
  --sem-font-size-body: var(--p-font-size-3);
  --sem-font-size-title: var(--p-font-size-5);
  --sem-font-size-page-title: var(--p-font-size-6);
  --sem-font-size-kpi: var(--p-font-size-7);
  --sem-font-size-display: var(--p-font-size-10);
  --sem-font-weight-regular: var(--p-font-weight-regular);
  --sem-font-weight-medium: var(--p-font-weight-medium);
  --sem-font-weight-semibold: var(--p-font-weight-semibold);
  --sem-font-weight-bold: var(--p-font-weight-bold);
  --sem-font-weight-heavy: var(--p-font-weight-heavy);
  --sem-line-height-tight: var(--p-line-height-tight);
  --sem-line-height-base: var(--p-line-height-base);
  --sem-line-height-relaxed: var(--p-line-height-relaxed);
  --sem-line-height-loose: var(--p-line-height-loose);
  --sem-border-width: var(--p-border-width-1);
  --sem-border-width-accent: var(--p-border-width-accent);
  --sem-border-style: var(--p-border-style-solid);
  --sem-border-style-help: var(--p-border-style-dashed);
  --sem-blur-surface: var(--p-blur-surface);
  --sem-blur-floating: var(--p-blur-floating);
  --sem-motion-fast: var(--p-duration-fast);
  --sem-motion-control: var(--p-duration-control);
  --sem-motion-chart: var(--p-duration-chart);
  --sem-motion-base: var(--p-duration-base);
  --sem-ease-standard: var(--p-ease-standard);
  --sem-size-tap: var(--p-size-tap);
  --sem-size-appbar: var(--p-size-appbar);
  --sem-size-tabbar: var(--p-size-tabbar);
  --sem-size-fab: var(--p-size-fab);
  --sem-size-icon-box: var(--p-size-icon-box);
  --sem-size-content-max: var(--p-size-content-max);
}

/* =============== 3. Component（H5） =============== */
:root {
  --cmp-appbar-height: var(--sem-size-appbar);
  --cmp-appbar-bg: var(--sem-surface-default);
  --cmp-appbar-border: var(--sem-border-subtle);
  --cmp-page-bg: var(--sem-bg-canvas);
  --cmp-card-bg: var(--sem-surface-default);
  --cmp-card-border: var(--sem-border-subtle);
  --cmp-card-radius: var(--sem-radius-surface);
  --cmp-card-padding: var(--sem-space-card);
  --cmp-card-gap: var(--sem-space-card-gap);
  --cmp-inner-bg: var(--sem-bg-muted);
  --cmp-inner-radius: var(--sem-radius-surface-small);
  --cmp-text-primary: var(--sem-text-primary);
  --cmp-text-secondary: var(--sem-text-secondary);
  --cmp-text-tertiary: var(--sem-text-tertiary);
  --cmp-text-heading: var(--sem-text-heading);
  --cmp-tabbar-height: var(--sem-size-tabbar);
  --cmp-tabbar-bg: var(--sem-surface-default);
  --cmp-tabbar-border: var(--sem-border-subtle);
  --cmp-tabbar-shadow: var(--sem-shadow-bar);
  --cmp-tabbar-item-color: var(--sem-text-secondary);
  --cmp-tabbar-item-active: var(--sem-action-primary);
  --cmp-fab-size: var(--sem-size-fab);
  --cmp-fab-bg: var(--sem-action-primary);
  --cmp-fab-color: var(--sem-text-on-action);
  --cmp-fab-shadow: var(--sem-shadow-tooltip);
  --cmp-btn-height: var(--sem-size-tap);
  --cmp-btn-radius: var(--sem-radius-control);
  --cmp-btn-primary-bg: var(--sem-action-primary);
  --cmp-btn-primary-hover: var(--sem-action-primary-hover);
  --cmp-btn-primary-border: var(--sem-action-primary-border);
  --cmp-btn-primary-color: var(--sem-text-on-action);
  --cmp-input-bg: var(--sem-bg-muted);
  --cmp-input-border: var(--sem-border-default);
  --cmp-input-radius: var(--sem-radius-control);
  --cmp-chip-bg: var(--sem-bg-muted);
  --cmp-chip-border: var(--sem-border-subtle);
  --cmp-chip-color: var(--sem-text-secondary);
  --cmp-chip-active-bg: var(--sem-surface-selected);
  --cmp-chip-active-border: var(--sem-border-strong);
  --cmp-chip-active-color: var(--sem-text-heading);
  --cmp-divider: var(--sem-border-subtle);
  --cmp-track-bg: var(--sem-bg-muted);
  --cmp-track-fill: var(--sem-action-primary);
  --cmp-track-radius: var(--p-radius-pill);
  --cmp-track-height: var(--p-size-track-sm);
  --cmp-amount-income: var(--sem-status-success);
  --cmp-amount-expense: var(--sem-chart-company-out);
  --cmp-amount-transfer: var(--sem-chart-personal-asset);
  --cmp-amount-danger: var(--sem-status-danger);
  --cmp-sheet-bg: var(--sem-surface-raised);
  --cmp-sheet-scrim: var(--sem-overlay-scrim);
  --cmp-sheet-radius: var(--p-radius-hero);
  --cmp-sheet-shadow: var(--sem-shadow-tooltip);
  --cmp-icon-box-bg: var(--sem-bg-muted);
  --cmp-icon-box-radius: var(--sem-radius-control);
  --cmp-shadow: var(--sem-shadow-raised);
  --cmp-focus-ring: var(--sem-shadow-focus);
  --cmp-toast-offset: var(--p-size-toast-offset);
  --cmp-toast-bg: var(--sem-surface-raised);
  --cmp-toast-border: var(--sem-border-default);
  --cmp-toast-color: var(--sem-text-primary);
}