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

  /* 预定义大小 */
  --yz-gap-horizontal: 5px;
  --yz-padding-horizontal: 15px;
  --yz-padding-vertical: 10px;
  --yz-padding-vertical-double: 20px;

  --yz-font-size: 16px; /* 1.4 line-height : 上下单边距 = 3px */
  --yz-font-size-secondary: 14px; /* 1.4 line-height : 上下单边距 = 3px */

  --yz-disabled-opacity: 0.4;

  --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-foreground-reverse: #ffffff;
  --yz-foreground-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;

  /* 组件：颜色加深 */
  --yz-foreground-common: #ffffff;
  --yz-foreground-border-common: #e6e6e6;
  --yz-panel-common: #f5f5f5;
  --yz-panel-border-common: #b3b3b3;
  --yz-gap-common: #cccccc;
  --yz-placeholder-common: #8f8f8f;
  --yz-font-common: #333333;
  --yz-font-secondary-common: #666666;
  --yz-font-tertiary-common: #999999;

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

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

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

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

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

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

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

  /* 预定义颜色模式：xg-blue:信鸽蓝 */
  --yz-pattern-xg-blue-primary: var(--yz-xg-blue, #5a82f0);
  --yz-pattern-xg-blue-secondary: var(--yz-xg-blue-panel);
  --yz-pattern-xg-blue-gradient: var(--yz-xg-blue-gradient);
  --yz-pattern-xg-blue-foreground: var(--yz-foreground-common);
  --yz-pattern-xg-blue-foreground-border: var(--yz-foreground-border-common);
  --yz-pattern-xg-blue-panel: var(--yz-panel-common);
  --yz-pattern-xg-blue-panel-border: var(--yz-panel-border-common);
  --yz-pattern-xg-blue-gap: var(--yz-gap-common);
  --yz-pattern-xg-blue-placeholder: var(--yz-placeholder-common);
  --yz-pattern-xg-blue-font: var(--yz-font-common);
  --yz-pattern-xg-blue-font-secondary: var(--yz-font-secondary-common);
  --yz-pattern-xg-blue-font-tertiary: var(--yz-font-tertiary-common);

  /* 预定义颜色模式：xg-red:信鸽红 */
  --yz-pattern-xg-red-primary: var(--yz-xg-red);
  --yz-pattern-xg-red-secondary: var(--yz-xg-red-panel);
  --yz-pattern-xg-red-gradient: var(--yz-xg-red-gradient);
  --yz-pattern-xg-red-foreground: var(--yz-foreground-common);
  --yz-pattern-xg-red-foreground-border: var(--yz-foreground-border-common);
  --yz-pattern-xg-red-panel: var(--yz-panel-common);
  --yz-pattern-xg-red-panel-border: var(--yz-panel-border-common);
  --yz-pattern-xg-red-gap: var(--yz-gap-common);
  --yz-pattern-xg-red-placeholder: var(--yz-placeholder-common);
  --yz-pattern-xg-red-font: var(--yz-font-common);
  --yz-pattern-xg-red-font-secondary: var(--yz-font-secondary-common);
  --yz-pattern-xg-red-font-tertiary: var(--yz-font-tertiary-common);

  /* 预定义颜色模式：xg-green:信鸽绿 */
  --yz-pattern-xg-green-primary: var(--yz-xg-green);
  --yz-pattern-xg-green-foreground: var(--yz-foreground-common);
  --yz-pattern-xg-green-foreground-border: var(--yz-foreground-border-common);
  --yz-pattern-xg-green-panel: var(--yz-panel-common);
  --yz-pattern-xg-green-panel-border: var(--yz-panel-border-common);
  --yz-pattern-xg-green-gap: var(--yz-gap-common);
  --yz-pattern-xg-green-placeholder: var(--yz-placeholder-common);
  --yz-pattern-xg-green-font: var(--yz-font-common);
  --yz-pattern-xg-green-font-secondary: var(--yz-font-secondary-common);
  --yz-pattern-xg-green-font-tertiary: var(--yz-font-tertiary-common);

  /* 预定义颜色模式：ks-green:昆山绿 */
  --yz-pattern-ks-green-primary: var(--yz-ks-green);
  --yz-pattern-ks-green-secondary: var(--yz-ks-green-panel);
  --yz-pattern-ks-green-gradient: var(--yz-ks-green);
  --yz-pattern-ks-green-foreground: var(--yz-foreground-common);
  --yz-pattern-ks-green-foreground-border: var(--yz-foreground-border-common);
  --yz-pattern-ks-green-panel: var(--yz-panel-common);
  --yz-pattern-ks-green-panel-border: var(--yz-panel-border-common);
  --yz-pattern-ks-green-gap: var(--yz-gap-common);
  --yz-pattern-ks-green-placeholder: var(--yz-placeholder-common);
  --yz-pattern-ks-green-font: var(--yz-font-common);
  --yz-pattern-ks-green-font-secondary: var(--yz-font-secondary-common);
  --yz-pattern-ks-green-font-tertiary: var(--yz-font-tertiary-common);

  /* 预定义颜色模式：yz-green:扬州绿 */
  --yz-pattern-yz-green-primary: var(--yz-yz-green);
  --yz-pattern-yz-green-secondary: var(--yz-yz-green-panel);
  --yz-pattern-yz-green-gradient: var(--yz-yz-green);
  --yz-pattern-yz-green-foreground: var(--yz-foreground-common);
  --yz-pattern-yz-green-foreground-border: var(--yz-foreground-border-common);
  --yz-pattern-yz-green-panel: var(--yz-panel-common);
  --yz-pattern-yz-green-panel-border: var(--yz-panel-border-common);
  --yz-pattern-yz-green-gap: var(--yz-gap-common);
  --yz-pattern-yz-green-placeholder: var(--yz-placeholder-common);
  --yz-pattern-yz-green-font: var(--yz-font-common);
  --yz-pattern-yz-green-font-secondary: var(--yz-font-secondary-common);
  --yz-pattern-yz-green-font-tertiary: var(--yz-font-tertiary-common);
}

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

/* 深色模式 */
/* @media (prefers-color-scheme: dark) {
  :root,
  :host {
  }
} */
html[data-theme="dark"]:root,
html[data-theme="dark"]:host {
  /* 组件：颜色反向 */
  --yz-foreground-reverse: #1d1d1d;
  --yz-foreground-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;

  /* 组件：颜色加深 */
  --yz-foreground-common: #eeeeee;
  --yz-foreground-border-common: #dddddd;
  --yz-panel-common: #e5e5e5;
  --yz-panel-border-common: #bbbbbb;
  --yz-gap-common: #aaaaaa;
  --yz-placeholder-common: #646464;
  --yz-font-common: #1a1a1a;
  --yz-font-secondary-common: #4d4d4d;
  --yz-font-tertiary-common: #7f7f7f;

  /* 预定义颜色：颜色加深  */
  --yz-xg-blue: #4a6ed7;
  --yz-xg-blue-panel: #aec6d9;
  --yz-xg-blue-panel-border: #6e7ccf;
  --yz-xg-blue-gradient: #4c99cc;

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

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

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

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

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

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