/* ============================================================
   tokens.css · 全站设计变量唯一来源（V1.2 起）
   ------------------------------------------------------------
   规则：
   1. 颜色 / 间距 / 圆角 / 阴影 / 字号 / 动效 只在本文件定义；
      其他样式表一律 var() 引用，禁止再写 :root 覆盖。
   2. 换肤（琥珀/石绿/靛蓝…）只发生在 theme.css 的
      [data-accent] 块里，覆盖品牌段变量即可全站生效。
   3. 深色模式 token 也在这里（[data-theme="dark"]），
      页面级样式里不再出现深色 hex 字面量。
   ============================================================ */

:root{
  /* ── 品牌色（默认琥珀橙；theme.css 按需覆盖这一段）── */
  --orange:#FF4400;
  --orange-d:#E03A00;
  --orange-lt:#FFB38A;              /* 深色模式下的品牌亮字 */
  --orange-50:#FFF1EA;
  --orange-100:#FFE8DD;
  --orange-200:#FAD2BE;
  /* 别名：语义化称呼，与 --orange 同值 */
  --brand:var(--orange);
  --brand-d:var(--orange-d);

  /* ── 文本 ── */
  --ink:#1F2329;        /* 主文字 */
  --ink-2:#33383F;      /* 次级 */
  --g1:#646A73;         /* 辅助 */
  --g2:#8F959E;         /* 说明文字 */
  --g3:#9A9EA6;         /* 占位/最弱 */

  /* ── 描边 ── */
  --line:#E9EAEE;       /* 常规分隔 */
  --line-2:#F0F0F2;     /* 更浅 */
  --line-3:#ECECEE;     /* 侧栏分隔 */
  --line-strong:#E5E6EB;/* 公开门户/控件描边（略深一档） */

  /* ── 表面 ── */
  --bg:#FAFAFB;
  --side:#F7F7F8;
  --card:#FFFFFF;
  --canvas:#FFFFFF;     /* html 画布 */

  /* ── 语义色 ── */
  --red:#D93F3F;
  --amber:#E09A28;
  --green:#2EA46B;
  --teal:#14B8A6;       /* 公开门户强调绿 */
  --blue:#378ADD;
  --purple:#8A5CF6;
  --gold:#B8860B;

  /* ── 阴影 ── */
  --sh:0 2px 8px rgba(31,35,41,.05);
  --sh-h:0 10px 28px rgba(31,35,41,.09);
  --sh-lg:0 18px 48px -28px rgba(24,36,64,.28);

  /* ── 圆角 ── */
  --r-sm:6px;
  --r:12px;
  --r-lg:16px;
  --r-pill:999px;

  /* ── 间距（8px 栅格）── */
  --u1:4px; --u2:8px; --u3:12px; --u4:16px; --u5:20px;
  --u6:24px; --u8:32px; --u10:40px; --u12:48px; --u16:64px;

  /* ── 字号 ── */
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-s:12.5px;
  --fs:13.5px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:22px;

  /* ── 动效 ── */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.18s;

  /* ── 层级 ── */
  --z-sticky:40;
  --z-top:50;
  --z-drawer:80;
  --z-modal:90;
  --z-toast:100;
}

/* ============ 深色模式 ============ */
[data-theme="dark"]{
  color-scheme:dark;

  /* 品牌段只换 50/100/200 的半透明基底，主色跟随 [data-accent] */
  --orange-lt:#FFB38A;
  --orange-50:rgba(255,68,0,.14);
  --orange-100:rgba(255,68,0,.2);
  --orange-200:rgba(255,68,0,.36);

  --ink:#E9EBEE;
  --ink-2:#D3D6DB;
  --g1:#A2A8B0;
  --g2:#8B9199;
  --g3:#767C84;

  --line:#2C2E33;
  --line-2:#24262A;
  --line-3:#313338;
  --line-strong:#3A3D42;

  --bg:#16181B;
  --side:#1B1D21;
  --card:#1E2024;
  --canvas:#0E0F11;

  --sh:0 2px 8px rgba(0,0,0,.35);
  --sh-h:0 10px 28px rgba(0,0,0,.45);
  --sh-lg:0 24px 56px -20px rgba(0,0,0,.65);
}

/* 换肤的深色态：--orange-50/100/200 跟随主题色（与 theme.css 保持一致的口径） */
[data-theme="dark"][data-accent="amber"]  { --orange-50:rgba(255,68,0,.14);  --orange-100:rgba(255,68,0,.2);   --orange-200:rgba(255,68,0,.36); --orange-lt:#FFB38A; }
[data-theme="dark"][data-accent="green"]  { --orange-50:rgba(29,158,117,.14);  --orange-100:rgba(29,158,117,.2);   --orange-200:rgba(29,158,117,.36); --orange-lt:#7FD8BC; }
[data-theme="dark"][data-accent="blue"]   { --orange-50:rgba(55,138,221,.14);  --orange-100:rgba(55,138,221,.2);   --orange-200:rgba(55,138,221,.36); --orange-lt:#9CCBEE; }
[data-theme="dark"][data-accent="ink"]    { --orange-50:rgba(255,255,255,.06); --orange-100:rgba(255,255,255,.1);  --orange-200:rgba(255,255,255,.18);--orange-lt:#D3D6DB; }
[data-theme="dark"][data-accent="gold"]   { --orange-50:rgba(200,145,42,.14);  --orange-100:rgba(200,145,42,.2);   --orange-200:rgba(200,145,42,.36); --orange-lt:#EBC98A; }
[data-theme="dark"][data-accent="jade"]   { --orange-50:rgba(18,165,148,.14);  --orange-100:rgba(18,165,148,.2);   --orange-200:rgba(18,165,148,.36); --orange-lt:#7FD8C9; }
[data-theme="dark"][data-accent="indigo"] { --orange-50:rgba(75,98,214,.16);   --orange-100:rgba(75,98,214,.22);   --orange-200:rgba(75,98,214,.38);  --orange-lt:#AEB8F2; }
[data-theme="dark"][data-accent="forest"] { --orange-50:rgba(47,125,87,.16);   --orange-100:rgba(47,125,87,.22);   --orange-200:rgba(47,125,87,.38);  --orange-lt:#93C8AC; }
[data-theme="dark"][data-accent="violet"] { --orange-50:rgba(122,90,248,.16);  --orange-100:rgba(122,90,248,.22);  --orange-200:rgba(122,90,248,.38); --orange-lt:#BCA9FA; }
[data-theme="dark"][data-accent="crimson"]{ --orange-50:rgba(217,63,92,.15);   --orange-100:rgba(217,63,92,.21);   --orange-200:rgba(217,63,92,.37);  --orange-lt:#F09DAE; }
[data-theme="dark"][data-accent="slate"]  { --orange-50:rgba(255,255,255,.06); --orange-100:rgba(255,255,255,.1);  --orange-200:rgba(255,255,255,.2); --orange-lt:#C9CDD3; }
