:root {
	--n-sider-width: 22rem; /* 侧边栏宽度,已经弃用，naive sider props width 替代 */
	--n-sider-login-height: var(--n-header-height); /* 侧边栏登录栏高度 */
	--n-header-height: 5rem; /* 顶部栏高度 */
	--n-footer-height: 4rem; /* 底部栏高度 */
	--n-main-diff-height: calc(var(--n-header-height)); /* 顶部栏和底部栏高度之和 */
	--n-content-margin: 1.2rem; /* 内容区内边距 */
	--n-content-padding: 1.2rem; /* 内容区内边距 */
	--n-dialog-title-padding: 0; /* 对话框标题内边距 */
	--n-layout-content-background-color: #f8fafc; /* 内容区背景颜色 */

	/* Home View Custom Colors */
	--color-workflow-bg: rgba(16, 185, 129, 0.08);
	--color-workflow-icon-wrapper-bg: rgba(16, 185, 129, 0.15);

	--color-cert-bg: rgba(245, 158, 11, 0.08);
	--color-cert-icon-wrapper-bg: rgba(245, 158, 11, 0.15);

	--color-monitor-bg: rgba(139, 92, 246, 0.08);
	--color-monitor-icon-wrapper-bg: rgba(139, 92, 246, 0.15);
	--color-monitor-text: #8B5CF6; /* 紫色，用于图标和标题 */

	--color-decorative-element-bg: #f0f9ff; /* 用于替换 Tailwind bg-blue-50 */
}

:root.dark {
	--n-layout-content-background-color: transparent; /* 内容区背景颜色 */

	/* Home View Custom Colors - Dark Theme */
	--color-workflow-bg: rgba(var(--n-success-color-rgb), 0.12); /* 使用 Naive UI 暗色主题成功色的 RGB 值，并调整透明度 */
	--color-workflow-icon-wrapper-bg: rgba(var(--n-success-color-rgb), 0.22);

	--color-cert-bg: rgba(var(--n-warning-color-rgb), 0.12); /* 使用 Naive UI 暗色主题警告色的 RGB 值，并调整透明度 */
	--color-cert-icon-wrapper-bg: rgba(var(--n-warning-color-rgb), 0.22);

	--color-monitor-bg: rgba(167, 139, 250, 0.12); /* 调整为较亮的紫色，并设置透明度 */
	--color-monitor-icon-wrapper-bg: rgba(167, 139, 250, 0.22);
	--color-monitor-text: #A78BFA; /* 较亮的紫色，用于暗色主题 */

	--color-decorative-element-bg: rgba(30, 41, 59, 0.7); /* 暗色主题下的装饰背景色 */
}

