/* ==========================================================================
   火蜘蛛 CRM — 设计令牌
   ---------------------------------------------------------------------------
   数值来源：对标站 crm.broctagon.com 的**实测值**（浏览器计算样式 + 样式产物），
   不是肉眼估计。采集脚本：tools/design-probe.mjs / tools/css-facts.mjs

   实测到的对标站事实（供后续维护对照）：
     · 页面底色 #F5F8FA（冷灰蓝），正文 #637381，深色文本 #303842，弱化 #919EAB
     · 主色（Quasar 主题）黑 #000；但**行动色（CTA）是绯红 #D70D24**，
       主按钮带同色辉光阴影 rgba(215,13,36,.42) 0 4px 20px
     · 卡片：磨砂玻璃 rgba(255,255,255,.85) + 圆角 24px + 阴影 0 8px 40px rgba(0,0,0,.2)
     · 圆角词汇：按钮 16px、卡片 24px、内部块 12px、徽标 100px（胶囊）
     · 动效令牌：--q-transition-duration .3s；--q-transition-easing
       cubic-bezier(.215,.61,.355,1)；按钮阴影曲线 cubic-bezier(.25,.8,.5,1)
     · 入场曲线（其 nebula 体系）：cubic-bezier(.16,1,.3,1)，时长 380ms
     · 按钮高度阴影在 ::before 上（便于独立过渡），按压时抬到更高一层
     · 字体栈首项 Sora / MiSans
   ========================================================================== */

:root {
  /* ---- 主色 ---- */
  --q-primary: #000000;
  --q-primary-rgb: 0, 0, 0;
  --q-secondary: #323c46;
  --q-secondary-rgb: 50, 60, 70;
  --q-accent: #ffffff;

  /* ---- 行动色（CTA）----
     对标站实测的主按钮色。单点可换：给 <body> 加 .brand-monochrome
     即切回黑色体系（见文件末尾），便于品牌口径调整。 */
  --cta: #d70d24;
  --cta-rgb: 215, 13, 36;
  --cta-hover: #c00b20;
  --cta-active: #a9091b;
  --cta-soft: #fdecee;
  --cta-glow: 0 4px 20px rgba(var(--cta-rgb), .42);
  --cta-glow-strong: 0 6px 26px rgba(var(--cta-rgb), .5);

  /* ---- 功能色（对标站实测值）---- */
  --q-positive: #42b549;
  --q-positive-soft: #eaf7ec;
  --q-positive-ink: #1f7a3d;
  --q-negative: #ce1f20;          /* 对标站实测为 #ce1f20 */
  --q-negative-soft: #fdecec;
  --q-negative-ink: #a12829;
  --q-info: #31ccec;
  --q-info-soft: #e9f9fd;
  --q-info-ink: #12657c;
  --q-warning: #f5bd37;           /* 对标站实测为 #f5bd37 */
  --q-warning-soft: #fef4e3;
  --q-warning-ink: #8a5a08;

  /* ---- 暗色 ---- */
  --q-dark: #2c3235;
  --q-dark-page: #23282a;
  --q-nebula: #0d0d1a;
  --q-nebula-a: #a78bfa;
  --q-nebula-b: #67e8f9;

  /* ---- 品牌灰阶（N 越大越深）---- */
  --q-brand-grey-1: #f5f8fa;      /* 对标站页面底色 */
  --q-brand-grey-2: #eef1f5;
  --q-brand-grey-3: #e1e6ec;
  --q-brand-grey-4: #b8c2cc;
  --q-brand-grey-5: #637381;      /* 对标站正文色 */
  --q-brand-grey-6: #4a525a;
  --q-brand-grey-7: #303842;      /* 对标站深色文本 */

  --q-brand-bg-1: #ffffff;
  --q-brand-bg-2: #fafbfc;

  /* ---- 语义别名 ---- */
  --bg-page: var(--q-brand-grey-1);
  --bg-surface: #ffffff;
  --bg-subtle: var(--q-brand-grey-2);
  --bg-field: #ffffff;
  --bg-sunken: rgba(99, 115, 129, .06);
  --text-primary: var(--q-brand-grey-7);
  --text-secondary: var(--q-brand-grey-5);
  --text-muted: #919eab;          /* 对标站实测的弱化色 */
  --text-invert: #ffffff;
  --border-color: var(--q-brand-grey-3);
  --border-strong: #c4ccd6;
  --border-soft: rgba(145, 158, 171, .24);

  /* ---- 磨砂玻璃面（对标站卡片实测：85% 白 + 大扩散阴影 + 半透白描边）---- */
  --glass-bg: rgba(255, 255, 255, .85);
  --glass-border: rgba(255, 255, 255, .5);
  --glass-blur: saturate(180%) blur(20px);

  /* ---- 圆角（按对标站词汇重排）---- */
  --radius-badge: var(--radius-pill);
  --radius-tag: 6px;
  --radius-field: 12px;
  --radius-btn: 16px;
  --radius-btn-sm: 12px;
  --radius-nav: 10px;
  --radius-card: 16px;
  --radius-card-lg: 24px;         /* 对标站卡片实测 24px */
  --radius-pill: 999px;

  /* ---- 间距 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- 字体（首项对齐对标站：Sora / MiSans，缺失则逐级回退）---- */
  --font-sans: Sora, MiSans, Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang SC", "Microsoft YaHei", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-title: var(--font-sans);
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

  /* ---- 字重（对标站实测：400/500/600/700）---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- 动效令牌（对标站实测值）---- */
  --motion-dur-fast: .15s;
  --motion-dur: .3s;              /* = 对标站 --q-transition-duration */
  --motion-dur-in: .22s;
  --motion-dur-out: .38s;         /* = 对标站 nebula 入场时长 */
  --motion-dur-ripple: .6s;
  --motion-ease: cubic-bezier(.215, .61, .355, 1);         /* = 对标站 --q-transition-easing */
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);          /* = 对标站 nebula 入场曲线 */
  --motion-ease-in: cubic-bezier(.4, 0, 1, 1);
  --motion-ease-standard: cubic-bezier(.25, .8, .5, 1);    /* = 对标站按钮阴影曲线 */
  --motion-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- 高度层级（贴合对标站的 Material 三档 + 大扩散玻璃档）---- */
  --e1: 0 1px 2px rgba(20, 25, 30, .06), 0 1px 3px rgba(20, 25, 30, .10);
  --e2: 0 2px 6px rgba(20, 25, 30, .08), 0 6px 16px rgba(20, 25, 30, .10);
  --e3: 0 4px 12px rgba(20, 25, 30, .10), 0 12px 32px rgba(20, 25, 30, .14);
  --e-glass: 0 8px 40px rgba(0, 0, 0, .20);                /* 对标站卡片实测 */
  --shadow-1: var(--e1);
  --shadow-2: var(--e2);
  --shadow-3: var(--e3);
  --shadow-focus: 0 0 0 3px rgba(var(--cta-rgb), .18);
  --shadow-focus-neutral: 0 0 0 3px rgba(99, 115, 129, .16);

  /* ---- 布局 ---- */
  --drawer-w: 244px;
  --topbar-h: 58px;
  --z-drawer: 40;
  --z-topbar: 50;
  --z-dropdown: 60;
  --z-toast: 90;
  --z-modal: 100;
}

/* ---- 深色模式 ---- */
body.theme-dark {
  --bg-page: #1b1f21;
  --bg-surface: #23282a;
  --bg-subtle: #2c3235;
  --bg-field: #1f2426;
  --bg-sunken: rgba(255, 255, 255, .04);
  --text-primary: #e8eaec;
  --text-secondary: #9aa3ab;
  --text-muted: #7d858e;
  --border-color: #343a3e;
  --border-strong: #454c51;
  --border-soft: rgba(255, 255, 255, .10);
  --q-brand-grey-3: #343a3e;
  --q-brand-grey-1: #23282a;
  --glass-bg: rgba(35, 40, 42, .82);
  --glass-border: rgba(255, 255, 255, .08);
  --e1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --e2: 0 2px 6px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .35);
  --e3: 0 4px 12px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
  --e-glass: 0 8px 40px rgba(0, 0, 0, .55);
  --shadow-focus: 0 0 0 3px rgba(var(--cta-rgb), .30);
}

/* ---- 品牌口径开关：加在 <body> 上即切回黑色行动色 ---- */
body.brand-monochrome {
  --cta: #000000;
  --cta-rgb: 0, 0, 0;
  --cta-hover: #1a1a1a;
  --cta-active: #000000;
  --cta-soft: #eef0f2;
  --cta-glow: 0 4px 18px rgba(0, 0, 0, .24);
  --cta-glow-strong: 0 6px 24px rgba(0, 0, 0, .30);
}

/* ---- 火橙强调（历史保留，默认关闭）---- */
body.brand-fire-accent {
  --accent-fire: #ff5a1f;
  --accent-fire-hover: #e64a12;
  --accent-fire-soft: #fff1ea;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cta); text-decoration: none; transition: color var(--motion-dur-fast) var(--motion-ease); }
a:hover { color: var(--cta-hover); text-decoration: underline; }

/* 数字统一等宽，便于表格对齐 */
.num, .money, td.num, th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(145, 158, 171, .42); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(145, 158, 171, .72); background-clip: content-box; }

/* 文本选区配色跟随行动色 */
::selection { background: rgba(var(--cta-rgb), .16); }

@media print {
  body { background: #fff; }
}