:root,
:host {
  /* 配合 rem.js */
  --yz-font-size-min: 0;
  --yz-font-size-max: 100;
  --yz-viewport-min: 0;
  --yz-viewport-max: 750;
  --yz-font-size-rem: clamp(
    var(--yz-font-size-min) * 1px,
    calc(
      var(--yz-font-size-min) * 1px +
        (var(--yz-font-size-max) - var(--yz-font-size-min)) *
        (100vw /* or 100cqw */ - var(--yz-viewport-min) * 1px) /
        (var(--yz-viewport-max) - var(--yz-viewport-min))
    ),
    var(--yz-font-size-max) * 1px
  );

  --yz-disabled-opacity: 0.4;

  /* 预定义大小 */
  --yz-font-size: 16px; /* line-height = 1.4 ：上下单边距 = 3px */
  --yz-font-size-secondary: 14px; /* line-height = 1.4 ：上下单边距 = 3px */

  --yz-gap-horizontal: 5px;

  --yz-padding-horizontal: 15px;
  --yz-padding-vertical: 10px;

  --yz-button-height: 44px;
  --yz-button-padding-horizontal: 20px;
  --yz-button-border-radius: 4px;

  --yz-button-height-secondary: 32px;
  --yz-button-padding-horizontal-secondary: 16px;
  --yz-button-border-radius-secondary: 4px;

  --yz-button-height-tertiary: 24px;
  --yz-button-padding-horizontal-tertiary: 8px;
  --yz-button-border-radius-tertiary: 4px;

  --yz-dialog-border-radius: 12px;

  --yz-input-height: 44px;
  --yz-input-border-radius: 4px;

  /* 预定义颜色：深色模式下：颜色加深 */
  --yz-blue: #5a82f0;
  --yz-blue-panel: #e6f0ff; /* #e3eeff */
  --yz-blue-panel-border: #a0b4f0;
  --yz-blue-gradient: #66b3ff;

  --yz-red: #fa503c;
  --yz-red-panel: #fff5f5;
  --yz-red-panel-border: #fac8c8;
  --yz-red-gradient: #fa8c78;

  --yz-green: #00be5a;
  --yz-green-gradient: #00e678;

  --yz-yellow: #fa8c00;
  --yz-yellow-gradient: #ffb400;

  --yz-newenergy: #64c896;
  --yz-newenergy-panel: #ebfaf2;

  --yz-ks-green: #328a8c;
  --yz-ks-green-panel: #ebf4f4;

  --yz-yz-green: #29c999;
  --yz-yz-green-panel: #eef8f8;

  --yz-rainbow-red: rgb(235, 95, 87);
  --yz-rainbow-orange: rgb(245, 139, 87);
  --yz-rainbow-yellow: rgb(250, 195, 95);
  --yz-rainbow-green: rgb(145, 200, 130);
  --yz-rainbow-blue: rgb(130, 170, 220);
  --yz-rainbow-indigo: rgb(155, 130, 200);
  --yz-rainbow-violet: rgb(200, 130, 180);

  --yz-scrollbar-track: rgba(0, 0, 0, 0.2);
  --yz-scrollbar-thumb: rgba(0, 0, 0, 0.4);

  --yz-success: var(--yz-green);
  --yz-error: var(--yz-red);
  --yz-warn: var(--yz-yellow);

  /* system：深色模式下：颜色加深 */
  --yz-foreground: var(--yz-blue, #5a82f0);
  --yz-foreground-secondary: var(--yz-blue-panel);
  --yz-foreground-gradient: var(--yz-blue-gradient);
  --yz-background: #ffffff;
  --yz-background-border: #e6e6e6;
  --yz-panel: #f5f5f5;
  --yz-panel-border: #b3b3b3;
  --yz-gap: #cccccc;
  --yz-placeholder: #8f8f8f;
  --yz-font: #333333;
  --yz-font-secondary: #666666;
  --yz-font-tertiary: #999999;

  /* system：深色模式下：颜色反向 */
  --yz-foreground-reverse: var(--yz-blue);
  --yz-foreground-secondary-reverse: var(--yz-blue-panel);
  --yz-foreground-gradient-reverse: var(--yz-blue-gradient);
  --yz-background-reverse: #ffffff;
  --yz-background-border-reverse: #e6e6e6;
  --yz-panel-reverse: #f5f5f5;
  --yz-panel-border-reverse: #b3b3b3;
  --yz-gap-reverse: #cccccc;
  --yz-placeholder-reverse: #8f8f8f;
  --yz-font-reverse: #333333;
  --yz-font-secondary-reverse: #666666;
  --yz-font-tertiary-reverse: #999999;

  /* theme-xg-blue：信鸽蓝：深色模式下：颜色加深 */
  --yz-theme-xg-blue-primary: var(--yz-blue);
  --yz-theme-xg-blue-secondary: var(--yz-blue-panel);
  --yz-theme-xg-blue-gradient: var(--yz-blue-gradient);
  --yz-theme-xg-blue-background: var(--yz-background);
  --yz-theme-xg-blue-background-border: var(--yz-background-border);
  --yz-theme-xg-blue-panel: var(--yz-panel);
  --yz-theme-xg-blue-panel-border: var(--yz-panel-border);
  --yz-theme-xg-blue-gap: var(--yz-gap);
  --yz-theme-xg-blue-placeholder: var(--yz-placeholder);
  --yz-theme-xg-blue-font: var(--yz-font);
  --yz-theme-xg-blue-font-secondary: var(--yz-font-secondary);
  --yz-theme-xg-blue-font-tertiary: var(--yz-font-tertiary);

  /* theme-xg-red：信鸽红：深色模式下：颜色加深 */
  --yz-theme-xg-red-primary: var(--yz-red);
  --yz-theme-xg-red-secondary: var(--yz-red-panel);
  --yz-theme-xg-red-gradient: var(--yz-red-gradient);
  --yz-theme-xg-red-background: var(--yz-background);
  --yz-theme-xg-red-background-border: var(--yz-background-border);
  --yz-theme-xg-red-panel: var(--yz-panel);
  --yz-theme-xg-red-panel-border: var(--yz-panel-border);
  --yz-theme-xg-red-gap: var(--yz-gap);
  --yz-theme-xg-red-placeholder: var(--yz-placeholder);
  --yz-theme-xg-red-font: var(--yz-font);
  --yz-theme-xg-red-font-secondary: var(--yz-font-secondary);
  --yz-theme-xg-red-font-tertiary: var(--yz-font-tertiary);

  /* theme-xg-green：信鸽绿：深色模式下：颜色加深 */
  --yz-theme-xg-green-primary: var(--yz-green);
  --yz-theme-xg-green-background: var(--yz-background);
  --yz-theme-xg-green-background-border: var(--yz-background-border);
  --yz-theme-xg-green-panel: var(--yz-panel);
  --yz-theme-xg-green-panel-border: var(--yz-panel-border);
  --yz-theme-xg-green-gap: var(--yz-gap);
  --yz-theme-xg-green-placeholder: var(--yz-placeholder);
  --yz-theme-xg-green-font: var(--yz-font);
  --yz-theme-xg-green-font-secondary: var(--yz-font-secondary);
  --yz-theme-xg-green-font-tertiary: var(--yz-font-tertiary);

  /* theme-ks-green：昆山绿：深色模式下：颜色加深 */
  --yz-theme-ks-green-primary: var(--yz-ks-green);
  --yz-theme-ks-green-secondary: var(--yz-ks-green-panel);
  --yz-theme-ks-green-gradient: var(--yz-ks-green);
  --yz-theme-ks-green-background: var(--yz-background);
  --yz-theme-ks-green-background-border: var(--yz-background-border);
  --yz-theme-ks-green-panel: var(--yz-panel);
  --yz-theme-ks-green-panel-border: var(--yz-panel-border);
  --yz-theme-ks-green-gap: var(--yz-gap);
  --yz-theme-ks-green-placeholder: var(--yz-placeholder);
  --yz-theme-ks-green-font: var(--yz-font);
  --yz-theme-ks-green-font-secondary: var(--yz-font-secondary);
  --yz-theme-ks-green-font-tertiary: var(--yz-font-tertiary);

  /* theme-yz-green：扬州绿：深色模式下：颜色加深 */
  --yz-theme-yz-green-primary: var(--yz-yz-green);
  --yz-theme-yz-green-secondary: var(--yz-yz-green-panel);
  --yz-theme-yz-green-gradient: var(--yz-yz-green);
  --yz-theme-yz-green-background: var(--yz-background);
  --yz-theme-yz-green-background-border: var(--yz-background-border);
  --yz-theme-yz-green-panel: var(--yz-panel);
  --yz-theme-yz-green-panel-border: var(--yz-panel-border);
  --yz-theme-yz-green-gap: var(--yz-gap);
  --yz-theme-yz-green-placeholder: var(--yz-placeholder);
  --yz-theme-yz-green-font: var(--yz-font);
  --yz-theme-yz-green-font-secondary: var(--yz-font-secondary);
  --yz-theme-yz-green-font-tertiary: var(--yz-font-tertiary);
}

/* 浅色模式 */
/* @media (prefers-color-scheme: light) {
  :root,
  :host {
  }
} */
html[data-color-scheme="light"]:root,
html[data-color-scheme="light"]:host {
}

/* 深色模式 */
/* @media (prefers-color-scheme: dark) {
  :root,
  :host {
  }
} */
html[data-color-scheme="dark"]:root,
html[data-color-scheme="dark"]:host {
  /* 预定义颜色：深色模式下：颜色加深 */
  --yz-blue: #4a6ed7;
  --yz-blue-panel: #aec6d9;
  --yz-blue-panel-border: #6e7ccf;
  --yz-blue-gradient: #4c99cc;

  --yz-red: #d94e37;
  --yz-red-panel: #f4d1d1;
  --yz-red-panel-border: #f1a6a6;
  --yz-red-gradient: #d97362;

  --yz-green: #009c4d;
  --yz-green-gradient: #00b36b;

  --yz-yellow: #e67e00;
  --yz-yellow-gradient: #e68a00;

  --yz-newenergy: #4a9b73;
  --yz-newenergy-panel: #c7e6d5;

  --yz-ks-green: #27706a;
  --yz-ks-green-panel: #3a7f7d;

  --yz-yz-green: #1f9f86;
  --yz-yz-green-panel: #3a8c8a;

  --yz-rainbow-red: rgb(235, 95, 87);
  --yz-rainbow-orange: rgb(245, 139, 87);
  --yz-rainbow-yellow: rgb(132, 132, 132);
  --yz-rainbow-green: rgb(145, 200, 130);
  --yz-rainbow-blue: rgb(130, 170, 220);
  --yz-rainbow-indigo: rgb(155, 130, 200);
  --yz-rainbow-violet: rgb(200, 130, 180);

  --yz-scrollbar-track: rgba(255, 255, 255, 0.2);
  --yz-scrollbar-thumb: rgba(255, 255, 255, 0.4);

  /* system：深色模式下：颜色加深 */
  --yz-foreground: var(--yz-blue, #4a6ed7);
  --yz-foreground-secondary: var(--yz-blue-panel);
  --yz-foreground-gradient: var(--yz-blue-gradient);
  --yz-background: #eeeeee;
  --yz-background-border: #dddddd;
  --yz-panel: #e5e5e5;
  --yz-panel-border: #bbbbbb;
  --yz-gap: #aaaaaa;
  --yz-placeholder: #646464;
  --yz-font: #1a1a1a;
  --yz-font-secondary: #4d4d4d;
  --yz-font-tertiary: #7f7f7f;

  /* system：深色模式下：颜色反向 */
  --yz-foreground-reverse: #8aa7ff;
  --yz-foreground-secondary-reverse: #8faec4;
  --yz-foreground-gradient-reverse: #337fbf;
  --yz-background-reverse: #1d1d1d;
  --yz-background-border-reverse: #333333;
  --yz-panel-reverse: #242424;
  --yz-panel-border-reverse: #555555;
  --yz-gap-reverse: #444444;
  --yz-placeholder-reverse: #707070;
  --yz-font-reverse: #cdcdcd;
  --yz-font-secondary-reverse: #8d8d8d;
  --yz-font-tertiary-reverse: #5d5d5d;
}