/* Root variables also reach Element Plus poppers/dialogs teleported to body. */
html[data-theme] {
  --el-bg-color: var(--card);
  --el-bg-color-page: var(--bg);
  --el-bg-color-overlay: var(--card);
  --el-fill-color-blank: var(--card);
  --el-text-color-primary: var(--text);
}

html[data-theme="dark"] {
  --el-text-color-regular: #cbd5e1;
  --el-text-color-secondary: #a3b0c2;
  --el-text-color-placeholder: #8b98aa;
  --el-text-color-disabled: #66758b;
  --el-border-color: #3d4b60;
  --el-border-color-light: #344156;
  --el-border-color-lighter: #2b374a;
  --el-border-color-extra-light: #243044;
  --el-border-color-dark: #526178;
  --el-border-color-darker: #65758d;
  --el-fill-color: #293548;
  --el-fill-color-light: #202c3e;
  --el-fill-color-lighter: #1b2636;
  --el-fill-color-extra-light: #172232;
  --el-fill-color-dark: #344156;
  --el-fill-color-darker: #3d4b60;
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-disabled);
  --el-disabled-border-color: var(--el-border-color-lighter);
  --el-mask-color: rgb(0 0 0 / 65%);
  --el-mask-color-extra-light: rgb(0 0 0 / 35%);
  --el-overlay-color: rgb(0 0 0 / 75%);
  --el-overlay-color-light: rgb(0 0 0 / 65%);
  --el-overlay-color-lighter: rgb(0 0 0 / 55%);
  --el-box-shadow-light: 0 4px 18px rgb(0 0 0 / 35%);
  --el-box-shadow: 0 12px 32px rgb(0 0 0 / 40%);
  --el-color-primary: #60a5fa;
  --el-color-success: #7cc65c;
  --el-color-warning: #e6b35a;
  --el-color-danger: #f08080;
  --el-color-error: #f08080;
  --el-color-info: #a3b0c2;
}

html[data-theme="dark"] {
  --el-color-primary-light-3: color-mix(in srgb, var(--el-color-primary) 70%, var(--card));
  --el-color-primary-light-5: color-mix(in srgb, var(--el-color-primary) 50%, var(--card));
  --el-color-primary-light-7: color-mix(in srgb, var(--el-color-primary) 30%, var(--card));
  --el-color-primary-light-8: color-mix(in srgb, var(--el-color-primary) 20%, var(--card));
  --el-color-primary-light-9: color-mix(in srgb, var(--el-color-primary) 10%, var(--card));
  --el-color-primary-dark-2: #3b82d6;
  --el-color-success-light-3: color-mix(in srgb, var(--el-color-success) 70%, var(--card));
  --el-color-success-light-5: color-mix(in srgb, var(--el-color-success) 50%, var(--card));
  --el-color-success-light-7: color-mix(in srgb, var(--el-color-success) 30%, var(--card));
  --el-color-success-light-8: color-mix(in srgb, var(--el-color-success) 20%, var(--card));
  --el-color-success-light-9: color-mix(in srgb, var(--el-color-success) 10%, var(--card));
  --el-color-success-dark-2: #529b2e;
  --el-color-warning-light-3: color-mix(in srgb, var(--el-color-warning) 70%, var(--card));
  --el-color-warning-light-5: color-mix(in srgb, var(--el-color-warning) 50%, var(--card));
  --el-color-warning-light-7: color-mix(in srgb, var(--el-color-warning) 30%, var(--card));
  --el-color-warning-light-8: color-mix(in srgb, var(--el-color-warning) 20%, var(--card));
  --el-color-warning-light-9: color-mix(in srgb, var(--el-color-warning) 10%, var(--card));
  --el-color-warning-dark-2: #bd8d39;
  --el-color-danger-light-3: color-mix(in srgb, var(--el-color-danger) 70%, var(--card));
  --el-color-danger-light-5: color-mix(in srgb, var(--el-color-danger) 50%, var(--card));
  --el-color-danger-light-7: color-mix(in srgb, var(--el-color-danger) 30%, var(--card));
  --el-color-danger-light-8: color-mix(in srgb, var(--el-color-danger) 20%, var(--card));
  --el-color-danger-light-9: color-mix(in srgb, var(--el-color-danger) 10%, var(--card));
  --el-color-danger-dark-2: #cc6262;
  --el-color-error-light-3: var(--el-color-danger-light-3);
  --el-color-error-light-5: var(--el-color-danger-light-5);
  --el-color-error-light-7: var(--el-color-danger-light-7);
  --el-color-error-light-8: var(--el-color-danger-light-8);
  --el-color-error-light-9: var(--el-color-danger-light-9);
  --el-color-error-dark-2: var(--el-color-danger-dark-2);
  --el-color-info-light-3: color-mix(in srgb, var(--el-color-info) 70%, var(--card));
  --el-color-info-light-5: color-mix(in srgb, var(--el-color-info) 50%, var(--card));
  --el-color-info-light-7: color-mix(in srgb, var(--el-color-info) 30%, var(--card));
  --el-color-info-light-8: color-mix(in srgb, var(--el-color-info) 20%, var(--card));
  --el-color-info-light-9: color-mix(in srgb, var(--el-color-info) 10%, var(--card));
  --el-color-info-dark-2: #8491a3;
}

html[data-theme] .hint a { color: var(--el-color-primary); }
html[data-theme] input, html[data-theme] textarea, html[data-theme] button { font-family: inherit; }
html[data-theme] pre { color: var(--el-text-color-regular); }