/* ==========================================================================
   仙媒科技 · 设计令牌 Design Tokens  V1.0
   规则：全站颜色 / 圆角 / 阴影 / 间距一律走变量，禁止写死色值。
   换主色只需改 :root 里的 --brand-primary 三兄弟 + 运行 applyTheme()。
   ========================================================================== */

:root {
  /* ---------- 品牌基色（来自《仙媒科技品牌配色方案 V3.0》） ---------- */
  --brand-green: #00923f;
  --brand-green-deep: #006b30;
  --brand-green-bright: #14a94e;
  --brand-green-pale: #e8f6ec;
  --brand-gold: #c6a15b;
  --brand-gold-deep: #9a7a3e;
  --brand-gold-light: #ebddbb;
  --brand-red: #da251d;
  --brand-blue: #0ba0d8;
  --brand-ink: #1f1a17;
  --brand-cream: #f7f5ef;

  /* ---------- 主色 / 辅色（可运行时替换，全站跟随） ---------- */
  --brand-primary: var(--brand-green);
  --brand-primary-deep: var(--brand-green-deep);
  --brand-primary-bright: var(--brand-green-bright);
  --brand-primary-soft: var(--brand-green-pale);
  --brand-accent: var(--brand-gold);
  --brand-accent-deep: var(--brand-gold-deep);
  --brand-accent-soft: var(--brand-gold-light);

  /* ---------- 深色区块（由主色混出，换主色不会撞色）---------- */
  --deep-a: color-mix(in srgb, var(--brand-primary) 16%, #0a1710);
  --deep-b: color-mix(in srgb, var(--brand-primary) 5%, #050d09);
  --deep-c: color-mix(in srgb, var(--brand-primary) 10%, #081510);
  /* 首屏星网粒子 */
  --star-particle: var(--brand-primary-bright);
  --star-line: var(--brand-accent);

  /* ---------- 中性灰阶（浅色主题） ---------- */
  --n-0: #ffffff;
  --n-25: #fbfcf9;
  --n-50: #f4f6f2;
  --n-100: #ecefe8;
  --n-200: #dfe4da;
  --n-300: #c9d0c3;
  --n-400: #a3ac9c;
  --n-500: #7d8776;
  --n-600: #5f695a;
  --n-700: #414a3e;
  --n-800: #2a322a;
  --n-900: #1a201a;

  /* ---------- 语义色（底色由主色微染：换主色，整页氛围一起变） ---------- */
  --bg-page: color-mix(in srgb, var(--brand-primary) 6%, var(--n-50));
  --bg-card: var(--n-0);
  --bg-subtle: color-mix(in srgb, var(--brand-primary) 6%, var(--n-25));
  --bg-sunken: color-mix(in srgb, var(--brand-primary) 11%, #edf0e9);
  --brand-wash: color-mix(in srgb, var(--brand-primary) 8%, var(--n-0));
  --brand-wash-2: color-mix(in srgb, var(--brand-primary) 14%, var(--n-0));
  --text-1: #1c231c;
  --text-2: #4d574b;
  --text-3: #7d8776;
  --text-invert: #ffffff;
  --line-1: #e3e7de;
  --line-2: #d3d9cc;
  --line-strong: #b9c1b1;

  --state-success: #0f7a45;
  --state-warning: var(--brand-gold-deep);
  --state-danger: var(--brand-red);
  --state-info: #5f695a;

  /* ---------- 圆角 ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- 阴影（带绿灰调，不用纯黑） ---------- */
  --shadow-1: 0 1px 2px rgba(24, 40, 28, .06), 0 1px 1px rgba(24, 40, 28, .04);
  --shadow-2: 0 4px 14px rgba(24, 40, 28, .08), 0 1px 3px rgba(24, 40, 28, .05);
  --shadow-3: 0 12px 34px rgba(24, 40, 28, .12), 0 2px 8px rgba(24, 40, 28, .06);
  --shadow-4: 0 24px 64px rgba(18, 32, 22, .18);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);

  /* ---------- 间距（4 的倍数） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- 字体 ---------- */
  --font-cn: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "STSong", serif;

  /* ---------- 布局 ---------- */
  --layout-side-w: 220px;
  --layout-side-w-collapsed: 64px;
  --layout-header-h: 60px;
  --layout-gutter: var(--sp-6);
  --scrollbar-w: 6px;
  --scrollbar-thumb: rgba(255, 255, 255, .22);
  --scrollbar-thumb-hover: rgba(255, 255, 255, .42);
  --motion-fast: .15s;
  --motion-base: .2s;
  --motion-slow: .35s;
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  /* ---------- 侧栏（深色底 = 主色压暗，换主色侧栏整块跟着换） ---------- */
  --side-bg-a: color-mix(in srgb, var(--brand-primary) 36%, #040b07);
  --side-bg-b: color-mix(in srgb, var(--brand-primary) 15%, #020604);
  --side-glow: color-mix(in srgb, var(--brand-primary) 34%, transparent);
  --side-text: #a8b8ac;
  --side-text-active: #ffffff;
  --side-item-hover: rgba(255, 255, 255, .06);
  --side-item-active: color-mix(in srgb, var(--brand-primary) 34%, transparent);
  --side-line: rgba(255, 255, 255, .07);

  /* ---------- 登录/星空 ---------- */
  --star-base: #05100b;
  --star-particle: var(--brand-green-bright);
  --star-line: var(--brand-gold);
}

/* ==========================================================================
   深色主题
   ========================================================================== */
[data-theme="dark"] {
  --n-0: #0f1a14;
  --n-25: #131f18;
  --n-50: #0a120e;
  --n-100: #16241c;
  --n-200: #1e3126;
  --n-300: #2a4234;
  --n-400: #4b6354;
  --n-500: #6d8577;
  --n-600: #94a99b;
  --n-700: #bccdc1;
  --n-800: #dbe7de;
  --n-900: #eef5f0;

  --bg-page: color-mix(in srgb, var(--brand-primary) 12%, #060c08);
  --bg-card: color-mix(in srgb, var(--brand-primary) 7%, #0d1712);
  --bg-subtle: color-mix(in srgb, var(--brand-primary) 10%, #0a120d);
  --bg-sunken: color-mix(in srgb, var(--brand-primary) 6%, #050a07);
  --brand-wash: color-mix(in srgb, var(--brand-primary) 14%, #0d1712);
  --brand-wash-2: color-mix(in srgb, var(--brand-primary) 20%, #0d1712);
  --text-1: #e9f2ec;
  --text-2: #a9bdae;
  --text-3: #7b917f;
  --text-invert: #08120c;
  --line-1: #1d2f24;
  --line-2: #27402f;
  --line-strong: #35553e;

  --state-success: #35c07a;
  --state-warning: var(--brand-gold-light);
  --state-danger: #ff6a5f;
  --state-info: #8fa596;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-3: 0 14px 40px rgba(0, 0, 0, .55);
  --shadow-4: 0 28px 70px rgba(0, 0, 0, .6);

  --side-bg-a: color-mix(in srgb, var(--brand-primary) 28%, #050b07);
  --side-bg-b: color-mix(in srgb, var(--brand-primary) 11%, #020604);
  --side-glow: color-mix(in srgb, var(--brand-primary) 26%, transparent);
}

/* 主题过渡（仅切主题时启用，避免影响交互性能） */
html.theme-anim,
html.theme-anim * {
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

/* ==========================================================================
   Element Plus 令牌接管
   目标：页面上不出现系统默认蓝，全部走品牌令牌
   ========================================================================== */
:root {
  --el-color-primary: var(--brand-primary);
  --el-color-primary-light-3: color-mix(in srgb, var(--brand-primary) 70%, var(--bg-card));
  --el-color-primary-light-5: color-mix(in srgb, var(--brand-primary) 50%, var(--bg-card));
  --el-color-primary-light-7: color-mix(in srgb, var(--brand-primary) 30%, var(--bg-card));
  --el-color-primary-light-8: color-mix(in srgb, var(--brand-primary) 20%, var(--bg-card));
  --el-color-primary-light-9: color-mix(in srgb, var(--brand-primary) 10%, var(--bg-card));
  --el-color-primary-dark-2: var(--brand-primary-deep);

  --el-color-success: var(--state-success);
  --el-color-success-light-9: color-mix(in srgb, var(--state-success) 10%, var(--bg-card));
  --el-color-warning: var(--state-warning);
  --el-color-warning-light-9: color-mix(in srgb, var(--state-warning) 12%, var(--bg-card));
  --el-color-danger: var(--state-danger);
  --el-color-danger-light-9: color-mix(in srgb, var(--state-danger) 10%, var(--bg-card));
  --el-color-error: var(--state-danger);
  --el-color-info: var(--state-info);
  --el-color-info-light-9: color-mix(in srgb, var(--state-info) 10%, var(--bg-card));

  --el-bg-color: var(--bg-card);
  --el-bg-color-page: var(--bg-page);
  --el-bg-color-overlay: var(--bg-card);
  --el-text-color-primary: var(--text-1);
  --el-text-color-regular: var(--text-2);
  --el-text-color-secondary: var(--text-3);
  --el-text-color-placeholder: var(--n-400);
  --el-text-color-disabled: var(--n-400);

  --el-border-color: var(--line-2);
  --el-border-color-light: var(--line-1);
  --el-border-color-lighter: var(--line-1);
  --el-border-color-extra-light: var(--line-1);
  --el-border-color-dark: var(--line-strong);
  --el-border-color-darker: var(--line-strong);
  --el-border-color-hover: var(--line-strong);

  --el-fill-color: var(--bg-subtle);
  --el-fill-color-light: var(--bg-subtle);
  --el-fill-color-lighter: var(--bg-subtle);
  --el-fill-color-extra-light: var(--bg-subtle);
  --el-fill-color-dark: var(--bg-sunken);
  --el-fill-color-darker: var(--bg-sunken);
  --el-fill-color-blank: var(--bg-card);

  --el-border-radius-base: var(--r-md);
  --el-border-radius-small: var(--r-sm);
  --el-border-radius-round: var(--r-pill);
  --el-font-size-base: 14px;
  --el-font-family: var(--font-cn);

  --el-box-shadow: var(--shadow-3);
  --el-box-shadow-light: var(--shadow-2);
  --el-box-shadow-lighter: var(--shadow-1);
  --el-box-shadow-dark: var(--shadow-4);

  --el-disabled-bg-color: var(--bg-sunken);
  --el-disabled-text-color: var(--n-400);
  --el-disabled-border-color: var(--line-1);
  --el-mask-color: rgba(6, 18, 11, .62);
  --el-mask-color-extra-light: rgba(6, 18, 11, .28);

  --el-table-header-bg-color: var(--brand-wash);
  --el-table-header-text-color: var(--text-2);
  --el-table-border-color: var(--line-1);
  --el-table-row-hover-bg-color: color-mix(in srgb, var(--brand-primary) 6%, var(--bg-card));
  --el-table-current-row-bg-color: color-mix(in srgb, var(--brand-primary) 9%, var(--bg-card));
  --el-table-bg-color: var(--bg-card);
  --el-table-tr-bg-color: var(--bg-card);

  --el-dialog-bg-color: var(--bg-card);
  --el-dialog-border-radius: var(--r-lg);
  --el-popover-border-radius: var(--r-md);

  --el-input-focus-border-color: var(--brand-primary);
  --el-input-hover-border-color: var(--line-strong);

  --el-menu-bg-color: transparent;
  --el-menu-text-color: var(--side-text);
  --el-menu-active-color: var(--side-text-active);
  --el-menu-hover-bg-color: var(--side-item-hover);
  --el-menu-item-height: 44px;
  --el-menu-sub-item-height: 40px;
  --el-menu-base-level-padding: 18px;

  --el-font-weight-primary: 600;

  --el-slider-main-bg-color: var(--brand-primary);
  --el-slider-runway-bg-color: var(--line-2);
  --el-slider-stop-bg-color: var(--bg-card);
  --el-switch-on-color: var(--brand-primary);
  --el-switch-off-color: var(--line-strong);
}

/* 组件级细节修正：去掉一切残留默认色 */
.el-button--primary:not(.is-text):not(.is-link) {
  --el-button-hover-bg-color: var(--brand-primary-bright);
  --el-button-hover-border-color: var(--brand-primary-bright);
  --el-button-active-bg-color: var(--brand-primary-deep);
  --el-button-active-border-color: var(--brand-primary-deep);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.el-button.is-text, .el-button.is-link { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.el-button.is-text, .el-button.is-link { --el-button-text-color: var(--brand-primary-deep); }
.el-button.is-text:hover, .el-button.is-link:hover { --el-button-hover-text-color: var(--brand-primary); }

.el-link.el-link--primary { --el-link-text-color: var(--brand-primary-deep); }

/* 焦点环：统一品牌色，不出现浏览器蓝框 */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--brand-primary) 24%, transparent);
  color: var(--text-1);
}

/* 滚动条：Chromium 走 ::-webkit-scrollbar 自定义，Firefox 才用标准属性
   （两者同时写会让 Chromium 放弃自定义样式，务必分开） */
@supports not (selector(::-webkit-scrollbar)) {
  * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
}

/* 分页 / 单选 / 复选 / 开关 / 步骤条 全部随主色 */
.el-pagination { --el-pagination-hover-color: var(--brand-primary); }
.el-pagination.is-background .el-pager li.is-active {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: var(--brand-primary) !important;
}
.el-pagination.is-background .el-pager li:hover { color: var(--brand-primary); }

.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: -1px 0 0 0 var(--brand-primary);
  color: #fff;
}

.el-tabs__item.is-active { color: var(--brand-primary-deep); }
.el-tabs__active-bar { background-color: var(--brand-primary); }
.el-tabs__item:hover { color: var(--brand-primary); }

.el-switch.is-checked .el-switch__core {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.el-tag--primary {
  --el-tag-bg-color: color-mix(in srgb, var(--brand-primary) 12%, var(--bg-card));
  --el-tag-border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  --el-tag-text-color: var(--brand-primary-deep);
}

.el-progress-bar__inner { background-color: var(--brand-primary); }

.el-dialog__title { font-weight: 700; letter-spacing: .01em; }
.el-dialog__headerbtn:hover .el-dialog__close { color: var(--brand-primary); }

.el-select-dropdown__item.is-selected { color: var(--brand-primary-deep); }
.el-select__wrapper.is-focused { box-shadow: 0 0 0 1px var(--brand-primary) inset; }

.el-date-table td.current:not(.disabled) .el-date-table-cell__text { background: var(--brand-primary); }
.el-date-table td.today .el-date-table-cell__text { color: var(--brand-primary); }

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--brand-primary-deep); }

.el-message--success { --el-message-bg-color: color-mix(in srgb, var(--state-success) 12%, var(--bg-card)); }
.el-loading-mask { background-color: color-mix(in srgb, var(--bg-card) 78%, transparent); }
.el-loading-spinner .path { stroke: var(--brand-primary); }

.el-button.is-text:hover, .el-button.is-link:hover { background: color-mix(in srgb, var(--brand-primary) 8%, transparent) !important; }