/*
 * E10 DemoKit design tokens.
 * Baseline values come from the public variables documented by @weapp/ui.
 * The final block applies the effective PC theme observed in the E10 docs.
 */
:root {
  --hd: 1px;

  /* Color */
  --primary-base: #5d9cec;
  --primary: var(--primary-base);
  --primary-hover: #3188cb;
  --primary-active: #035f9f;
  --bubble-color: #dbefff;
  --success: #52c41a;
  --warning: #faad14;
  --danger: #ff4d4f;
  --info: #68a5ff;
  --invalid: #bbbbbb;
  --base-white: #ffffff;
  --base-black: #000000;
  --transparent: transparent;
  --main-fc: #111111;
  --regular-fc: #666666;
  --secondary-fc: #999999;
  --invalid-fc: var(--invalid);
  --placeholder-fc: #cccccc;
  --link-fc: var(--primary);
  --storke-color: var(--primary);
  --border-color: #e5e5e5;
  --diviling-line-color: #ebebeb;
  --box-shadow-color: rgba(0, 0, 0, 0.12);
  --border-color-active: var(--primary);
  --m-bg-base: #f7f7f7;
  --bg-base: #f9f9f9;
  --bg-weak: #f1f1f1;
  --bg-tap: #ebeff5;
  --label-bc: #f5f5f5;
  --label-bc-active: #e9f7ff;
  --mask-bc: rgba(0, 0, 0, 0.4);
  --tip-bc: rgba(0, 0, 0, 0.4);
  --hover-bc: #ecf5ff;
  --modal-bc: var(--bg-base);
  --modal-top-bc: var(--bg-base);
  --invalid-bc: var(--invalid);
  --collection-color: #f9c300;

  /* Typography */
  --regular-ff: Arial, PingFangSC-Light, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --medium-ff: PingFangSC-Medium, "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bold-ff: PingFang-SC-Bold, "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --spacing-sm: calc(var(--hd) * 8);
  --spacing-md: calc(var(--hd) * 16);
  --spacing-lg: calc(var(--hd) * 24);
  --font-size-10: calc(10 * var(--hd));
  --font-size-12: calc(12 * var(--hd));
  --font-size-14: calc(14 * var(--hd));
  --font-size-15: calc(15 * var(--hd));
  --font-size-16: calc(16 * var(--hd));
  --font-size-17: calc(17 * var(--hd));
  --font-size-18: calc(18 * var(--hd));
  --font-size-sm: var(--font-size-12);
  --font-size-md: var(--font-size-14);
  --font-size-lg: var(--font-size-16);
  --font-size-icontext: var(--font-size-10);
  --font-size-caption-sm: var(--font-size-12);
  --font-size-base: var(--font-size-14);
  --font-size-subhead: var(--font-size-15);
  --font-size-caption: var(--font-size-16);
  --font-size-heading: var(--font-size-17);
  --line-height-base: calc(40 * var(--hd));
  --line-height-sm: calc(35 * var(--hd));
  --font-weight-base: 400;
  --font-weight-thin: 200;
  --font-weight-bold: 600;

  /* Spacing */
  --h-spacing-xs: calc(4 * var(--hd));
  --h-spacing-sm: calc(6 * var(--hd));
  --h-spacing-md: calc(8 * var(--hd));
  --h-spacing-lg: calc(16 * var(--hd));
  --h-spacing-xl: calc(24 * var(--hd));
  --v-spacing-xs: calc(4 * var(--hd));
  --v-spacing-sm: calc(6 * var(--hd));
  --v-spacing-md: calc(8 * var(--hd));
  --v-spacing-lg: calc(16 * var(--hd));
  --v-spacing-xl: calc(24 * var(--hd));

  /* Border and elevation */
  --border-width: calc(1 * var(--hd));
  --border-width-lg: calc(2 * var(--hd));
  --border-solid: var(--border-width) solid var(--border-color);
  --border-dotted: var(--border-width-lg) dotted var(--border-color);
  --diviling-line-width: calc(1 * var(--hd));
  --border-radius-none: 0;
  --border-radius-xs: calc(3 * var(--hd));
  --border-radius-sm: calc(6 * var(--hd));
  --border-radius-md: calc(8 * var(--hd));
  --border-radius-lg: calc(15 * var(--hd));
  --box-shadow-x: 0;
  --box-shadow-y: calc(3 * var(--hd));
  --box-shadow-blur: calc(12 * var(--hd));
  --box-shadow-spread: calc(1 * var(--hd));
  --box-shadow: var(--box-shadow-x) var(--box-shadow-y) var(--box-shadow-blur) var(--box-shadow-color);
  --box-shadow-storke: var(--box-shadow-x) var(--box-shadow-y) var(--box-shadow-blur) var(--box-shadow-spread) var(--box-shadow-color);

  /* Layering */
  --progress-zindex: 2000;
  --popover-zindex: 1999;
  --toast-zindex: 1999;
  --action-sheet-zindex: 1000;
  --picker-zindex: 1000;
  --popup-zindex: 999;
  --dialog-draw-zindex: 900;
  --modal-zindex: 999;
  --tabs-pagination-zindex: 999;
  --dialog-route-layout-zindex: 998;
  --dialog-confirm-zindex: 2999;
  --map-zindex: 9;
  --map-wrap-zindex: 10;

  /* Motion */
  --transition-du: 0.3s;
  --transition-tf: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-all: all var(--transition-du) var(--transition-tf);
  --transition-color: color var(--transition-du) var(--transition-tf);
  --transition-bc: background-color var(--transition-du) var(--transition-tf);
  --transition-w: width var(--transition-du) var(--transition-tf);
  --transition-h: height var(--transition-du) var(--transition-tf);

  /* Effective E10 PC theme */
  --primary: #0470c1;
  --primary-deep: #0367ad;
  --primary-bright: #1583d8;
  --page-bg: #f0f1f4;
  --panel-bg: #ffffff;
  --table-head-bg: #fbfbfb;
  --sidebar-bg: #2b2e35;
  --sidebar-active-bg: #1d1f25;
  --sidebar-hover-bg: #25282e;
  --sidebar-muted: #9da1a8;
  --sidebar-width: 220px;
  --topbar-height: 50px;
  --control-height: 30px;
  --table-row-height: 40px;
}