/* ============================================================================
 * 诚创部落 · 全站配色权威令牌（金色高贵 Gold Noble）
 * theme-gold.css — 单一可信来源，所有站点/页面统一引用
 * 版本: v1  生效日期: 2026-09-18
 *
 * 设计原则
 *   1) 金只做「强调」，不做大面积底色 —— 大面积铺金会显廉价。
 *   2) 金底配深色字（#2B2100），不配白字 —— 白字压在 #D4AF37 上对比度仅约 2.1:1，
 *      既看不清也显廉价；金 + 深棕字才是「贵」的正确组合。
 *   3) 中性色走暖调（配金更协调），语义色（成功/危险/警告）保持国际惯例不变。
 *   4) 本文件靠「后加载覆盖」生效：必须放在页面最后一个 stylesheet，
 *      Element Plus 的 :root 变量与这里特异性相同，靠顺序取胜。
 * ==========================================================================*/

:root {
  /* ===== 品牌金 ===== */
  --gold:          #D4AF37;  /* 主金：主按钮 / 高亮 / 选中 / 图标 */
  --gold-2:        #B8860B;  /* 深金：hover / active / 链接文字 */
  --gold-3:        #C9A24B;  /* 中金：次级强调 */
  --gold-light:    #E3C768;  /* 浅金：描边 / 悬停底 */
  --gold-lighter:  #F3E9C8;  /* 更浅：标签底 / 分割 */
  --gold-soft:     #FBF7EA;  /* 极浅金：卡片底 / 表格选中行 */
  --gold-mist:     #F7F0DB;  /* 金雾：次级填充 */
  --gold-ink:      #2B2100;  /* 金底上专用深字（对比度 9.4:1） */

  /* 金色渐变 / 光晕（用于主按钮与门户标题，贵气来源） */
  --gold-gradient:      linear-gradient(135deg, #E3C768 0%, #D4AF37 42%, #B8860B 100%);
  --gold-gradient-hover:linear-gradient(135deg, #EBD07A 0%, #D9B544 45%, #C09A1E 100%);
  --gold-gradient-soft: linear-gradient(135deg, #FBF7EA 0%, #F3E9C8 100%);
  --gold-shadow:        0 6px 18px -8px rgba(180, 134, 11, .45);

  /* ===== 中性（暖调）===== */
  --ink-1:   #1E293B;  /* 主文字 */
  --ink-2:   #475569;  /* 次文字 */
  --ink-3:   #94A3B8;  /* 弱文字 / 占位 */
  --line:    #E2E8F0;  /* 边框 */
  --surface: #FFFFFF;  /* 卡片 */
  --canvas:  #F8FAFC;  /* 页面底 */
  --canvas-warm: #F6F4EF; /* 暖白底：登录页 / 门户页 */

  /* ===== 语义色（不改）===== */
  --success: #16A34A;  --success-soft: #DCFCE7;
  --danger:  #EF4444;  --danger-soft:  #FEE2E2;
  --warning: #E6A23C;  --warning-soft: #FDF6EC;
  --info:    #64748B;  --info-soft:    #F1F5F9;

  /* ===== 形状 ===== */
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 4px 14px -6px rgba(16, 24, 40, .12);

  /* ===== 兼容旧变量名（历史页面已在用，保留别名避免破坏）===== */
  --brand-gold:   var(--gold);
  --brand-gold-2: var(--gold-2);
  --gold-d:       var(--gold-2);
  --gold-deep:    var(--gold-2);
  --gold-l:       var(--gold-3);
}

/* ======================================================================
 * 一、Element Plus 金色主色梯度
 * 覆盖默认蓝 #409eff 全梯度，使既有构建产物（Vue SPA）无需重新打包即换色
 * ====================================================================*/
:root {
  --el-color-primary:        #D4AF37;
  --el-color-primary-rgb:    212, 175, 55;
  --el-color-primary-light-3:#DCC15E;
  --el-color-primary-light-5:#E6D387;
  --el-color-primary-light-7:#EFE4B4;
  --el-color-primary-light-8:#F3EBC9;
  --el-color-primary-light-9:#FBF7EA;
  --el-color-primary-dark-2: #B8860B;

  /* 文字与边框走暖调 */
  --el-text-color-primary:   #1E293B;
  --el-text-color-regular:   #475569;
  --el-text-color-secondary: #94A3B8;
  --el-text-color-placeholder:#A8ABB2;
  --el-border-color:         #E2E8F0;
  --el-border-color-light:   #E9EDF3;
  --el-border-color-lighter: #F0F3F7;
  --el-fill-color-light:     #F5F7FA;
  --el-fill-color-lighter:   #FAFBFC;
  --el-fill-color-blank:     #FFFFFF;
  --el-bg-color:             #FFFFFF;
  --el-bg-color-page:        #F8FAFC;
  --el-radius-base:          10px;
  --el-border-radius-base:   10px;
}

/* ======================================================================
 * 二、关键组件精调 —— 金只出现在该出现的地方
 * ====================================================================*/

/* 主按钮：金色渐变 + 深棕字（高对比、显贵） */
.el-button--primary {
  --el-button-text-color:        #2B2100;
  --el-button-hover-text-color:  #2B2100;
  --el-button-active-text-color: #2B2100;
  --el-button-bg-color:          #D4AF37;
  --el-button-border-color:      #C09A1E;
  --el-button-hover-bg-color:    #E3C768;
  --el-button-hover-border-color:#D4AF37;
  --el-button-active-bg-color:   #B8860B;
  --el-button-active-border-color:#B8860B;
  background: var(--gold-gradient);
  border-color: #C09A1E;
  font-weight: 600;
  box-shadow: var(--gold-shadow);
}
.el-button--primary:hover  { background: var(--gold-gradient-hover); }
.el-button--primary:active { background: #B8860B; box-shadow: none; }
.el-button--primary.is-plain,
.el-button--primary.is-text,
.el-button--primary.is-link {
  background: transparent; box-shadow: none;
  color: var(--gold-2);
  border-color: var(--gold-light);
}
.el-button--primary.is-text,
.el-button--primary.is-link { border-color: transparent; }
.el-button--primary.is-text:hover,
.el-button--primary.is-link:hover { color: var(--gold); background: var(--gold-soft); }

/* 普通按钮 hover 也用金色描边，保持整体一致 */
.el-button:not(.el-button--primary):not(.el-button--danger):not(.el-button--success):not(.el-button--warning):not(.el-button--info):hover {
  color: var(--gold-2);
  border-color: var(--gold-light);
  background: var(--gold-soft);
}

/* 表格：表头浅金、选中行极浅金、悬停暖灰 */
.el-table th.el-table__cell {
  background: var(--gold-soft) !important;
  color: var(--ink-1);
  font-weight: 600;
}
.el-table__body tr:hover > td.el-table__cell { background: var(--gold-mist); }
.el-table__body tr.current-row > td.el-table__cell { background: var(--gold-soft); }

/* 侧栏 / 菜单激活项：金色左边条 + 浅金底 */
.el-menu-item.is-active {
  color: var(--gold-2) !important;
  background: var(--gold-soft) !important;
  font-weight: 600;
}
.el-menu-item.is-active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--gold-gradient);
}
.el-menu-item:hover { background: var(--gold-soft); }

/* 标签 / 徽标 */
.el-tag--primary { color: var(--gold-2); border-color: var(--gold-light); background: var(--gold-soft); }

/* 分页 / Tab / 步骤条 / 开关 / 单选复选 / 滑块 激活态统一为金 */
.el-pagination.is-background .el-pager li.is-active { background: var(--gold-gradient); color: #2B2100; border-color: #C09A1E; }
.el-tabs__item.is-active { color: var(--gold-2); }
.el-tabs__active-bar { background: var(--gold-gradient); height: 2px; }
.el-step__head.is-finish .el-step__icon,
.el-step__head.is-process .el-step__icon { color: var(--gold-2); border-color: var(--gold); }
.el-step__head.is-finish .el-step__line,
.el-step__head.is-process .el-step__line { background: var(--gold-light); }
.el-switch.is-checked .el-switch__core { background: var(--gold-gradient); border-color: #C09A1E; }
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: var(--gold-soft); border-color: var(--gold); color: var(--gold-2); box-shadow: -1px 0 0 0 var(--gold);
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner { background: var(--gold); border-color: var(--gold); }
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label { color: var(--gold-2); }
.el-slider__bar { background: var(--gold-gradient); }
.el-slider__button { border-color: var(--gold); }
.el-progress-bar__inner { background: var(--gold-gradient); }
.el-link.el-link--primary { color: var(--gold-2); }
.el-loading-spinner .path { stroke: var(--gold); }
.el-input__wrapper.is-focus,
.el-textarea__inner:focus { box-shadow: 0 0 0 1px var(--gold) inset; }
.el-dialog__header { border-bottom: 1px solid var(--gold-lighter); }
.el-dialog__title { font-weight: 600; }

/* ======================================================================
 * 三、暗色主题（Element Plus dark + 自定义暗底）
 * ====================================================================*/
html.dark, body.dark, .dark {
  --canvas:  #14161A;
  --surface: #1E1F22;
  --line:    #2C313A;
  --ink-1:   #EDEDED;
  --ink-2:   #C9CAD0;
  --ink-3:   #9AA0AA;
  --gold-soft:   #241F10;
  --gold-mist:   #2B2513;
  --gold-lighter:#332C16;
  --gold-ink:    #F5E6B0;   /* 暗底上金底按钮改亮字 */

  --el-bg-color:            #1E1F22;
  --el-bg-color-overlay:    #232427;
  --el-bg-color-page:       #14161A;
  --el-text-color-primary:  #EDEDED;
  --el-text-color-regular:  #C9CAD0;
  --el-text-color-secondary:#9AA0AA;
  --el-border-color:        #3A3B40;
  --el-border-color-light:  #34353A;
  --el-border-color-lighter:#313237;
  --el-fill-color-light:    #2B2C30;
  --el-fill-color-lighter:  #26272B;
  --el-fill-color-blank:    #232427;
  --el-color-primary-light-7:#332C16;
  --el-color-primary-light-8:#2B2513;
  --el-color-primary-light-9:#241F10;
}
html.dark .el-button--primary,
body.dark .el-button--primary,
.dark .el-button--primary { --el-button-text-color: #2B2100; }
html.dark .el-table th.el-table__cell,
.dark .el-table th.el-table__cell { background: #241F10 !important; color: var(--ink-1); }
html.dark .el-table__body tr:hover > td.el-table__cell,
.dark .el-table__body tr:hover > td.el-table__cell { background: #2B2513; }

/* ======================================================================
 * 四、通用工具类（新页面优先复用，替代硬编码色值）
 * ====================================================================*/
.gold-text   { color: var(--gold-2); }
.gold-title  { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: .5px; }
.gold-card   { background: var(--surface); border: 1px solid var(--gold-lighter); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.gold-card--soft { background: var(--gold-gradient-soft); }
.gold-divider{ height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); border: 0; }
.gold-badge  { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; color: var(--gold-2); background: var(--gold-soft); border: 1px solid var(--gold-lighter); }
.gold-btn    { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm);
               background: var(--gold-gradient); color: #2B2100; font-weight: 600; border: 1px solid #C09A1E;
               box-shadow: var(--gold-shadow); cursor: pointer; }
.gold-btn:hover { background: var(--gold-gradient-hover); }
.gold-btn--ghost { background: transparent; color: var(--gold-2); box-shadow: none; border-color: var(--gold-light); }
.canvas-warm { background: var(--canvas-warm); }