/* ==========================================================================
   HS DMA · 设计令牌 tokens.css  v1.0
   --------------------------------------------------------------------------
   只包含 CSS 变量，不含任何布局与组件样式。
   用途：
     - 新页面：直接引入 theme.css（已 @import 本文件），无需单独引入；
     - 已有页面：引入本文件并删除页面内重复的 :root，即可让令牌集中管理。
   注意：变量名与 v0 页面内联的 :root 完全一致，替换后视觉零变化。
   ========================================================================== */

:root{
  /* 背景与层次 */
  --bg:#070b12;
  --bg-deep:#060a10;
  --panel:rgba(14,22,34,.9);
  --panel-2:rgba(255,255,255,.03);
  --panel-3:rgba(0,0,0,.25);

  /* 描边 */
  --line:rgba(120,160,220,.14);
  --line-strong:rgba(120,180,255,.25);

  /* 文本 */
  --txt:#e8eef7;
  --txt-2:#9fb0c7;
  --txt-3:#6f7f96;
  --txt-4:#5f6f87;
  --txt-mid:#7d8ca4;      /* 介于 2 和 3 之间，用于卡片说明 */
  --txt-accent:#bfe3ff;   /* 强调文字（订单号、卡密） */
  --txt-strong:#dbeafe;   /* 标题级文字 */
  --btn-txt:#ffffff;      /* 按钮/选中项文字 */
  --ok-txt:#a7f3d0;
  --warn-txt:#fde68a;
  --err-txt:#fecaca;

  /* 表面层（叠在卡片上的微弱底色） */
  --surface-1:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.05);
  --surface-3:rgba(255,255,255,.07);
  --input-bg:rgba(0,0,0,.25);
  --input-bg-2:rgba(0,0,0,.3);

  /* 品牌与语义 */
  --acc:#3ea6ff;
  --acc-2:#7c5cff;
  --cyan:#22d3ee;
  --green:#34d399;
  --gold:#fbbf24;
  --orange:#fb923c;
  --red:#f87171;

  /* 渐变 */
  --grad-brand:linear-gradient(135deg,var(--acc),var(--acc-2));
  --grad-accent:linear-gradient(100deg,var(--acc),var(--cyan));
  --grad-surface:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));

  /* 圆角 */
  --r-sm:8px;
  --r-md:10px;
  --r-lg:12px;
  --r-xl:16px;
  --r-pill:999px;

  /* 间距 */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:22px;
  --s-6:26px;
  --s-7:32px;

  /* 阴影 */
  --shadow-card:0 26px 90px rgba(0,0,0,.5);
  --shadow-pop:0 10px 30px rgba(62,166,255,.18);
  --shadow-glow:0 0 18px rgba(62,166,255,.4);

  /* 字体 */
  --font:"Inter","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Courier New",monospace;

  /* 字号 */
  --fs-xs:10.5px;
  --fs-sm:11.5px;
  --fs-base:12.5px;
  --fs-md:13.5px;
  --fs-lg:15px;
  --fs-xl:20px;
  --fs-h1:clamp(24px,4.4vw,32px);

  /* 主题标记（供 JS 判断） */
  color-scheme:dark;
}

/* ---------- 浅色主题：<html data-theme="light"> ---------- */
/* 只覆盖颜色类令牌，尺寸、字体、圆角保持不变，切换不会导致布局跳动 */
html[data-theme="light"]{
  --bg:#eef2f8;
  --bg-deep:#e6ecf5;
  --panel:rgba(255,255,255,.94);
  --panel-2:rgba(15,40,80,.025);
  --panel-3:rgba(15,40,80,.04);

  --line:rgba(24,58,110,.12);
  --line-strong:rgba(24,58,110,.2);

  --txt:#152033;
  --txt-2:#4d5f79;
  --txt-3:#6b7c94;
  --txt-4:#8595ab;
  --txt-mid:#55677f;
  --txt-accent:#1e4b7a;
  --txt-strong:#16233a;
  --btn-txt:#16233a;
  --ok-txt:#065f46;
  --warn-txt:#7c4a03;
  --err-txt:#991b1b;

  --surface-1:rgba(15,40,80,.035);
  --surface-2:rgba(15,40,80,.05);
  --surface-3:rgba(15,40,80,.07);
  --input-bg:#ffffff;
  --input-bg-2:#ffffff;

  --acc:#1a73e8;
  --acc-2:#6d4aff;
  --cyan:#0d8ea8;
  --green:#0f9d68;
  --gold:#b45309;
  --orange:#c2410c;
  --red:#d92d20;

  --grad-surface:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.6));
  --shadow-card:0 20px 60px rgba(24,58,110,.14);
  --shadow-pop:0 10px 26px rgba(26,115,232,.16);
  --shadow-glow:0 0 14px rgba(26,115,232,.28);

  color-scheme:light;
}

/* ---------- 第三套主题：暗夜紫 <html data-theme="violet"> ---------- */
html[data-theme="violet"]{
  --bg:#0b0812;
  --bg-deep:#080610;
  --panel:rgba(22,16,36,.92);
  --panel-2:rgba(160,130,255,.035);
  --panel-3:rgba(0,0,0,.28);

  --line:rgba(150,120,220,.16);
  --line-strong:rgba(170,140,255,.28);

  --txt:#ece9f7;
  --txt-2:#a99fc4;
  --txt-3:#7b7095;
  --txt-4:#695f82;
  --txt-mid:#8b7fa8;
  --txt-accent:#ddd6fe;
  --txt-strong:#ede9fe;
  --btn-txt:#ffffff;
  --ok-txt:#a7f3d0;
  --warn-txt:#fde68a;
  --err-txt:#fecaca;

  --surface-1:rgba(160,130,255,.04);
  --surface-2:rgba(160,130,255,.06);
  --surface-3:rgba(160,130,255,.08);
  --input-bg:rgba(0,0,0,.28);
  --input-bg-2:rgba(0,0,0,.32);

  --acc:#a78bfa;
  --acc-2:#7c3aed;
  --cyan:#c084fc;
  --green:#34d399;
  --gold:#fbbf24;
  --orange:#fb923c;
  --red:#f87171;

  --grad-brand:linear-gradient(135deg,#a78bfa,#7c3aed);
  --grad-accent:linear-gradient(100deg,#a78bfa,#c084fc);
  --grad-surface:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));

  --shadow-card:0 26px 90px rgba(0,0,0,.58);
  --shadow-pop:0 10px 30px rgba(167,139,250,.2);
  --shadow-glow:0 0 18px rgba(167,139,250,.42);

  color-scheme:dark;
}