/* NetTools 设计令牌：全站唯一的颜色定义处。
   :root 为浅色主题，html[data-theme="dark"] 为深色主题。
   组件样式一律通过变量取色，app.css 中不再出现十六进制色值。

   配色结构（两级层次，由暗到亮）：
     页面底 --bg-page  <  侧栏/浮层 --bg-sidebar / --bg-soft  <  卡片 --bg-surface
   拉开这三层的明度差，卡片才能从背景上浮起来，不再糊成一片。 */

:root {
    color-scheme: light;

    /* 主色：靛蓝，比通用浏览器蓝更有辨识度 */
    --brand: #4263eb;
    --brand-hover: #3b5bdb;
    --brand-active: #364fc7;
    --brand-soft: rgba(66, 99, 235, 0.10);
    --brand-ring: rgba(66, 99, 235, 0.22);

    /* 背景层级 */
    --bg-page: #eef2f7;
    --bg-surface: #ffffff;
    --bg-soft: #f2f5f9;
    --bg-hover: #e8edf5;
    --bg-sidebar: #f8fafc;
    --bg-topbar: rgba(255, 255, 255, 0.85);
    --bg-input: #ffffff;

    /* 边框 */
    --border: #e3e9f0;
    --border-strong: #cbd5e1;

    /* 文字层级 */
    --text: #0f172a;
    --text-2: #475569;
    --text-3: #64748b;
    --text-inv: #ffffff;

    /* 状态色 */
    --ok: #15803d;
    --ok-soft: rgba(21, 128, 61, 0.10);
    --err: #dc2626;
    --err-soft: rgba(220, 38, 38, 0.10);
    --warn: #b45309;
    --warn-soft: rgba(180, 83, 9, 0.10);

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.09);
    --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.13);

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

    /* 二维码固定黑白，不随主题变化（二维码必须保持高对比才可扫） */
    --qr-fg: #000000;
    --qr-bg: #ffffff;

    /* 尺寸与动效 */
    --sidebar-w: 240px;
    --topbar-h: 56px;
    --t: 0.15s ease;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --brand: #748ffc;
    --brand-hover: #91a7ff;
    --brand-active: #5c7cfa;
    --brand-soft: rgba(116, 143, 252, 0.16);
    --brand-ring: rgba(116, 143, 252, 0.28);

    --bg-page: #0b1015;
    --bg-surface: #151c24;
    --bg-soft: #1a222c;
    --bg-hover: #212b37;
    --bg-sidebar: #10171e;
    --bg-topbar: rgba(16, 23, 30, 0.88);
    --bg-input: #1a222c;

    --border: #26313d;
    --border-strong: #3a4756;

    --text: #e8edf3;
    --text-2: #a3b0bf;
    --text-3: #7b8998;
    --text-inv: #ffffff;

    --ok: #4ade80;
    --ok-soft: rgba(74, 222, 128, 0.14);
    --err: #f87171;
    --err-soft: rgba(248, 113, 113, 0.14);
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.48);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.58);
}