:root {
  color-scheme: light;

  --toy-brand-pink: #ff6699;
  --toy-color-pay: #ffb027;
  --toy-color-operation: #ff7f24;

  --toy-color-action-primary: #00aeec;
  --toy-color-action-hover: #40c5f1;
  --toy-color-action-pressed: #008ac5;
  --toy-color-action-disabled: #80d7f6;
  --toy-color-action-highlight: #dff6fd;

  --toy-color-success: #2ac864;
  --toy-color-warning: #ff7f24;
  --toy-color-error: #f85a54;
  --toy-color-success-highlight: #e4f8ea;
  --toy-color-warning-highlight: #fff0e3;
  --toy-color-error-highlight: #feecea;

  --toy-text-primary: #18191c;
  --toy-text-secondary: #61666d;
  --toy-text-tertiary: #9499a0;
  --toy-text-disabled: #c9ccd0;
  --toy-text-on-color: #ffffff;
  --toy-text-link: #008ac5;

  --toy-bg-base: #ffffff;
  --toy-bg-subtle: #f6f7f8;
  --toy-bg-muted: #f1f2f3;
  --toy-bg-strong: #e3e5e7;
  --toy-bg-float: #ffffff;
  --toy-bg-float-muted: #f1f2f3;
  --toy-graph-bg-bright: #ffffff;
  --toy-graph-bg-thin-float: #f6f7f8;
  --toy-graph-bg-regular-float: #f1f2f3;
  --toy-bg3-float: #f1f2f3;

  --toy-line-subtle: #f1f2f3;
  /* Default outline for enabled information-entry controls and outlined buttons. */
  --toy-line-default: #e3e5e7;
  /* Reserve for borders that require explicit extra emphasis. */
  --toy-line-strong: #c9ccd0;

  --toy-mask-light: #00000033;
  --toy-mask-default: #0000004d;
  --toy-mask-strong: #00000099;

  --toy-space-1: 4px;
  --toy-space-2: 8px;
  --toy-space-3: 16px;
  --toy-space-4: 32px;
  --toy-space-page-1: 20px;
  --toy-space-page-2: 24px;
  --toy-space-page-3: 40px;
  --toy-space-page-4: 60px;
  --toy-space-intro-section: 120px;

  --toy-radius-tag: 4px;
  --toy-radius-card: 6px;
  --toy-radius-control: 8px;
  --toy-radius-special: 16px;
  --toy-radius-full: 999px;

  --toy-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.1);
  --toy-focus-ring: 0 0 0 3px rgba(0, 174, 236, 0.24);
  --toy-content-max: 1360px;
  --toy-intro-content-max: 1200px;

  --toy-font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  --toy-font-weight-regular: 400;
  --toy-font-weight-medium: 500;
  --toy-font-size-body: 14px;
  --toy-line-height-body: 20px;
  --toy-font-size-table-header: 12px;
  --toy-line-height-table-header: 17px;
  --toy-font-size-table-detail: 13px;
  --toy-line-height-table-detail: 18px;

  --toy-control-height-small: 32px;
  --toy-control-height-default: 34px;
  --toy-control-height-large: 40px;
  --toy-table-control-target: 44px;
  --toy-checkbox-size: 18px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --toy-brand-pink: #d44e7d;
  --toy-color-pay: #db8700;
  --toy-color-operation: #d66011;

  --toy-color-action-primary: #0087bd;
  --toy-color-action-hover: #2c9cc8;
  --toy-color-action-pressed: #2c9cc8;
  --toy-color-action-disabled: #174b60;
  --toy-color-action-highlight: #0b202a;

  --toy-color-success: #1fa251;
  --toy-color-warning: #d66011;
  --toy-color-error: #d1403e;
  --toy-color-success-highlight: #11271b;
  --toy-color-warning-highlight: #301b10;
  --toy-color-error-highlight: #2e1617;

  --toy-text-primary: #e7e9eb;
  --toy-text-secondary: #a2a7ae;
  --toy-text-tertiary: #757a81;
  --toy-text-disabled: #46494d;
  --toy-text-on-color: #ffffff;
  --toy-text-link: #2c9cc8;

  --toy-bg-base: #17181a;
  --toy-bg-subtle: #0d0d0e;
  --toy-bg-muted: #000000;
  --toy-bg-strong: #2f3134;
  --toy-bg-float: #242628;
  --toy-bg-float-muted: #1f2022;
  --toy-graph-bg-bright: #2f3134;
  --toy-graph-bg-thin-float: #2b2c2f;
  --toy-graph-bg-regular-float: #2f3134;
  --toy-bg3-float: #1a1b1d;

  --toy-line-subtle: #232527;
  /* Default outline for enabled information-entry controls and outlined buttons. */
  --toy-line-default: #2f3134;
  /* Reserve for borders that require explicit extra emphasis. */
  --toy-line-strong: #46494d;

  --toy-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.5);
  --toy-focus-ring: 0 0 0 3px rgba(44, 156, 200, 0.34);
}