/* ============================================================
   tokens.css — 设计变量层
   颜色 / 字号 / 间距 / 圆角 / 阴影 / 动效
   规则：涨=红(--up)  跌=绿(--down)，遵循 A 股习惯
   ============================================================ */

:root {
  /* ---------- 色板（暗色终端风） ---------- */
  --bg:            #06090f;
  --bg-grad:       radial-gradient(1200px 600px at 15% -10%, #0d2030 0%, transparent 60%),
                   radial-gradient(900px 500px at 95% 0%, #1a1426 0%, transparent 55%);
  --panel:         #0c121b;
  --panel-2:       #111927;
  --panel-3:       #16202f;
  --line:          #1d2937;
  --line-soft:     #16202c;
  --line-strong:   #2a3a4d;

  --text:          #e8eef7;
  --text-dim:      #93a4ba;
  --text-mute:     #5c6c81;

  --up:            #ff4d5e;
  --up-soft:       rgba(255, 77, 94, .14);
  --down:          #12c48b;
  --down-soft:     rgba(18, 196, 139, .14);
  --flat:          #8b98a8;

  --gold:          #d8a84a;
  --gold-soft:     rgba(216, 168, 74, .14);
  --teal:          #2dd4a7;
  --blue:          #4a8cf7;
  --purple:        #a78bfa;
  --warn:          #f0a020;
  --danger:        #ef4444;

  /* ---------- 字号 ---------- */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   17px;
  --fs-xl:   22px;
  --fs-2xl:  30px;
  --fs-3xl:  44px;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;

  /* ---------- 圆角 ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  --sh-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 20px rgba(0,0,0,.35);
  --sh-2: 0 12px 40px rgba(0,0,0,.45);
  --glow-up:   0 0 18px rgba(255,77,94,.35);
  --glow-down: 0 0 18px rgba(18,196,139,.30);

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

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .16s;
  --t-base: .28s;

  /* ---------- 布局 ---------- */
  --topbar-h: 56px;
  --wrap-max: 1760px;
  --gap: 14px;
}

/* ---------- 亮色主题 ---------- */
[data-theme="light"] {
  --bg:            #f4f6fa;
  --bg-grad:       radial-gradient(1000px 500px at 10% -10%, #e6effb 0%, transparent 60%),
                   radial-gradient(800px 400px at 95% 0%, #f3ecfb 0%, transparent 55%);
  --panel:         #ffffff;
  --panel-2:       #f7f9fc;
  --panel-3:       #eef2f8;
  --line:          #e2e8f1;
  --line-soft:     #edf1f7;
  --line-strong:   #cbd6e4;

  --text:          #16202e;
  --text-dim:      #5a6b80;
  --text-mute:     #8b9aad;

  --up:            #e23a4e;
  --up-soft:       rgba(226, 58, 78, .10);
  --down:          #0aa376;
  --down-soft:     rgba(10, 163, 118, .10);

  --gold:          #b5852b;
  --gold-soft:     rgba(181, 133, 43, .12);

  --sh-1: 0 1px 2px rgba(16,32,52,.04), 0 6px 18px rgba(16,32,52,.06);
  --sh-2: 0 16px 40px rgba(16,32,52,.12);
  --glow-up:   0 0 14px rgba(226,58,78,.18);
  --glow-down: 0 0 14px rgba(10,163,118,.18);
}