/**
 * Element Plus 暗黑模式主题变量
 * 
 * 注意：主题色变体（light-1 到 light-9, dark-2）由 theme.ts 动态生成
 * 此文件仅提供默认基础值和组件特定样式
 */

html.dark {
  --el-color-primary: #3b82f6;
  --el-color-success: #10b981;
  --el-color-warning: #f59e0b;
  --el-color-danger: #ef4444;
  --el-color-info: #64748b;

  --el-bg-color: #020617;
  --el-bg-color-page: #020617;
  --el-bg-color-overlay: #0f172a;
  --el-fill-color-blank: #020617;

  --el-fill-color: #0f172a;
  --el-fill-color-light: #1e293b;
  --el-fill-color-lighter: #0f172a;
  --el-fill-color-extra-light: #020617;
  --el-fill-color-dark: #334155;
  --el-fill-color-darker: #475569;

  --el-text-color-primary: #f8fafc;
  --el-text-color-regular: #e2e8f0;
  --el-text-color-secondary: #94a3b8;
  --el-text-color-placeholder: #64748b;

  --el-border-color: #1e293b;
  --el-border-color-light: #334155;
  --el-border-color-lighter: #475569;
  --el-border-color-extra-light: #64748b;
  --el-border-color-dark: #0f172a;
  --el-border-color-darker: #020617;

  --el-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  --el-box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --el-box-shadow-lighter: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.24);

  --el-disabled-bg-color: #0f172a;
  --el-disabled-text-color: #475569;
  --el-disabled-border-color: #1e293b;

  --el-overlay-color: rgba(0, 0, 0, 0.7);
  --el-overlay-color-light: rgba(0, 0, 0, 0.5);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.3);

  --el-scrollbar-bg-color: #0f172a;
  --el-scrollbar-thumb-color: #334155;
  --el-scrollbar-thumb-hover-color: #475569;

  --el-table-bg-color: var(--el-fill-color-extra-light);
  --el-table-tr-bg-color: var(--el-fill-color-extra-light);
  --el-table-header-bg-color: var(--el-fill-color-light);
  --el-table-row-hover-bg-color: var(--el-fill-color);
  --el-table-border-color: var(--el-border-color);

  --el-dialog-width: 50%;
  --el-dialog-margin-top: 15vh;
  --el-dialog-bg-color: var(--el-fill-color);
  --el-dialog-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  --el-dialog-title-font-size: 18px;
  --el-dialog-content-font-size: 14px;
  --el-dialog-font-line-height: 1.5;
  --el-dialog-padding-primary: 16px;
  --el-dialog-border-radius: 4px;

  --el-drawer-bg-color: var(--el-fill-color);
  --el-drawer-padding-primary: 20px;

  --el-dropdown-menu-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --el-dropdown-menuItem-hover-fill: var(--el-fill-color-light);
  --el-dropdown-menuItem-hover-color: var(--el-color-primary);
  --el-dropdown-menu-index: 10;

  --el-popover-bg-color: var(--el-fill-color);
  --el-popover-font-size: 14px;
  --el-popover-border-color: var(--el-border-color);
  --el-popover-padding: 12px;
  --el-popover-padding-large: 18px 20px;
  --el-popover-title-font-size: 16px;
  --el-popover-title-text-color: #f8fafc;
  --el-popover-border-radius: 4px;

  --el-popper-border-radius: 4px;

  --el-card-border-color: var(--el-border-color);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-fill-color);

  --el-badge-bg-color: var(--el-color-danger);
  --el-badge-radius: 10px;
  --el-badge-font-size: 12px;
  --el-badge-padding: 6px;
  --el-badge-size: 18px;

  --el-segmented-color: #e2e8f0;
  --el-segmented-bg-color: var(--el-fill-color);
  --el-segmented-padding: 2px;
  --el-segmented-item-selected-color: #f8fafc;
  --el-segmented-item-selected-bg-color: var(--el-color-primary);
  --el-segmented-item-selected-disabled-bg-color: var(--el-fill-color);
  --el-segmented-item-hover-color: #f8fafc;
  --el-segmented-item-hover-bg-color: var(--el-fill-color-light);
  --el-segmented-item-active-bg-color: var(--el-fill-color-dark);
  --el-segmented-item-disabled-color: #64748b;

  --el-tour-width: 520px;
  --el-tour-padding-primary: 12px;
  --el-tour-font-line-height: 1.5;
  --el-tour-title-font-size: 16px;
  --el-tour-title-text-color: #f8fafc;
  --el-tour-title-font-weight: 400;
  --el-tour-close-color: #94a3b8;
  --el-tour-font-size: 14px;
  --el-tour-color: #f8fafc;
  --el-tour-bg-color: var(--el-fill-color);
  --el-tour-border-radius: 4px;

  --el-anchor-bg-color: var(--el-fill-color);
  --el-anchor-padding-indent: 14px;
  --el-anchor-line-height: 22px;
  --el-anchor-font-size: 12px;
  --el-anchor-color: #94a3b8;
  --el-anchor-active-color: var(--el-color-primary);
  --el-anchor-marker-bg-color: var(--el-color-primary);

  --el-mention-font-size: 14px;
  --el-mention-bg-color: var(--el-fill-color);
  --el-mention-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --el-mention-border: 1px solid var(--el-border-color);
  --el-mention-option-color: #e2e8f0;
  --el-mention-option-height: 34px;
  --el-mention-option-min-width: 100px;
  --el-mention-option-hover-background: var(--el-fill-color-light);
  --el-mention-option-selected-color: var(--el-color-primary);
  --el-mention-option-disabled-color: #64748b;
  --el-mention-option-loading-color: #94a3b8;
  --el-mention-option-loading-padding: 10px 0;
  --el-mention-max-height: 174px;
  --el-mention-padding: 6px 0;
  --el-mention-header-padding: 10px;
  --el-mention-footer-padding: 10px;

  --el-skeleton-color: var(--el-fill-color);
  --el-skeleton-to-color: var(--el-fill-color-dark);

  --el-alert-padding: 8px 16px;
  --el-alert-border-radius-base: 4px;
  --el-alert-title-font-size: 14px;
  --el-alert-title-with-description-font-size: 16px;
  --el-alert-description-font-size: 14px;
  --el-alert-close-font-size: 16px;
  --el-alert-close-customed-font-size: 14px;
  --el-alert-icon-size: 16px;
  --el-alert-icon-large-size: 28px;

  --el-messagebox-title-color: #f8fafc;
  --el-messagebox-width: 420px;
  --el-messagebox-border-radius: 4px;
  --el-messagebox-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  --el-messagebox-font-size: 18px;
  --el-messagebox-content-font-size: 14px;
  --el-messagebox-content-color: #e2e8f0;
  --el-messagebox-error-font-size: 12px;
  --el-messagebox-padding-primary: 12px;
  --el-messagebox-font-line-height: 1.5;

  --el-message-bg-color: var(--el-fill-color-light);
  --el-message-border-color: var(--el-border-color);
  --el-message-padding: 11px 15px;
  --el-message-close-size: 16px;
  --el-message-close-icon-color: #94a3b8;
  --el-message-close-hover-color: #64748b;

  --el-notification-width: 330px;
  --el-notification-padding: 14px 26px 14px 13px;
  --el-notification-radius: 8px;
  --el-notification-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --el-notification-border-color: var(--el-border-color);
  --el-notification-icon-size: 24px;
  --el-notification-close-font-size: 16px;
  --el-notification-group-margin-left: 13px;
  --el-notification-group-margin-right: 8px;
  --el-notification-content-font-size: 14px;
  --el-notification-content-color: #e2e8f0;
  --el-notification-title-font-size: 16px;
  --el-notification-title-color: #f8fafc;
  --el-notification-close-color: #94a3b8;
  --el-notification-close-hover-color: #64748b;

  --el-input-text-color: #e2e8f0;
  --el-input-border: 1px solid var(--el-border-color);
  --el-input-hover-border: 1px solid var(--el-border-color-light);
  --el-input-focus-border: 1px solid var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: 4px;
  --el-input-bg-color: var(--el-fill-color);
  --el-input-icon-color: #64748b;
  --el-input-placeholder-color: #64748b;
  --el-input-hover-border-color: var(--el-border-color-light);
  --el-input-clear-hover-color: #94a3b8;
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-width: 100%;

  --el-input-disabled-fill: var(--el-fill-color);
  --el-input-disabled-border: var(--el-border-color);
  --el-input-disabled-text-color: #64748b;
  --el-input-disabled-placeholder-color: #64748b;

  --el-select-border-color-hover: var(--el-border-color-light);
  --el-select-disabled-color: #64748b;
  --el-select-disabled-border: var(--el-border-color);
  --el-select-font-size: 14px;
  --el-select-close-hover-color: #94a3b8;
  --el-select-input-color: #64748b;
  --el-select-multiple-input-color: #e2e8f0;
  --el-select-input-focus-border-color: var(--el-color-primary);
  --el-select-input-font-size: 14px;
  --el-select-width: 100%;

  --el-select-option-text-color: #e2e8f0;
  --el-select-option-disabled-color: #64748b;
  --el-select-option-height: 34px;
  --el-select-option-hover-background: var(--el-fill-color-light);
  --el-select-option-selected-text-color: var(--el-color-primary);

  --el-select-group-text-color: #94a3b8;
  --el-select-group-height: 34px;
  --el-select-group-font-size: 12px;

  --el-select-dropdown-bg-color: var(--el-fill-color);
  --el-select-dropdown-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --el-select-dropdown-empty-color: #94a3b8;
  --el-select-dropdown-max-height: 274px;
  --el-select-dropdown-padding: 6px 0;
  --el-select-dropdown-empty-padding: 10px 0;
  --el-select-dropdown-header-padding: 10px;
  --el-select-dropdown-footer-padding: 10px;
  --el-select-dropdown-border: 1px solid var(--el-border-color);

  --el-tag-font-size: 12px;
  --el-tag-border-radius: 4px;
  --el-tag-border-radius-rounded: 9999px;
  --el-tag-bg-color: var(--el-fill-color-light);
  --el-tag-border-color: var(--el-border-color);
  --el-tag-text-color: #e2e8f0;
  --el-tag-close-color: #94a3b8;
  --el-tag-close-hover-color: #64748b;

  --el-button-font-weight: 500;
  --el-button-border-color: var(--el-border-color);
  --el-button-bg-color: var(--el-fill-color);
  --el-button-text-color: #e2e8f0;
  --el-button-disabled-text-color: #64748b;
  --el-button-disabled-bg-color: var(--el-fill-color);
  --el-button-disabled-border-color: var(--el-border-color);
  --el-button-divide-border-color: rgba(255, 255, 255, 0.1);

  --el-tooltip-font-size: 12px;
  --el-tooltip-border-color: var(--el-border-color);
  --el-tooltip-fill: var(--el-fill-color-light);
  --el-tooltip-light-border-color: var(--el-border-color-light);
  --el-tooltip-light-fill: var(--el-fill-color);

  --el-cascader-menu-text-color: #e2e8f0;
  --el-cascader-menu-selected-text-color: var(--el-color-primary);
  --el-cascader-menu-fill: var(--el-fill-color);
  --el-cascader-menu-font-size: 14px;
  --el-cascader-menu-radius: 4px;
  --el-cascader-menu-border: solid 1px var(--el-border-color);
  --el-cascader-menu-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --el-cascader-node-background-hover: var(--el-fill-color-light);
  --el-cascader-node-color-disabled: #64748b;
  --el-cascader-color-empty: #64748b;
  --el-cascader-tag-background: var(--el-fill-color-light);

  --el-statistic-title-font-weight: 400;
  --el-statistic-title-font-size: 12px;
  --el-statistic-title-color: #e2e8f0;
  --el-statistic-content-font-weight: 400;
  --el-statistic-content-font-size: 24px;
  --el-statistic-content-color: #f8fafc;

  --el-switch-on-color: var(--el-color-primary);
  --el-switch-off-color: #1e293b;

  --el-loading-spinner-size: 42px;
  --el-loading-fullscreen-spinner-size: 50px;
  --el-loading-text-color: var(--el-color-primary);

  --el-progress-default-color: var(--el-color-primary);
  --el-progress-inside-text-color: #f8fafc;

  --el-pagination-font-size: 14px;
  --el-pagination-bg-color: var(--el-fill-color);
  --el-pagination-text-color: #e2e8f0;
  --el-pagination-border-radius: 4px;
  --el-pagination-button-color: #e2e8f0;
  --el-pagination-button-width: 32px;
  --el-pagination-button-height: 32px;
  --el-pagination-button-disabled-color: #64748b;
  --el-pagination-button-disabled-bg-color: var(--el-fill-color);
  --el-pagination-hover-color: var(--el-color-primary);

  --el-steps-color: var(--el-border-color);
  --el-steps-text-color: #e2e8f0;
  --el-steps-border-color: var(--el-border-color);

  --el-datepicker-text-color: #e2e8f0;
  --el-datepicker-off-text-color: #64748b;
  --el-datepicker-header-text-color: #e2e8f0;
  --el-datepicker-icon-color: #94a3b8;
  --el-datepicker-border-color: var(--el-border-color);
  --el-datepicker-inner-border-color: var(--el-border-color-light);
  --el-datepicker-inrange-bg-color: var(--el-fill-color-light);
  --el-datepicker-inrange-hover-bg-color: var(--el-fill-color-dark);
  --el-datepicker-active-color: var(--el-color-primary);
  --el-datepicker-hover-text-color: var(--el-color-primary);
  --el-datepicker-cell-hover-color: var(--el-fill-color-light);

  // 布局相关变量 - 由 theme.ts 动态覆盖
  --menu-background: var(--el-fill-color);
  --menu-text: #e2e8f0;
  --menu-active-text: var(--el-color-primary);
  --menu-active-bg: rgba(64, 128, 255, 0.15);
  --menu-hover: var(--el-fill-color-light);

  --sidebar-background: var(--el-fill-color);
  --sidebar-text-color: #e2e8f0;
  --sidebar-active-text-color: var(--el-color-primary);
  --sidebar-active-bg: rgba(64, 128, 255, 0.15);
  --sidebar-active-hover-bg: rgba(64, 128, 255, 0.2);
  --sidebar-hover: var(--el-fill-color-light);
  --sidebar-logo-text-color: var(--el-color-primary);
  --sidebar-logo-background: var(--el-fill-color);
}