/* 易经学院 · 共享样式（院长维护）
 *
 * 主题机制：颜色全部是 CSS 变量令牌，值为空格分隔的 RGB 通道，
 * Tailwind 配置用 rgb(var(--x) / <alpha-value>) 引用它们，
 * 所以页面里的 bg-cyber-gold/20、text-white、text-slate-400 等类名
 * 在两套主题下都成立，切换主题只换令牌、不动页面。
 * 新增主题：复制 [data-theme="light"] 整块，改选择器与取值，
 * 再到 academy.js 的 THEMES 注册表里加一项。
 */

/* ---------- 玄夜（默认，深色赛博） ---------- */
:root {
  color-scheme: dark;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --c-night: 8 10 19;
  --c-slate: 15 20 36;
  --c-card: 22 28 51;
  --c-border: 38 49 82;
  --c-cyan: 6 182 212;
  --c-gold: 251 191 36;
  --c-yang: 239 68 68;
  --c-yin: 59 130 246;
  --c-emerald: 16 185 129;
  --c-purple: 168 85 247;

  --c-white: 255 255 255;
  --c-slate-100: 241 245 249;
  --c-slate-200: 226 232 240;
  --c-slate-300: 203 213 225;
  --c-slate-400: 148 163 184;
  --c-slate-500: 100 116 139;
  --c-slate-600: 71 85 105;
  --c-slate-700: 51 65 85;
  --c-slate-800: 30 41 59;
  --c-slate-900: 15 23 42;

  --c-amber-100: 254 243 199;
  --c-amber-200: 253 230 138;
  --c-amber-300: 252 211 77;
  --c-amber-400: 251 191 36;
  --c-amber-500: 245 158 11;
  --c-emerald-300: 110 231 183;
  --c-emerald-400: 52 211 153;
  --c-red-200: 254 202 202;
  --c-red-300: 252 165 165;
  --c-red-400: 248 113 113;
  --c-cyan-200: 165 243 252;
  --c-cyan-300: 103 232 249;
  --c-cyan-400: 34 211 238;
  --c-blue-200: 191 219 254;
  --c-blue-300: 147 197 253;
  --c-purple-300: 216 180 254;
  --c-purple-400: 192 132 252;
  --c-red-950: 69 10 10;
  --c-emerald-950: 2 44 34;
  --c-cyan-950: 8 51 68;
  --c-blue-950: 23 37 84;

  /* 组件级令牌 */
  --card-bg: linear-gradient(145deg, rgb(22 28 51 / 0.9) 0%, rgb(15 20 36 / 0.95) 100%);
  --card-blur: blur(14px);
  --card-shadow: none;
  --card-hover-border: rgb(var(--c-gold) / 0.45);
  --page-glow:
    radial-gradient(ellipse at 20% 0%, rgb(6 182 212 / 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgb(251 191 36 / 0.08), transparent 55%);
  --quote-ink: rgb(var(--c-amber-200));

  --nav-bg: rgb(8 10 19 / 0.9);
  --nav-line: rgb(38 49 82 / 0.8);
  --nav-ink: rgb(148 163 184);
  --nav-ink-hover: #ffffff;
  --nav-hover-bg: rgb(22 28 51 / 0.7);
  --nav-active-bg: rgb(251 191 36 / 0.2);
  --nav-active-ink: #fbbf24;
  --nav-active-border: rgb(251 191 36 / 0.5);
  --nav-active-mark: 0 0 25px rgb(251 191 36 / 0.25);
  --nav-brand-ink: #ffffff;
  --nav-brand-sub: #06b6d4;
}

/* ---------- 晴空（参考 JoyLink SunShine 外贸增长平台） ---------- */
[data-theme="light"] {
  color-scheme: light;
  --font-sans: 'Inter', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* 结构色：slate-100 底、白卡、slate-200 细线 */
  --c-night: 241 245 249;
  --c-slate: 248 250 252;
  --c-card: 255 255 255;
  --c-border: 226 232 240;
  /* 语义色：原玄夜的亮色在白底上对比不足，统一压暗到 700 档，白底与页面底色上均达 WCAG AA 4.5:1。
     金色强调位改为 JoyLink 主色蓝，取 blue-600 以保证白底 5.2:1。 */
  --c-cyan: 14 116 144;
  --c-gold: 37 99 235;
  --c-yang: 185 28 28;
  --c-yin: 29 78 216;
  --c-emerald: 4 120 87;
  --c-purple: 124 58 237;

  /* 白字 → 墨色；slate 灰阶整体反转 */
  --c-white: 15 23 42;
  --c-slate-100: 15 23 42;
  --c-slate-200: 30 41 59;
  --c-slate-300: 51 65 85;
  --c-slate-400: 71 85 105;
  --c-slate-500: 84 98 120;
  --c-slate-600: 148 163 184;
  --c-slate-700: 203 213 225;
  --c-slate-800: 226 232 240;
  --c-slate-900: 241 245 249;

  --c-amber-100: 146 64 14;
  --c-amber-200: 180 83 9;
  --c-amber-300: 194 65 12;
  --c-amber-400: 194 65 12;
  /* 首页主按钮渐变 gold→amber-500：晴空下收成蓝→深蓝，与参考项目的实色主按钮一致 */
  --c-amber-500: 29 78 216;
  --c-emerald-300: 4 120 87;
  --c-emerald-400: 4 120 87;
  --c-red-200: 153 27 27;
  --c-red-300: 185 28 28;
  --c-red-400: 185 28 28;
  --c-cyan-200: 21 94 117;
  --c-cyan-300: 14 116 144;
  --c-cyan-400: 14 116 144;
  --c-blue-200: 30 64 175;
  --c-blue-300: 29 78 216;
  --c-purple-300: 109 40 217;
  --c-purple-400: 124 58 237;
  --c-red-950: 254 242 242;
  --c-emerald-950: 236 253 245;
  --c-cyan-950: 236 254 255;
  --c-blue-950: 239 246 255;

  --card-bg: #ffffff;
  --card-blur: none;
  --card-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
  --card-hover-border: rgb(59 130 246 / 0.45);
  --page-glow:
    radial-gradient(ellipse at 15% 0%, rgb(56 189 248 / 0.10), transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgb(251 191 36 / 0.06), transparent 50%);
  --quote-ink: #78350f;

  /* 品牌导航：天蓝 sky-700，白字 5.93:1；选中项 sky-800 加金色标记条 */
  --nav-bg: #0369a1;
  --nav-line: rgb(255 255 255 / 0.2);
  --nav-ink: #e0f2fe;
  --nav-ink-hover: #ffffff;
  --nav-hover-bg: rgb(255 255 255 / 0.13);
  --nav-active-bg: #075985;
  --nav-active-ink: #ffffff;
  --nav-active-border: transparent;
  --nav-active-mark: inset 0 -2px 0 #fbbf24;
  --nav-brand-ink: #f8fafc;
  --nav-brand-sub: #a5d8f3;
}

html { scroll-behavior: smooth; }
body {
  background: rgb(var(--c-night));
  font-family: var(--font-sans);
  transition: background-color 0.25s ease;
}

.cyber-card {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  border: 1px solid rgb(var(--c-border) / 0.85);
  box-shadow: var(--card-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cyber-card:hover { border-color: var(--card-hover-border); }

.cyber-bg { background-image: var(--page-glow); }

/* ---------- 学院导航栏 ---------- */
.ya-header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line);
  backdrop-filter: blur(12px);
}
.ya-brand-title { color: var(--nav-brand-ink); }
.ya-brand-sub { color: var(--nav-brand-sub); }
.ya-nav-link {
  color: var(--nav-ink);
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ya-nav-link:hover { color: var(--nav-ink-hover); background: var(--nav-hover-bg); }
.ya-nav-link.is-active {
  color: var(--nav-active-ink);
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  box-shadow: var(--nav-active-mark);
}
/* 参考项目的顶栏只用一条细线分隔，不压重阴影 */
[data-theme="light"] .ya-header { box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.10); }
.ya-theme-btn {
  color: var(--nav-ink);
  border: 1px solid var(--nav-line);
  transition: background 0.15s, color 0.15s;
}
.ya-theme-btn:hover { color: var(--nav-ink-hover); background: var(--nav-hover-bg); }

/* ---------- 正文排版 ---------- */
.prose-yi { line-height: 1.9; }
.prose-yi p { margin-bottom: 0.9rem; }
.prose-yi h3 { color: rgb(var(--c-gold)); font-weight: 700; margin: 1.6rem 0 0.6rem; font-size: 1.05rem; }
.prose-yi blockquote {
  border-left: 3px solid rgb(var(--c-gold) / 0.6);
  padding: 0.5rem 1rem; margin: 1rem 0;
  background: rgb(var(--c-gold) / 0.05); border-radius: 0 0.75rem 0.75rem 0;
  font-family: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif SC', serif; color: var(--quote-ink);
}
.prose-yi ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 0.9rem; }
.prose-yi li { margin-bottom: 0.3rem; }
.prose-yi strong { color: rgb(var(--c-white)); }
.prose-yi > h3:first-child { margin-top: 0; }

.classic { font-family: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif SC', serif; }

.yao-line { transition: transform 0.15s ease, filter 0.15s ease; cursor: pointer; }
.yao-line:hover { transform: scaleX(1.04); filter: brightness(1.25); }

@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float-anim { animation: floatY 4s ease-in-out infinite; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp 0.35s ease-out both; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--c-slate)); }
::-webkit-scrollbar-thumb { background: rgb(var(--c-border)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-gold)); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgb(148 163 184); }

/* 品牌标：玄夜为金→赤渐变；晴空取参考项目的金色品牌标，压在天蓝导航上最醒目 */
.ya-brand-mark {
  background: linear-gradient(135deg, rgb(251 191 36), rgb(239 68 68));
  color: #080a13;
  box-shadow: 0 0 25px rgb(251 191 36 / 0.25);
}
[data-theme="light"] .ya-brand-mark {
  background: linear-gradient(135deg, #fde68a, #f59e0b 55%, #b45309);
  color: #0f172a;
  box-shadow: 0 2px 5px rgb(3 40 62 / 0.38);
}