/* ==========================================================
   base.css  变量(双主题) / 重置 / 字体 / 全局基础
   ========================================================== */

/* —— 主题令牌:深色奢华(默认)—— */
:root,
:root[data-theme="dark"] {
  --bg-0: #0A0A0F;          /* 页面底色 */
  --bg-1: #11111A;          /* 一级容器(侧栏/抽屉) */
  --bg-2: #1A1A24;          /* 卡片 */
  --bg-3: #23232F;          /* 浮层 */
  --line: rgba(245, 230, 211, 0.10);
  --line-strong: rgba(245, 230, 211, 0.22);

  --gold-0: #F5E6D3;        /* 主强调(暖金) */
  --gold-1: #E8B86C;        /* 玫瑰金(按钮/链接) */
  --gold-2: #D4A574;        /* 古铜(hover) */
  --gold-deep: #B88A4E;     /* 边缘深金 */
  --gold-on: #1A1A24;       /* 金色按钮上的文字色 */
  --gold-soft: rgba(232, 184, 108, .18);   /* 金色柔和底 */
  --gold-soft-2: rgba(232, 184, 108, .10);

  --text-0: #F5F1EA;        /* 主要文字 */
  --text-1: #C7C2B8;        /* 次要文字 */
  --text-2: #8A857C;        /* 辅助文字 */
  --text-3: #5C5950;        /* 占位/弱文字 */

  --input-bg: rgba(255, 255, 255, .02);
  --input-bg-hover: rgba(255, 255, 255, .04);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));

  --body-glow:
    radial-gradient(1200px 600px at 80% -10%, rgba(232, 184, 108, .12), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(180, 140, 200, .06), transparent 70%);

  --grain-opacity: .35;
  --scrollbar: rgba(232, 184, 108, .18);
  --scrollbar-hover: rgba(232, 184, 108, .32);
  --selection: rgba(232, 184, 108, .35);
  --selection-fg: #1A1A24;
  --mask-bg: rgba(0, 0, 0, .55);
  --topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
  --sidebar-bg: linear-gradient(180deg, rgba(245, 230, 211, .04), transparent 40%), var(--bg-1);
  --focus-ring: rgba(232, 184, 108, .15);
  --badge-bg: rgba(255, 255, 255, .02);
  --chip-bg: rgba(245, 230, 211, .05);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
  --glow-gold: 0 0 0 1px rgba(232, 184, 108, .35), 0 0 24px rgba(232, 184, 108, .18);
  --card-border-grad: linear-gradient(135deg, rgba(245, 230, 211, .18), transparent 40%, transparent 60%, rgba(232, 184, 108, .10));
}

/* —— 主题令牌:浅色暖白 —— */
:root[data-theme="light"] {
  --bg-0: #F5F1EA;          /* 暖米白主背景 */
  --bg-1: #FFFFFF;          /* 侧栏/顶栏/抽屉(纯白) */
  --bg-2: #FAF6EE;          /* 卡片(微米) */
  --bg-3: #FFFFFF;          /* 浮层 */
  --line: rgba(26, 26, 36, .08);
  --line-strong: rgba(26, 26, 36, .16);

  --gold-0: #B88A4E;        /* 主强调(暗金,适配亮底) */
  --gold-1: #A07A3E;        /* 主金(按钮/链接) */
  --gold-2: #846030;        /* hover(更深) */
  --gold-deep: #6A4D24;
  --gold-on: #FFFFFF;       /* 金色按钮上的文字 */
  --gold-soft: rgba(184, 138, 78, .14);
  --gold-soft-2: rgba(184, 138, 78, .07);

  --text-0: #1A1A24;
  --text-1: #3D3D47;
  --text-2: #6E6A60;
  --text-3: #A09A8E;

  --input-bg: rgba(26, 26, 36, .025);
  --input-bg-hover: rgba(26, 26, 36, .05);
  --card-bg: #FFFFFF;

  --body-glow:
    radial-gradient(1200px 600px at 80% -10%, rgba(232, 184, 108, .20), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(190, 160, 120, .12), transparent 70%);

  --grain-opacity: 0;
  --scrollbar: rgba(26, 26, 36, .15);
  --scrollbar-hover: rgba(26, 26, 36, .30);
  --selection: rgba(184, 138, 78, .30);
  --selection-fg: #1A1A24;
  --mask-bg: rgba(26, 26, 36, .35);
  --topbar-bg: rgba(255, 255, 255, .6);
  --sidebar-bg: #FFFFFF;
  --focus-ring: rgba(184, 138, 78, .25);
  --badge-bg: #FFFFFF;
  --chip-bg: rgba(26, 26, 36, .04);

  --shadow-sm: 0 1px 2px rgba(26, 26, 36, .06);
  --shadow-md: 0 4px 18px rgba(26, 26, 36, .08);
  --shadow-lg: 0 18px 48px rgba(26, 26, 36, .12);
  --glow-gold: 0 0 0 1px rgba(184, 138, 78, .30), 0 0 20px rgba(184, 138, 78, .15);
  --card-border-grad: linear-gradient(135deg, rgba(184, 138, 78, .30), transparent 40%, transparent 60%, rgba(184, 138, 78, .18));
}

/* —— 静态令牌(两主题通用)—— */
:root {
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --font-display: "Playfair Display", "Noto Serif SC", "Songti SC", serif;
  --font-body:    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 220ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 420ms cubic-bezier(.16, 1, .3, 1);

  /* 业务色(两主题都合适) */
  --success: #4FAE72;
  --danger:  #D45A48;
  --warn:    #D49B48;
  --info:    #5E9EC2;
}

/* —— Reset —— */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  transition:
    background var(--t-base),
    color var(--t-base);
}

/* 背景:主题光晕 */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--body-glow), var(--bg-0);
  z-index: -2;
  transition: background var(--t-slow);
}
/* 颗粒纹理(深色主题才用) */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.90  0 0 0 0 0.83  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: -1;
}

a { color: var(--gold-1); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: inherit; }

/* —— 工具类 —— */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.serif { font-family: var(--font-display); }
.muted { color: var(--text-2); }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 12px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; }
.hide { display: none !important; }

/* —— 动画 —— */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes sunRise {
  from { transform: rotate(-90deg) scale(.4); opacity: 0; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes moonRise {
  from { transform: rotate(90deg) scale(.4); opacity: 0; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}

.fade-up   { animation: fadeUp var(--t-slow) both; }
.stagger > * { animation: fadeUp var(--t-slow) both; }
.stagger > *:nth-child(1) { animation-delay: 40ms; }
.stagger > *:nth-child(2) { animation-delay: 100ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 220ms; }
.stagger > *:nth-child(5) { animation-delay: 280ms; }
.stagger > *:nth-child(6) { animation-delay: 340ms; }
.stagger > *:nth-child(n+7) { animation-delay: 400ms; }

/* —— 滚动条 —— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--t-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: padding-box; }

/* —— 选区 —— */
::selection { background: var(--selection); color: var(--selection-fg); }