/* =============================================================
   自建Admin — 黑金主题（变量层）
   全局色值 / 字号 / 间距 / 阴影 / 动画曲线
   ============================================================= */

:root {
  /* —— 背景：从纯黑到浅灰，分 5 个层级 —— */
  --bg-0:  #e9edf2;        /* 最底：页面外层背景（浅灰）*/
  --bg-1:  #ffffff;        /* 卡片背景（白）*/
  --bg-2:  #f3f5f8;        /* 输入框/嵌套卡片（极浅灰）*/
  --bg-3:  #edf0f4;        /* hover 高亮 */
  --bg-4:  #e3e8ee;        /* selected / active */

  /* —— 金色：从暗金到亮金，主品牌色 —— */
  --gold-1: #5a4220;       /* 暗金 — 边框 / 分隔线 */
  --gold-2: #8a6a30;       /* 中金 — 次要按钮 */
  --gold-3: #c9a14a;       /* 标准金 — 文本高亮 */
  --gold-4: #d4af37;       /* 古金 — 主品牌色 */
  --gold-5: #f0d27c;       /* 亮金 — hover / accent */
  --gold-6: #ffe9a0;       /* 极亮金 — 关键 CTA */

  /* —— 文字 —— */
  --text-primary:   #1c2026;
  --text-secondary: #565d68;
  --text-tertiary:  #8b929c;
  --text-disabled:  #bcc1c9;
  --text-on-gold:   #ffffff;   /* 金色按钮上的文字（深色）*/

  /* —— 状态色（黑金主题里收敛使用）—— */
  --success: #2ec27e;
  --warn:    #f0a020;
  --error:   #e85a4f;
  --info:    #5b9ec9;

  /* —— 边框 / 分隔 —— */
  --border-1: rgba(22, 27, 34, 0.08);   /* 极淡边 */
  --border-2: rgba(22, 27, 34, 0.14);
  --border-3: rgba(22, 27, 34, 0.22);

  /* —— 阴影 —— */
  --shadow-sm: 0 1px 3px   rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 16px  rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.16);
  --shadow-gold: 0 0 24px rgba(212, 175, 55, 0.25);

  /* —— 渐变 —— */
  --grad-gold:        linear-gradient(135deg, #d4af37 0%, #f0d27c 50%, #b8893a 100%);
  --grad-gold-hover:  linear-gradient(135deg, #e8c44a 0%, #ffe9a0 50%, #c89544 100%);
  --grad-gold-soft:   linear-gradient(135deg, rgba(212,175,55,0.20) 0%, rgba(240,210,124,0.06) 100%);
  --grad-bg-radial:   radial-gradient(ellipse at center, #ffffff 0%, #eef1f5 60%, #e6eaf0 100%);

  /* —— 间距 —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* —— 圆角 —— */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* —— 字号 —— */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  44px;

  /* —— 字体 —— */
  --font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Cinzel', 'Playfair Display', Georgia, var(--font-sans);  /* logo / 标题用 */

  /* —— 动效 —— */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   0.15s;
  --dur-base:   0.25s;
  --dur-slow:   0.45s;
}

/* —— 全局重置 —— */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--gold-4);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--gold-5); }

button { font-family: inherit; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
}

::selection { background: var(--gold-4); color: var(--text-on-gold); }

/* —— scrollbar —— */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
  background: var(--gold-1);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }