/* 设计 token 唯一权威源（Issue #278）
   全站 layout / layui header / 独立壳在其它站内 CSS 之前引入。
   其它 CSS 只消费 var()，不得再声明完整 :root token 表。 */
:root {
    /* ---------- 主色 / 语义色 ---------- */
    --vui-primary: #2563eb;
    --vui-primary-hover: #1d4ed8;
    --vui-primary-active: #1e40af;
    --vui-primary-soft: #dbeafe;
    --vui-primary-softer: #eff6ff;
    --vui-bg: #f6f7fb;
    --vui-surface: #ffffff;
    --vui-surface-muted: #f8fafc;
    --vui-border: #e5e7eb;
    --vui-border-soft: #e8ecf2;
    --vui-border-muted: #eef1f6;
    --vui-control-border: #d1d5db;
    --vui-control-border-soft: #d8dee8;
    --vui-text: #1f2937;
    --vui-text-2: #4b5563;
    --vui-text-3: #6b7280;
    --vui-text-4: #9ca3af;
    --vui-success: #15803d;
    --vui-success-bg: #ecfdf3;
    --vui-danger: #b42318;
    --vui-danger-bg: #fef3f2;
    --vui-warn: #b54708;
    --vui-warn-bg: #fffaeb;
    --vui-info: #2563eb;
    --vui-info-bg: #eff6ff;

    /* ---------- 圆角 8 / 10 / 14 ---------- */
    --vui-radius-sm: 8px;
    --vui-radius-md: 10px;
    --vui-radius-lg: 14px;

    /* ---------- 控件高度 32 / 28 / 36 ---------- */
    --vui-ctrl-h: 32px;
    --vui-ctrl-h-sm: 28px;
    --vui-ctrl-h-lg: 36px;
    --vui-ctrl-px: 12px;
    --vui-ctrl-px-sm: 8px;
    --vui-gap: 8px;

    /* ---------- 间距 4 的倍数六档（docs/design.md §1） ----------
       历史代码里 2~20 每个整数都有人用，5/7/9/11/13 全是噪声。
       新写和改到的地方只取这六个值。 */
    --vui-space-1: 4px;
    --vui-space-2: 8px;
    --vui-space-3: 12px;
    --vui-space-4: 16px;
    --vui-space-6: 24px;
    --vui-space-8: 32px;

    /* ---------- 字号（全站一档密度） ---------- */
    --vui-font-xs: 12px;
    --vui-font-sm: 13px;
    --vui-font-md: 14px;
    --vui-font-lg: 15px;
    --vui-font-xl: 16px;

    /* ---------- 阴影语义 ---------- */
    --vui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
    --vui-shadow-md: 0 8px 24px rgba(15, 23, 42, .10), 0 2px 8px rgba(15, 23, 42, .06);
    --vui-shadow-lg: 0 16px 48px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08);

    /* ---------- 中台壳契约 ---------- */
    --console-topbar-h: 56px;
    --console-sidenav-w: 216px;
    --console-canvas: var(--vui-bg);
    --console-topbar-bg: rgba(255, 255, 255, .97);
    --console-topbar-border: var(--vui-border);
    /* 浅色侧栏：白底 + 细边框 */
    --console-sidenav-bg: #ffffff;
    --console-sidenav-bg-elevated: var(--vui-primary-softer);
    --console-sidenav-border: var(--vui-border);
    --console-sidenav-text: #334155;
    --console-sidenav-text-2: #64748b;
    --console-sidenav-text-3: #94a3b8;
    --console-sidenav-hover: #f1f5f9;
    /* 「当前所在」在顶部导航和侧栏要长一样：原来顶部用 primary-soft + primary-active，
       侧栏用 primary-softer + primary，同一件事两种深浅，扫一眼分不清哪个才是选中。 */
    --console-sidenav-active-bg: var(--vui-primary-soft);
    --console-sidenav-active-text: var(--vui-primary-active);
    --console-mask: rgba(15, 23, 42, .42);
    --console-focus-ring: rgba(37, 99, 235, .28);
    --console-focus-outline: 2px solid rgba(37, 99, 235, .45);
}

/* Element Plus 映射：仅中台壳 body 下生效，不改 vendor */
body.console-shell {
    --el-color-primary: var(--vui-primary);
    --el-color-primary-light-3: #60a5fa;
    --el-color-primary-light-5: #93c5fd;
    --el-color-primary-light-7: #bfdbfe;
    --el-color-primary-light-8: #dbeafe;
    --el-color-primary-light-9: #eff6ff;
    --el-color-primary-dark-2: var(--vui-primary-hover);
    --el-border-radius-base: var(--vui-radius-sm);
    --el-border-radius-small: 6px;
    --el-border-radius-round: 999px;
    --el-color-success: var(--vui-success);
    --el-color-warning: var(--vui-warn);
    --el-color-danger: var(--vui-danger);
    --el-color-error: var(--vui-danger);
    --el-color-info: var(--vui-text-3);
    --el-bg-color: var(--vui-surface);
    --el-bg-color-page: var(--vui-bg);
    --el-text-color-primary: var(--vui-text);
    --el-text-color-regular: var(--vui-text-2);
    --el-text-color-secondary: var(--vui-text-3);
    --el-text-color-placeholder: var(--vui-text-4);
    --el-border-color: var(--vui-border);
    --el-border-color-light: var(--vui-border-muted);
    --el-fill-color-blank: var(--vui-surface);
}

/* design.md §2：弹窗、大容器用 lg。element-plus 默认给 8px，比里面的面板（md 10）
   还小，「内层圆角必须小于外层」这条就反了过来。
   这条必须写在 .el-dialog 上而不是 :root —— element-plus 把
   --el-dialog-border-radius 声明在 .el-dialog 自己身上，:root 的同名值压不过它。
   选择器还得重复一次：tokens.css 排在 element-plus 的 index.css 前面，
   同特异性时后来者赢，(0,2,0) 才压得住它那条 (0,1,0)。 */
.el-dialog.el-dialog { --el-dialog-border-radius: var(--vui-radius-lg); }
