/* ══════════════════════════════════════════════════════════
   主题层 v3 —— 一套 token，两副皮
   · 不设 data-theme 时跟随系统（prefers-color-scheme）
   · data-theme="light" / "dark" 由用户在顶栏选定，写进 localStorage
   两套皮用的是同一批 token 名，组件层只认 token，不认具体颜色。
   ══════════════════════════════════════════════════════════ */

/* ── 浅色：默认基线 ── */
:root{
  /* ── 地与面：白纸不留灰，层次全靠线和影 ── */
  /* 地压成极浅的灰、面留纯白 —— 两者都纯白的话，卡片、表格、
     工具条跟背景就只剩一条发丝线撑着，扫一眼是糊的 */
  --paper:#FAFAF9;
  --card:#FFFFFF;
  --wash:#F2F1EF;              /* 表头、凹面这类比纸更沉的一档 */

  /* ── 字：三档，对白纸的对比度 19.8 / 7.7 / 4.8 ── */
  --ink:#1C1C1C;
  --ink-2:#57534E;
  --ink-3:#78716C;   /* 压深一档，压在浅灰纸上也要 4.5:1 */
  --ink-hi:#000000;              /* 只给大标题 */
  --hair:#E7E5E2;                /* 白底用实色细线，半透明会发灰 */
  --hair-2:#D6D3CE;

  /* ── 暗场块：白站里的黑色段落，用来断章节 ── */
  --void:#08090B;
  --void-2:#101115;
  --void-hair:rgba(255,255,255,.09);
  --void-ink:#EDEEF0;
  --void-ink-2:#9BA1AA;

  /* ── 强调：电蓝 → 紫，色相跨 42°，在白纸上彩度压得住 ── */
  --signal:#2B6EF6;              /* 面色：描边、选中、图标 */
  --signal-text:#1D57DB;         /* 字色：白底上要 6.1:1 才够读 */
  --signal-2:#0EA5E9;            /* 渐变另一端：天蓝，不再走紫 */            /* 渐变另一端 */
  --accent-3:#1D4ED8;            /* 点缀：深蓝 */            /* 深青，点缀 */
  --signal-wash:rgba(43,110,246,.07);
  --signal-line:rgba(43,110,246,.32);
  --signal-glow:0 0 0 1px rgba(43,110,246,.16),0 10px 30px rgba(29,78,216,.12);
  --grad:linear-gradient(100deg,#1D4ED8 0%,#2B6EF6 48%,#0EA5E9 100%);
  --btn-ink:#FFFFFF;

  /* hover：白底没法再提亮，改成「淡蓝底 + 蓝描边 + 浅影」 */
  --hover-surface:rgba(43,110,246,.10);
  --hover-surface-2:rgba(43,110,246,.15);

  /* 白底的层次全靠这三级影，越浅越贵 */
  --sh-1:0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 1px 2px rgba(16,24,40,.05),0 4px 12px rgba(16,24,40,.05);
  --sh-3:0 1px 2px rgba(16,24,40,.05),0 14px 34px rgba(16,24,40,.10);

  --r-s:8px;
  --r-m:12px;
  --r-l:18px;
  --sh-1:0 1px 2px rgba(16,17,21,.05);
  --sh-2:0 4px 14px rgba(16,17,21,.07);
  --sh-3:0 18px 50px rgba(16,17,21,.10);
  /* 面的抬升：浅色靠阴影，不靠膜 —— 白底上加黑膜只会变脏，分不出层 */
  --lift:none;
  --elev:var(--sh-1);
  --elev-2:var(--sh-2);
  --inset:var(--wash);          /* 输入框/分段控件这类"凹面" */
  /* 封面：浅色下不压暗、不加蒙版 —— 那是暗底上防刺眼用的 */
  /* 侧栏/导航的选中态用实色填充：淡色底配白字在浅色主题下等于看不见。
     用深一档的蓝，配白字有 5.7:1。 */
  --mist-op:.16;                 /* 白纸上再浓就脏了 */
  --mist-blend:normal;
  /* 选中态原来用 blue-700，压在白底上偏重。换成站点自己的 signal 色，
     浅一档、和主按钮同族；白字对比度 4.5:1，仍然够读。 */
  --nav-active:#2B6EF6;
  --shot-filter:saturate(.98);
  --shot-filter-hover:saturate(1.04);
  --shot-scrim:transparent;
  --vignette:transparent;      /* 浅色不压角，压了就是一团脏灰 */
  --grain-blend:multiply;
  --grain-op:.025;
  --film:0,0,0;              /* 叠加膜的底色：浅色主题用黑 */
  --scheme:light;
--ok:#16A34A;--warn:#D97706;--danger:#DC2626;
  /* 第二强调色：给序号、计数这类小字用，和蓝色（可点／标签）分工 */
  --accent-y:#A16207;
  /* 标题下说明文字用的橙，白底 5.9:1 */
  --accent-o:#D9730D;}

/* ── 深色：跟随系统 ── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  /* ── 地与面：不用纯黑，纯黑会加剧亮字的光晕 ── */
  --paper:#0B0E14;
  --card:#171D28;
  --wash:#1F2634;
  /* ── 字：三档，对比度定在 12.7 / 7.4 / 5.4，避开 15+ 的刺眼区 ── */
  --ink:#E8E8E6;
  --ink-2:#C2C8D2;
  --ink-3:#B2BAC6;
  --ink-hi:#FFFFFF;        /* 只给大标题 */
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.24);

  --void:#06080D;
  --void-2:#12161F;
  --void-hair:rgba(255,255,255,.10);
  --void-ink:#E8E8E6;
  --void-ink-2:#C2C8D2;

  /* ── 强调：同类色（青→青蓝，色相跨 30°），彩度从 .76 降到 .51 ── */
  --signal:#6AA6FF;            /* 面色：按钮底、进度、选中 */
  --signal-text:#9CC0FF;       /* 字色：暗底上的强调文字，更亮更淡 */
  --signal-2:#7FB4FF;          /* 渐变另一端，与青亮度只差 1.18 倍 */
  --accent-3:#8FC0FF;          /* 紫降级成点缀，只用于小面积 */
  --signal-wash:rgba(106,166,255,.12);
  --signal-line:rgba(106,166,255,.32);
  --signal-glow:0 0 0 1px rgba(106,166,255,.24),0 12px 36px rgba(106,166,255,.10);
  --grad:linear-gradient(100deg,#5C9BFF 0%,#6AA6FF 50%,#7FB4FF 100%);
  --btn-ink:#0B0B0C;
  /* hover：青色高亮，不做黑白反转 */
  --hover-surface:rgba(255,255,255,.07);
  --hover-surface-2:rgba(255,255,255,.11);

  --r-s:8px;
  --r-m:12px;
  --r-l:18px;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 6px 20px rgba(0,0,0,.45);
    --sh-3:0 20px 56px rgba(0,0,0,.55);
  /* 面的抬升：深色靠一层极淡的白膜，阴影在暗底上没用 */
    --lift:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    /* 深色下原来是 none——只靠底色差分层，而底色差又只有几级灰，
       组件就整个融进背景。给一层「向下的暗影 + 顶部一线高光」，
       比单纯提亮卡面更像有厚度。 */
    --elev:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.45);
    --elev-2:0 1px 0 rgba(255,255,255,.05) inset,0 10px 26px rgba(0,0,0,.55);
    --inset:rgba(255,255,255,.03);
    --mist-op:.22;
    --mist-blend:screen;   /* 暗底用加色，才透得出来 */
    --mist-op:.22;
  --mist-blend:screen;   /* 暗底用加色，才透得出来 */
  --nav-active:#6AA6FF;
  --shot-filter:saturate(.75) brightness(.72) contrast(1.05);
    --shot-filter-hover:saturate(1) brightness(.95) contrast(1.03);
    --shot-scrim:linear-gradient(180deg,rgba(8,9,11,.15),rgba(8,9,11,.72));
    --mist-op:.22;
    --mist-blend:screen;   /* 暗底用加色，才透得出来 */
    --mist-op:.22;
  --mist-blend:screen;   /* 暗底用加色，才透得出来 */
  --nav-active:#6AA6FF;
  --shot-filter:saturate(.75) brightness(.72) contrast(1.05);
  --shot-filter-hover:saturate(1) brightness(.95) contrast(1.03);
  --shot-scrim:linear-gradient(180deg,rgba(8,9,11,.15),rgba(8,9,11,.72));
  --vignette:rgba(8,9,11,.85);
    --grain-blend:overlay;
    --grain-op:.05;
    --film:255,255,255;      /* 深色主题用白 */
    --scheme:dark;
  --ok:#4ADE80;--warn:#E9A23B;--danger:#F0736F;--accent-y:#FACC15;--accent-o:#FDBA74;}
}

/* ── 深色：用户显式选定，优先级高于系统 ── */
:root[data-theme="dark"]{
  /* ── 地与面：不用纯黑，纯黑会加剧亮字的光晕 ── */
  --paper:#0B0E14;
  --card:#171D28;
  --wash:#1F2634;
  /* ── 字：三档，对比度定在 12.7 / 7.4 / 5.4，避开 15+ 的刺眼区 ── */
  --ink:#E8E8E6;
  --ink-2:#C2C8D2;
  --ink-3:#B2BAC6;
  --ink-hi:#FFFFFF;        /* 只给大标题 */
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.24);

  --void:#06080D;
  --void-2:#12161F;
  --void-hair:rgba(255,255,255,.10);
  --void-ink:#E8E8E6;
  --void-ink-2:#C2C8D2;

  /* ── 强调：同类色（青→青蓝，色相跨 30°），彩度从 .76 降到 .51 ── */
  --signal:#6AA6FF;            /* 面色：按钮底、进度、选中 */
  --signal-text:#9CC0FF;       /* 字色：暗底上的强调文字，更亮更淡 */
  --signal-2:#7FB4FF;          /* 渐变另一端，与青亮度只差 1.18 倍 */
  --accent-3:#8FC0FF;          /* 紫降级成点缀，只用于小面积 */
  --signal-wash:rgba(106,166,255,.12);
  --signal-line:rgba(106,166,255,.32);
  --signal-glow:0 0 0 1px rgba(106,166,255,.24),0 12px 36px rgba(106,166,255,.10);
  --grad:linear-gradient(100deg,#5C9BFF 0%,#6AA6FF 50%,#7FB4FF 100%);
  --btn-ink:#0B0B0C;
  /* hover：青色高亮，不做黑白反转 */
  --hover-surface:rgba(255,255,255,.07);
  --hover-surface-2:rgba(255,255,255,.11);

  --r-s:8px;
  --r-m:12px;
  --r-l:18px;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 20px rgba(0,0,0,.45);
  --sh-3:0 20px 56px rgba(0,0,0,.55);
  /* 面的抬升：深色靠一层极淡的白膜，阴影在暗底上没用 */
  --lift:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --elev:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.45);
  --elev-2:0 1px 0 rgba(255,255,255,.05) inset,0 10px 26px rgba(0,0,0,.55);
  --inset:rgba(255,255,255,.03);
  --mist-op:.22;
  --mist-blend:screen;   /* 暗底用加色，才透得出来 */
  --nav-active:#6AA6FF;
  --shot-filter:saturate(.75) brightness(.72) contrast(1.05);
  --shot-filter-hover:saturate(1) brightness(.95) contrast(1.03);
  --shot-scrim:linear-gradient(180deg,rgba(8,9,11,.15),rgba(8,9,11,.72));
  --vignette:rgba(8,9,11,.85);
  --grain-blend:overlay;
  --grain-op:.05;
  --film:255,255,255;
  --scheme:dark;
--ok:#4ADE80;--warn:#E9A23B;--danger:#F0736F;--accent-y:#FACC15;--accent-o:#FDBA74;}

/* 表单控件、滚动条跟着主题走 */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}}


/* ══════════════════════════════════════════════════════════════
   卡片立体感：一层发丝描边 + 由紧到散的多层阴影
   原来只有 --sh-1（0 1px 2px /.04），卡片几乎贴在纸上、和底色分不开。
   改成分层叠加：接触影定住底边，近距影给厚度，大范围影给抬升。
   ══════════════════════════════════════════════════════════════ */
:root{
  --card-elev:
    0 1px 1px rgba(16,24,40,.05),
    0 2px 5px rgba(16,24,40,.06),
    0 12px 40px -8px rgba(16,24,40,.10),
    0 4px 34px -5px rgba(16,24,40,.05);
  --card-elev-hi:
    0 1px 1px rgba(16,24,40,.06),
    0 3px 8px rgba(16,24,40,.08),
    0 18px 52px -10px rgba(16,24,40,.14),
    0 6px 40px -6px rgba(16,24,40,.07);
}
/* 暗底上阴影读不出来，靠顶边一道内高光撑起体积，阴影再压深 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --card-elev:
      0 1px 0 rgba(255,255,255,.05) inset,
      0 1px 2px rgba(0,0,0,.50),
      0 3px 8px rgba(0,0,0,.40),
      0 16px 46px -10px rgba(0,0,0,.58);
    --card-elev-hi:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 2px 4px rgba(0,0,0,.55),
      0 6px 16px rgba(0,0,0,.45),
      0 22px 60px -12px rgba(0,0,0,.66);
  }
}
:root[data-theme="dark"]{
  --card-elev:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 1px 2px rgba(0,0,0,.50),
    0 3px 8px rgba(0,0,0,.40),
    0 16px 46px -10px rgba(0,0,0,.58);
  --card-elev-hi:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 2px 4px rgba(0,0,0,.55),
    0 6px 16px rgba(0,0,0,.45),
    0 22px 60px -12px rgba(0,0,0,.66);
}

/* ══ 卡片悬停：统一走黄色（原来是蓝/青）══ */
:root{
  --card-line-hover:#DD8A08;
  --card-wash-hover:rgba(217,119,6,.10);
  --card-ink-hover:#B45309;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --card-line-hover:#FCD34D;
    --card-wash-hover:rgba(250,204,21,.13);
    --card-ink-hover:#FCD34D;
  }
}
:root[data-theme="dark"]{
  --card-line-hover:#FCD34D;
  --card-wash-hover:rgba(250,204,21,.13);
  --card-ink-hover:#FCD34D;
}

/* ══ 主按钮的黄色一套（原来是 --brand 蓝底白字） ══ */
:root{
  --btn-y:linear-gradient(100deg,#F0980A 0%,#F7B318 55%,#FBC42E 100%);
  --btn-y-line:#DD8A08;
  --btn-y-ink:#2A1A05;
  --btn-y-wash:rgba(217,119,6,.13);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --btn-y:linear-gradient(100deg,#F59E0B 0%,#FBBF24 52%,#FCD34D 100%);
    --btn-y-line:#FCD34D;--btn-y-ink:#0B0B0C;--btn-y-wash:rgba(250,204,21,.16);
  }
}
:root[data-theme="dark"]{
  --btn-y:linear-gradient(100deg,#F59E0B 0%,#FBBF24 52%,#FCD34D 100%);
  --btn-y-line:#FCD34D;--btn-y-ink:#0B0B0C;--btn-y-wash:rgba(250,204,21,.16);
}

/* ══ ① 黄色调浅一档 ② 阴影去掉冷色偏 ══
   原阴影用 rgba(16,24,40)——那是海军蓝，低透明度铺在暖白纸面上
   会透出一层冷蓝，看着就像"卡片带蓝光"。换成中性暖灰。 */
:root{
  --btn-y:linear-gradient(100deg,#F8C238 0%,#FBD35C 55%,#FDE08A 100%);
  --btn-y-line:#E8B02A;
  --btn-y-ink:#2A1A05;
  --btn-y-wash:rgba(232,176,42,.16);
  --card-line-hover:#E8B02A;
  --card-wash-hover:rgba(232,176,42,.13);
  --card-ink-hover:#9A6B08;
  --card-elev:
    0 1px 1px rgba(28,25,23,.05),
    0 2px 5px rgba(28,25,23,.06),
    0 12px 40px -8px rgba(28,25,23,.10),
    0 4px 34px -5px rgba(28,25,23,.05);
  --card-elev-hi:
    0 1px 1px rgba(28,25,23,.06),
    0 3px 8px rgba(28,25,23,.08),
    0 18px 52px -10px rgba(28,25,23,.14),
    0 6px 40px -6px rgba(28,25,23,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --btn-y:linear-gradient(100deg,#FBBF24 0%,#FCD34D 52%,#FDE68A 100%);
    --btn-y-line:#FCD34D;--btn-y-ink:#0B0B0C;--btn-y-wash:rgba(252,211,77,.18);
    --card-line-hover:#FCD34D;--card-wash-hover:rgba(252,211,77,.14);--card-ink-hover:#FCD34D;
  }
}
:root[data-theme="dark"]{
  --btn-y:linear-gradient(100deg,#FBBF24 0%,#FCD34D 52%,#FDE68A 100%);
  --btn-y-line:#FCD34D;--btn-y-ink:#0B0B0C;--btn-y-wash:rgba(252,211,77,.18);
  --card-line-hover:#FCD34D;--card-wash-hover:rgba(252,211,77,.14);--card-ink-hover:#FCD34D;
}

/* ══ 悬停底色令牌改黄 ══
   --hover-surface / -2 扫下来只用于 :hover，没有静态用途，
   所以可以直接改令牌，不用逐条覆盖。 */
:root{
  --hover-surface:rgba(232,176,42,.13);
  --hover-surface-2:rgba(232,176,42,.20);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hover-surface:rgba(252,211,77,.12);
    --hover-surface-2:rgba(252,211,77,.18);
  }
}
:root[data-theme="dark"]{
  --hover-surface:rgba(252,211,77,.12);
  --hover-surface-2:rgba(252,211,77,.18);
}

/* ══════════════════════════════════════════════════════════════
   主色整体从蓝换成黄。
   前几轮是逐条覆盖选择器，只能盖住 :hover，静态的标签/徽章/
   强调字仍是蓝的，于是蓝黄混杂。这里直接换令牌本身——
   content.css 的 --brand / --brand-soft / --brand-line / --brand-hover
   全部派生自 --signal，一处改完全站跟着走。

   两个必须同时改的配套：
   · --signal-text 是「白底上的强调字」，不能用 #E8B02A（对比度
     只有 1.9:1），要压到深琥珀 #8A5D06（约 5.9:1）。
   · --btn-ink 是「主色打底时的文字」，浅色主题原本是白色，
     底色变黄后必须翻成深色，否则按钮上的字看不清。
   ══════════════════════════════════════════════════════════════ */
:root{
  --signal:#E8B02A;
  --signal-text:#8A5D06;
  --signal-2:#FBD35C;
  --accent-3:#B8860B;
  --signal-wash:rgba(232,176,42,.10);
  --signal-line:rgba(232,176,42,.36);
  --signal-glow:0 0 0 1px rgba(232,176,42,.20),0 10px 30px rgba(184,134,11,.14);
  --grad:linear-gradient(100deg,#F8C238 0%,#FBD35C 55%,#FDE08A 100%);
  --btn-ink:#2A1A05;
  --nav-active:#E8B02A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --signal:#FCD34D;
    --signal-text:#FCD34D;
    --signal-2:#FDE68A;
    --accent-3:#FBBF24;
    --signal-wash:rgba(252,211,77,.12);
    --signal-line:rgba(252,211,77,.32);
    --signal-glow:0 0 0 1px rgba(252,211,77,.24),0 12px 36px rgba(252,211,77,.10);
    --grad:linear-gradient(100deg,#FBBF24 0%,#FCD34D 52%,#FDE68A 100%);
    --btn-ink:#0B0B0C;
    --nav-active:#FCD34D;
  }
}
:root[data-theme="dark"]{
  --signal:#FCD34D;
  --signal-text:#FCD34D;
  --signal-2:#FDE68A;
  --accent-3:#FBBF24;
  --signal-wash:rgba(252,211,77,.12);
  --signal-line:rgba(252,211,77,.32);
  --signal-glow:0 0 0 1px rgba(252,211,77,.24),0 12px 36px rgba(252,211,77,.10);
  --grad:linear-gradient(100deg,#FBBF24 0%,#FCD34D 52%,#FDE68A 100%);
  --btn-ink:#0B0B0C;
  --nav-active:#FCD34D;
}