/* =============================================================================
   WAF 控制台 · Design Tokens
   改皮肤只改这一层：中性面 / 语义色 / 品牌 / 间距 / 圆角 / 动效
   ========================================================================== */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 浅色（默认） */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f2f5f9;
  --surface-3: #e7ecf3;
  --side-bg: #0b0f15;
  --border: #e3e8f0;
  --border-strong: #d3dae5;

  --fg: #101a28;
  --fg-muted: #55637a;
  --fg-subtle: #8894a8;

  --ok: #17935f;
  --ok-soft: rgba(23, 147, 95, .12);
  --warn: #c2760c;
  --warn-soft: rgba(194, 118, 12, .12);
  --danger: #d92d20;
  --danger-soft: rgba(217, 45, 32, .10);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, .10);

  --brand: #3f6fe8;
  --brand-strong: #2d5bd4;
  --brand-ink: #1e46b8;
  --brand-soft: rgba(63, 111, 232, .12);
  --brand-ring: rgba(63, 111, 232, .22);

  --c1: #3f6fe8; --c2: #21a699; --c3: #8a6fd0; --c4: #cf9a3c;
  --c5: #cb5f63; --c6: #3f8fc4; --c7: #7fa04f; --c8: #59699e;

  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r: 12px; --r-lg: 16px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(16, 26, 40, .04);
  --sh-2: 0 2px 6px rgba(16, 26, 40, .05), 0 16px 36px rgba(16, 26, 40, .06);
  --sh-modal: 0 24px 64px rgba(11, 15, 21, .32);

  /* 间距节奏：整页所有间隙都从这一组里取，页面才不会忽宽忽窄 */
  --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px;
  --gap-5: 20px; --gap-6: 24px; --gap-7: 32px; --gap-8: 40px;

  --side-w: 236px;
  --content-max: 1560px;

  --m-fast: 120ms; --m-base: 160ms; --ease: cubic-bezier(.2, .9, .3, 1);

  --z-nav: 30; --z-modal: 60; --z-toast: 70;
}

/* 深色（默认使用） */
:root[data-theme="dark"] {
  --bg: #080b10;
  --surface: #0f131a;
  --surface-2: #151b24;
  --surface-3: #1c242f;
  --side-bg: #0b0f15;
  --border: #1d2530;
  --border-strong: #2a3441;

  --fg: #e7ecf3;
  --fg-muted: #94a1b3;
  --fg-subtle: #6a7683;

  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, .14);
  --warn: #f1a03c;
  --warn-soft: rgba(241, 160, 60, .16);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .14);
  --info: #6f9bff;
  --info-soft: rgba(111, 155, 255, .14);

  --brand: #4f7dff;
  --brand-strong: #3d6df0;
  --brand-ink: #a9c0ff;
  --brand-soft: rgba(79, 125, 255, .16);
  --brand-ring: rgba(79, 125, 255, .30);

  --c1: #5b86f5; --c2: #37b7a8; --c3: #a58bdf; --c4: #e0aa57;
  --c5: #e0797f; --c6: #4fa3d8; --c7: #9dbb6a; --c8: #7d8ec6;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-2: 0 1px 0 rgba(255, 255, 255, .02), 0 18px 40px rgba(0, 0, 0, .38);
  --sh-modal: 0 28px 70px rgba(0, 0, 0, .62);
}

:root { --hover-1: rgba(16, 26, 40, .03); --hover-2: rgba(16, 26, 40, .055); }
:root[data-theme="dark"] { --hover-1: rgba(255, 255, 255, .03); --hover-2: rgba(255, 255, 255, .06); }