/* ============================================================
   清染导航 · 全站统一主题令牌
   ------------------------------------------------------------
   一个文件管住整站配色：
   · 默认 = 赛博朋克暗色（无需 JS，服务端直接渲染 theme-cyber 即可）
   · 10 套主题只改 --h-* 这一组调色板，其余变量全部由 --h-* 派生
   · 同时把老代码里的三套变量命名（style.css / 课表页 / 笔记页 /
     后台 / 工具箱）统一别名到同一套调色板，改一个值全站生效

   用法：任何页面在 style.css 之后引入本文件即可
        <link rel="stylesheet" href="/css/theme.css?v=...">

   ⚠️ 顶部这行 @import 会加载后台「布局管理 → 自定义主色」生成的
      css/custom.css（用 !important 覆盖 --h-accent 系列），
      @import 必须在所有规则之前，别往下挪。
   ============================================================ */
@import url('custom.css');

/* ============================================================
   1. 默认调色板：赛博朋克暗色
   ============================================================ */
:root {
    /* 版式尺度 */
    --h-radius-lg: 24px;
    --h-radius: 18px;
    --h-radius-sm: 12px;
    --h-gap: 16px;

    /* 调色板 */
    --h-bg: #05070e;
    --h-bg2: #0a1120;
    --h-accent: #22d3ee;
    --h-accent-2: #6366f1;
    --h-accent-soft: rgba(34, 211, 238, 0.14);
    --h-halo: rgba(34, 211, 238, 0.16);
    --h-halo-2: rgba(99, 102, 241, 0.14);
}

/* ============================================================
   2. 派生变量：把各页面家族的变量名统一挂到调色板上
       （只写一次，换主题时自动跟随）

   ⚠️ 选择器必须把所有主题类名都列上：css/style.css 里也有
      body.theme-cyber{--card-bg:…} 这类块（特异性 0,1,1），
      只写 body{}（0,0,1）会被它抢回旧配色。
   ============================================================ */
body,
body.theme-glass, body.theme-sky, body.theme-light, body.theme-dark,
body.theme-purple, body.theme-cyber, body.theme-ocean, body.theme-sunset,
body.theme-forest, body.theme-neon {
    /* —— 表面 / 描边 / 文字 —— */
    --h-surface: rgba(255, 255, 255, 0.055);
    --h-surface-2: rgba(255, 255, 255, 0.085);
    --h-border: rgba(255, 255, 255, 0.09);
    --h-border-strong: rgba(255, 255, 255, 0.16);
    --h-text: #e9eefb;
    --h-dim: #8b9bb4;
    --h-glass: rgba(10, 14, 24, 0.72);
    --h-shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.8);
    --h-sheen: rgba(255, 255, 255, 0.07);
    --h-grid: rgba(255, 255, 255, 0.028);
    --h-tag-bg: rgba(255, 255, 255, 0.06);

    /* —— style.css 家族（首页 / 留言板 / 通用组件）—— */
    --text-primary: var(--h-accent);
    --text-secondary: var(--h-dim);
    --text: var(--h-text);
    --card-bg: var(--h-surface);
    --card-border: var(--h-border);
    --border-light: var(--h-border);
    --hero-bg: var(--h-glass);
    --btn-bg: var(--h-surface-2);
    --btn-hover: var(--h-accent);
    --tag-bg: var(--h-tag-bg);
    --shadow: var(--h-shadow);
    --section-text: var(--h-text);
    --bg-gradient-start: var(--h-bg);
    --bg-gradient-end: var(--h-bg2);

    /* —— 课表页家族（pages/wcq、全班课表.php 等）—— */
    --container-bg: var(--h-surface);
    --container-border: var(--h-border);
    --card-border-left: var(--h-accent);
    --table-header-bg: var(--h-surface-2);
    --table-border: var(--h-border);
    --time-col-bg: var(--h-surface-2);
    --empty-color: var(--h-dim);
    --btn-gradient-start: var(--h-accent);
    --btn-gradient-end: var(--h-accent-2);
    --footer-bg: var(--h-surface);
    --shadow-color: var(--h-halo);
    --badge-bg: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));

    /* —— 笔记 / 资料页家族（python、network、linux、web…）—— */
    --primary-color: var(--h-accent);
    --secondary-color: var(--h-accent-2);
    --text-heading: var(--h-text);
    --text-body: var(--h-text);
    --text-muted: var(--h-dim);
    --text-muted-light: var(--h-dim);
    --link-color: var(--h-accent);
    --code-bg: rgba(0, 0, 0, 0.32);
    --code-color: #a5f3fc;
    --note-bg: var(--h-accent-soft);
    --note-border: var(--h-accent);
    --note-color: var(--h-text);
    --cmd-card-bg: var(--h-surface);
    --cmd-example-bg: rgba(0, 0, 0, 0.32);
    --cmd-example-color: #a5f3fc;
    --cmd-title-color: var(--h-accent);
    --section-border: var(--h-border);
    --section-h2-border: var(--h-accent);
    --light-bg: var(--h-surface-2);
    --light-color: var(--h-text);
    --dark-color: var(--h-text);
    --python-blue: var(--h-accent);
    --python-light: var(--h-accent-soft);
    --python-yellow: #fbbf24;
    --preview-hover: var(--h-surface-2);
    --filter-btn-bg: var(--h-surface-2);
    --filter-btn-active: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));

    /* —— 后台家族（admin/style.css）—— */
    --primary: var(--h-accent);
    --secondary: var(--h-accent-2);
    --bg: var(--h-bg);
    --bg-sidebar: var(--h-glass);
    --border: var(--h-border);
    --card: var(--h-surface);
    --accent-color: var(--h-accent);
    --sidebar-link-color: var(--h-dim);
    --sidebar-link-hover-bg: var(--h-surface-2);
    --sidebar-link-active-bg: var(--h-accent-soft);
    --sidebar-w: 230px;
}

/* ============================================================
   3. 亮色主题：共用一套浅色表面
   ============================================================ */
body.theme-glass,
body.theme-sky,
body.theme-light,
body.theme-purple,
body.theme-forest,
body.theme-sunset {
    --h-surface: #ffffff;
    --h-surface-2: #f4f6fb;
    --h-border: rgba(15, 23, 42, 0.09);
    --h-border-strong: rgba(15, 23, 42, 0.16);
    --h-text: #0f172a;
    --h-dim: #667085;
    --h-glass: rgba(255, 255, 255, 0.8);
    --h-shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.35);
    --h-sheen: rgba(255, 255, 255, 0.6);
    --h-grid: rgba(15, 23, 42, 0.028);
    --h-tag-bg: #f1f4f9;
    --code-bg: rgba(15, 23, 42, 0.06);
    --code-color: #0e7490;
    --cmd-example-bg: rgba(15, 23, 42, 0.05);
    --cmd-example-color: #0e7490;
}

/* ============================================================
   4. 10 套主题的调色板（改配色只改这里）
   ============================================================ */

/* 粉玻璃 · 浅色 */
body.theme-glass {
    --h-bg: #f8f9fc;
    --h-bg2: #eef1f8;
    --h-accent: #ec4899;
    --h-accent-2: #a855f7;
    --h-accent-soft: rgba(236, 72, 153, 0.12);
    --h-halo: rgba(236, 72, 153, 0.16);
    --h-halo-2: rgba(168, 85, 247, 0.14);
}

/* 天蓝 · 浅色 */
body.theme-sky {
    --h-bg: #f2f7ff;
    --h-bg2: #e7f0fd;
    --h-accent: #2563eb;
    --h-accent-2: #06b6d4;
    --h-accent-soft: rgba(37, 99, 235, 0.12);
    --h-halo: rgba(37, 99, 235, 0.16);
    --h-halo-2: rgba(6, 182, 212, 0.14);
}

/* 简约 · 浅色 */
body.theme-light {
    --h-bg: #f7f8fa;
    --h-bg2: #eef0f4;
    --h-accent: #475569;
    --h-accent-2: #0ea5e9;
    --h-accent-soft: rgba(71, 85, 105, 0.12);
    --h-halo: rgba(71, 85, 105, 0.14);
    --h-halo-2: rgba(14, 165, 233, 0.12);
}

/* 梦幻紫 · 浅色 */
body.theme-purple {
    --h-bg: #f9f6ff;
    --h-bg2: #f1eaff;
    --h-accent: #7c3aed;
    --h-accent-2: #d946ef;
    --h-accent-soft: rgba(124, 58, 237, 0.12);
    --h-halo: rgba(124, 58, 237, 0.16);
    --h-halo-2: rgba(217, 70, 239, 0.14);
}

/* 森林绿 · 浅色 */
body.theme-forest {
    --h-bg: #f4faf6;
    --h-bg2: #e8f4ec;
    --h-accent: #059669;
    --h-accent-2: #65a30d;
    --h-accent-soft: rgba(5, 150, 105, 0.12);
    --h-halo: rgba(5, 150, 105, 0.16);
    --h-halo-2: rgba(101, 163, 13, 0.14);
}

/* 日落渐变 · 浅色 */
body.theme-sunset {
    --h-bg: #fff8f1;
    --h-bg2: #ffefe1;
    --h-accent: #ea580c;
    --h-accent-2: #db2777;
    --h-accent-soft: rgba(234, 88, 12, 0.12);
    --h-halo: rgba(234, 88, 12, 0.16);
    --h-halo-2: rgba(219, 39, 119, 0.14);
}

/* 暗夜 · 深色 */
body.theme-dark {
    --h-bg: #0d1017;
    --h-bg2: #141a26;
    --h-accent: #c084fc;
    --h-accent-2: #22d3ee;
    --h-accent-soft: rgba(192, 132, 252, 0.16);
    --h-halo: rgba(192, 132, 252, 0.16);
    --h-halo-2: rgba(34, 211, 238, 0.12);
}

/* 赛博科幻 · 深色（默认） */
body.theme-cyber {
    --h-bg: #05070e;
    --h-bg2: #0a1120;
    --h-accent: #22d3ee;
    --h-accent-2: #6366f1;
    --h-accent-soft: rgba(34, 211, 238, 0.14);
    --h-halo: rgba(34, 211, 238, 0.16);
    --h-halo-2: rgba(99, 102, 241, 0.14);
}

/* 深邃海洋 · 深色 */
body.theme-ocean {
    --h-bg: #04121b;
    --h-bg2: #062130;
    --h-accent: #2dd4bf;
    --h-accent-2: #38bdf8;
    --h-accent-soft: rgba(45, 212, 191, 0.14);
    --h-halo: rgba(45, 212, 191, 0.16);
    --h-halo-2: rgba(56, 189, 248, 0.14);
}

/* 霓虹暗夜 · 深色 */
body.theme-neon {
    --h-bg: #0b0416;
    --h-bg2: #150626;
    --h-accent: #f0abfc;
    --h-accent-2: #22d3ee;
    --h-accent-soft: rgba(240, 171, 252, 0.16);
    --h-halo: rgba(240, 171, 252, 0.16);
    --h-halo-2: rgba(34, 211, 238, 0.12);
}

/* ============================================================
   5. 页面底色（所有页面统一，含 style.css 里各主题的旧规则覆盖）

   ⚠️ 千万别给 html 设 background！
   CSS 规定：html 没有背景时，body 的背景会「上传」到整个视口画布，
   此时 body 自身不再绘制背景，粒子层(.particle-network-animation, z-index:-2)
   和光标丝带(#cursorRibbon, z-index:-1)才能从底下透出来。
   一旦给 html 加了背景色，body 背景就会按普通元素绘制，
   绘制顺序排在负 z-index 子元素之后 —— 粒子与丝带会被整片盖掉。
   ============================================================ */
html {
    /* 这里只能放非背景属性 */
    scroll-behavior: smooth;
}

body {
    background: var(--h-bg);
    color: var(--h-text);
}

body::before,
body.theme-cyber::before,
body.theme-ocean::before,
body.theme-neon::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    animation: none;
    background:
        radial-gradient(1100px 620px at 8% -12%, var(--h-halo) 0%, transparent 62%),
        radial-gradient(900px 560px at 92% 4%, var(--h-halo-2) 0%, transparent 58%),
        linear-gradient(180deg, var(--h-bg) 0%, var(--h-bg2) 100%);
}

/* 网格纹理：压在渐变层之上、粒子层之下（同为负层，按 z-index 排序） */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        linear-gradient(var(--h-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--h-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 78%);
}