/**
 * Element Plus 主题覆盖（基于 EOS Design Token）
 * 说明：
 * 1) 使用 :root 定义 Light 模式下的 Element Plus CSS 变量；
 * 2) 使用 html.dark 定义 Dark 模式下的 Element Plus CSS 变量；
 */

@use './semantic/light' as light;
@use './semantic/dark' as dark;
@use './semantic/index' as common;
@use './semantic/css-vars' as *;
@use './base/color' as base;
@use 'sass:color';

html:root {
  /* 基础黑白 */
  --el-color-white: #{base.$base-white};
  --el-color-black: #{base.$base-black};

  /* 主色（Primary）与阶梯 */
  --el-color-primary: var(--primary-6); // 默认
  --el-color-primary-light-3: var(--primary-5); // hover
  --el-color-primary-light-5: var(--primary-4, #{light.$primary-4}); // focus（outline）
  --el-color-primary-light-7: var(--primary-3); // hover（边框）
  --el-color-primary-light-8: var(--primary-2); // 浅背景（弱强调）
  --el-color-primary-light-9: var(--primary-1); // hover/selected（背景）
  --el-color-primary-dark-2: var(--primary-7); // active（按下）
  --el-color-primary-rgb: var(--primary-6-rgb); // rgba 组合

  /* 成功/警告/危险/信息 */
  --el-color-success: var(--success-normal);
  --el-color-success-light-3: var(--success-hover);
  --el-color-success-light-5: #{base.$green-4};
  --el-color-success-light-7: #{base.$green-3};
  --el-color-success-light-8: var(--success-particular);
  --el-color-success-light-9: var(--success-surface);
  --el-color-success-dark-2: var(--success-clicked);
  --el-color-success-rgb: var(--success-normal-rgb);

  --el-color-warning: var(--warning-normal);
  --el-color-warning-light-3: var(--warning-hover);
  --el-color-warning-light-5: #{base.$orange-4};
  --el-color-warning-light-7: #{base.$orange-3};
  --el-color-warning-light-8: var(--warning-particular);
  --el-color-warning-light-9: var(--warning-surface);
  --el-color-warning-dark-2: var(--warning-clicked);
  --el-color-warning-rgb: var(--warning-normal-rgb);

  --el-color-danger: var(--danger-main);
  --el-color-danger-light-3: var(--danger-hover);
  --el-color-danger-light-5: #{base.$red-4};
  --el-color-danger-light-7: #{base.$red-3};
  --el-color-danger-light-8: var(--danger-particular);
  --el-color-danger-light-9: var(--danger-surface);
  --el-color-danger-dark-2: var(--danger-clicked);
  --el-color-danger-rgb: var(--danger-main-rgb);

  /* Element Plus 将 error 和 danger 等价，这里统一映射到 danger 语义 */
  --el-color-error: var(--danger-main);
  --el-color-error-light-3: var(--danger-hover);
  --el-color-error-light-5: #{base.$red-4};
  --el-color-error-light-7: #{base.$red-3};
  --el-color-error-light-8: var(--danger-particular);
  --el-color-error-light-9: var(--danger-surface);
  --el-color-error-dark-2: var(--danger-clicked);
  --el-color-error-rgb: var(--danger-main-rgb);

  /* 信息色选择冷灰作为 info */
  --el-color-info: #{base.$coolgrey-6};
  --el-color-info-light-3: #{base.$coolgrey-5};
  --el-color-info-light-5: #{base.$coolgrey-4};
  --el-color-info-light-7: #{base.$coolgrey-3};
  --el-color-info-light-8: #{base.$coolgrey-2};
  --el-color-info-light-9: #{base.$coolgrey-1};
  --el-color-info-dark-2: #{base.$coolgrey-7};
  --el-color-info-rgb: #{color.channel(base.$coolgrey-6, 'red', $space: rgb)}, #{color.channel(base.$coolgrey-6, 'green', $space: rgb)}, #{color.channel(base.$coolgrey-6, 'blue', $space: rgb)};

  /* 文本颜色 */
  --el-text-color-primary: var(--text-main, #{light.$text-main});
  --el-text-color-regular: var(--text-secondary, #{light.$text-secondary});
  --el-text-color-secondary: var(--text-secondary, #{light.$text-secondary});
  --el-text-color-placeholder: var(--text-placeholder, #{light.$text-placeholder-disabled});
  --el-text-color-disabled: var(--text-placeholder, #{light.$text-placeholder-disabled});

  /* 边框颜色体系 */
  --el-border-color: var(--border-main, #{light.$border-main});
  --el-border-color-light: var(--border-light, #{light.$border-light});
  --el-border-color-lighter: #{base.$opacblack-2_04};
  --el-border-color-darker: var(--border-strong, #{light.$border-Strong});
  --el-border-color-extra-light: #{base.$opacblack-1_02};
  --el-border-color-hover: var(--border-strong, #{light.$border-Strong});
  --el-border-width: var(--stroke-main, #{common.$stroke-main});

  /* 背景与填充 */
  --el-bg-color: #{base.$base-white};
  --el-bg-color-page: #{base.$neutralgrey-2};
  --el-bg-color-overlay: #{base.$base-white};
  --el-fill-color: var(--filled-content, #{light.$filled-content});
  --el-fill-color-light: var(--filled-bottom, #{light.$filled-bottom});
  //--el-fill-color-lighter: #{base.$opacblack-1_02};
  //--el-fill-color-extra-light: #{base.$opacblack-1_02};
  --el-fill-color-blank: #{base.$base-white};
  --el-fill-color-dark: var(--filled-strong, #{light.$filled-strong});
  --el-fill-color-darker: var(--filled-extra-strong, #{light.$filled-extra-strong});
  --el-overlay-color: var(--opacfilled-tooltip-toast-cover, #{light.$opacfilled-tooltip_toast_cover});
  --el-overlay-color-light: var(--opacfilled-main-cover, #{light.$opacfilled-main-cover});
  --el-overlay-color-lighter: var(--opacfilled-light-cover, #{light.$opacfilled-light-cover});
  --el-mask-color: #{base.$opacwhite-9_75};
  --el-mask-color-extra-light: #{base.$opacwhite-6_30};

  /* 圆角、字号、字族 */
  --el-border-radius-small: var(--radius-small, #{common.$radius-small});
  --el-border-radius-base: var(--radius-main, #{common.$radius-main});
  --el-border-radius-round: var(--radius-ultra-large, #{common.$radius-ultra-large});
  --el-border-radius-circle: var(--radius-full, #{common.$radius-full});

  /* 字体大小引用 token 值，确保在 token.scss 修改后能生效 */
  --el-font-size-base: var(--typography-body-size-main, #{common.$typography-body-size-main});
  --el-font-size-small: var(--typography-body-size-small, #{common.$typography-body-size-small});
  --el-font-size-large: var(--typography-body-size-large, #{common.$typography-body-size-large});

  /* 字体字重：从通用排版刻度接入，用于按钮等组件的主字重 */
  --el-font-weight-primary: var(--typography-body-font-weight-strong, #{common.$typography-body-font-weight-strong});
  --el-font-family: 'DIN Alternate', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  --el-font-line-height-primary: var(--typography-headline-size-small, #{common.$typography-headline-size-small});

  --el-font-size-extra-small: var(--typography-body-size-small, #{common.$typography-body-size-small});
  --el-font-size-medium: var(--typography-body-size-large, #{common.$typography-body-size-large});
  --el-font-size-extra-large: var(--typography-title-size-large, #{common.$typography-title-size-large});

  /* 组件尺寸（用于 Input/DatePicker 等按 size 切换的高度/行高） */
  --el-component-size: #{common.$number-n32};
  --el-component-size-default: #{common.$number-n32};
  --el-component-size-small: #{common.$number-n24};
  --el-component-size-large: #{common.$number-n40};
}

html.dark:root {
  color-scheme: dark;
  /* 基础黑白保持一致 */
  --el-color-white: #{base.$base-white};
  --el-color-black: #{base.$base-black};

  /* 主色（反转阶梯） */
  --el-color-primary: var(--primary-6);
  --el-color-primary-light-3: var(--primary-5);
  --el-color-primary-light-5: var(--primary-4);
  --el-color-primary-light-7: var(--primary-3);
  --el-color-primary-light-8: var(--primary-2);
  --el-color-primary-light-9: var(--primary-1);
  --el-color-primary-dark-2: var(--primary-7);
  --el-color-primary-rgb: var(--primary-6-rgb);

  --el-color-success: var(--success-normal);
  --el-color-success-light-3: var(--success-hover);
  --el-color-success-light-5: #{base.$green-3};
  --el-color-success-light-7: #{base.$green-2};
  --el-color-success-light-8: var(--success-particular);
  --el-color-success-light-9: var(--success-surface);
  --el-color-success-dark-2: var(--success-clicked);
  --el-color-success-rgb: var(--success-normal-rgb);

  --el-color-warning: var(--warning-normal);
  --el-color-warning-light-3: var(--warning-hover);
  --el-color-warning-light-5: #{base.$orange-3};
  --el-color-warning-light-7: #{base.$orange-2};
  --el-color-warning-light-8: var(--warning-particular);
  --el-color-warning-light-9: var(--warning-surface);
  --el-color-warning-dark-2: var(--warning-clicked);
  --el-color-warning-rgb: var(--warning-normal-rgb);

  --el-color-danger: var(--danger-main);
  --el-color-danger-light-3: var(--danger-hover);
  --el-color-danger-light-5: #{base.$red-3};
  --el-color-danger-light-7: #{base.$red-2};
  --el-color-danger-light-8: var(--danger-particular);
  --el-color-danger-light-9: var(--danger-surface);
  --el-color-danger-dark-2: var(--danger-clicked);
  --el-color-danger-rgb: var(--danger-main-rgb);

  --el-color-error: var(--danger-main);
  --el-color-error-light-3: var(--danger-hover);
  --el-color-error-light-5: #{base.$red-3};
  --el-color-error-light-7: #{base.$red-2};
  --el-color-error-light-8: var(--danger-particular);
  --el-color-error-light-9: var(--danger-surface);
  --el-color-error-dark-2: var(--danger-clicked);
  --el-color-error-rgb: var(--danger-main-rgb);

  --el-color-info: #{base.$coolgrey-5};
  --el-color-info-light-3: #{base.$coolgrey-4};
  --el-color-info-light-5: #{base.$coolgrey-3};
  --el-color-info-light-7: #{base.$coolgrey-2};
  --el-color-info-light-8: #{base.$coolgrey-1};
  --el-color-info-light-9: #{base.$coolgrey-1};
  --el-color-info-dark-2: #{base.$coolgrey-7};
  --el-color-info-rgb: #{color.channel(base.$coolgrey-5, 'red', $space: rgb)}, #{color.channel(base.$coolgrey-5, 'green', $space: rgb)}, #{color.channel(base.$coolgrey-5, 'blue', $space: rgb)};

  /* 文本颜色（Dark 反转） */
  --el-text-color-primary: var(--text-main, #{dark.$text-main});
  //--el-text-color-regular: var(--text-regular, #{dark.$text-regular});
  --el-text-color-secondary: var(--text-secondary, #{dark.$text-secondary});
  --el-text-color-placeholder: var(--text-placeholder, #{dark.$text-placeholder-disabled});
  --el-text-color-disabled: var(--text-placeholder, #{dark.$text-placeholder-disabled});

  /* 边框颜色（Dark） */
  --el-border-color: var(--border-main, #{dark.$border-main});
  --el-border-color-light: var(--border-light, #{dark.$border-light});
  --el-border-color-lighter: #{base.$opacwhite-1_02};
  --el-border-color-darker: var(--border-strong, #{dark.$border-Strong});
  --el-border-color-extra-light: #{base.$opacwhite-1_02};
  --el-border-color-hover: var(--border-strong, #{dark.$border-Strong});

  /* 背景与填充（Dark） */
  --el-bg-color: #{base.$coolgrey-10};
  --el-bg-color-page: #{base.$coolgrey-9};
  --el-bg-color-overlay: #{base.$coolgrey-9};
  --el-fill-color: var(--filled-strong, #{dark.$filled-strong});
  --el-fill-color-light: var(--filled-content, #{dark.$filled-content});
  //--el-fill-color-lighter: #{base.$opacwhite-1_02};
  //--el-fill-color-extra-light: #{base.$opacwhite-1_02};
  --el-fill-color-blank: #{base.$base-white};
  --el-fill-color-dark: #{base.$coolgrey-7};
  --el-fill-color-darker: #{base.$coolgrey-6};
  --el-overlay-color: var(--opacfilled-tooltip-toast-cover, #{dark.$opacfilled-tooltip_toast_cover});
  --el-overlay-color-light: var(--opacfilled-main-cover, #{dark.$opacfilled-main-cover});
  --el-overlay-color-lighter: var(--opacfilled-light-cover, #{dark.$opacfilled-light-cover});
  --el-mask-color: #{base.$opacblack-9_75};
  --el-mask-color-extra-light: #{base.$opacblack-6_30};
}