/**
 * Mkua design tokens (--mk-*)
 * 语义层变量；运行时主题色仍由 Main.php inline :root 注入的 --theme-color 驱动。
 */
:root {
    /* 品牌 / 强调 */
    --mk-color-primary: var(--theme-color, #7c5cfc);
    --mk-color-primary-end: var(--color-primary-end, color-mix(in srgb, var(--mk-color-primary) 28%, #34b2ff));
    --mk-color-on-primary: var(--color-white, #ffffff);

    /* 文字 */
    --mk-color-text: var(--color-text-primary, #1a1d2e);
    --mk-color-text-muted: var(--color-text-regular, #64748b);
    --mk-color-text-subtle: var(--color-text-secondary, #94a3b8);
    --mk-color-text-placeholder: var(--color-text-placeholder, #c9ccd0);

    /* 背景 / 表面 */
    --mk-color-bg: var(--bg-body-color, #f4f5f9);
    --mk-color-surface: var(--bg-main-color, #ffffff);
    --mk-color-surface-muted: var(--bg-muted-color, var(--mk-color-bg));
    --mk-color-surface-accent: var(--bg-text-color, rgba(124, 92, 252, 0.12));

    /* 边框 */
    --mk-color-border: var(--border-color-base, rgba(0, 0, 0, 0.07));
    --mk-color-border-muted: var(--border-color-muted, rgba(0, 0, 0, 0.07));

    /* 布局 */
    --mk-site-width: var(--site-width, 2560px);
    --mk-wrapper-width: var(--wrapper-width, 1200px);
    --mk-sidebar-width: var(--sidebar-width, 300px);
    --mk-gap: var(--gap, 16px);
    --mk-radius: var(--radius, 8px);
    --mk-radius-button: var(--btn-radius, var(--mk-radius));

    /* 顶栏 */
    --mk-topbar-width: var(--top-menu-width, 100%);
    --mk-topbar-height: var(--top-menu-height, 56px);
    --mk-topbar-bg: var(--top-menu-bg-color, rgba(255, 255, 255, 0.92));
    --mk-topbar-text: var(--top-menu-text-color, var(--mk-color-text));

    /* 侧栏 / 频道 */
    --mk-channel-width: var(--channel-width, 240px);
    --mk-channel-width-collapsed: var(--channel-width-collapsed, 56px);
    --mk-channel-bg: var(--channel-bg, var(--mk-color-surface));
    --mk-channel-border: var(--channel-border, var(--mk-color-border));
    --mk-channel-accent: var(--channel-accent, var(--mk-color-primary));

    /* 滚动条 */
    --mk-scrollbar-size: var(--scrollbar-size, 8px);
    --mk-scrollbar-thumb: var(--scrollbar-thumb, rgba(100, 116, 139, 0.28));
    --mk-scrollbar-track: var(--scrollbar-track, transparent);

    /* 阴影 / 层级（预留） */
    --mk-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --mk-shadow-md: var(--channel-shadow, 0 8px 32px rgba(15, 23, 42, 0.08));
    --mk-z-dropdown: 1000;
    --mk-z-modal: 2000;
    --mk-z-toast: 3000;

    /* 动效 */
    --mk-duration-fast: 150ms;
    --mk-duration-normal: 250ms;
    --mk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

:root .dark-theme,
html.dark-theme,
body.dark-theme {
    --mk-color-primary: var(--theme-color, #7c5cfc);
    --mk-color-primary-end: var(--color-primary-end, color-mix(in srgb, var(--mk-color-primary) 68%, #b49aff));
    --mk-color-text: var(--color-text-primary, #ffffff);
    --mk-color-text-muted: var(--color-text-regular, #a0a0b0);
    --mk-color-text-subtle: var(--color-text-secondary, #808098);
    --mk-color-text-placeholder: var(--color-text-placeholder, #5c5c7a);
    --mk-color-bg: var(--bg-body-color, #1e1e2d);
    --mk-color-surface: var(--bg-main-color, #252538);
    --mk-color-surface-muted: var(--bg-muted-color, #1a1a28);
    --mk-color-border: var(--border-color-base, #3b3b54);
    --mk-color-border-muted: var(--border-color-muted, rgba(59, 59, 84, 0.55));
    --mk-topbar-bg: var(--top-menu-bg-color, rgba(22, 22, 37, 0.92));
    --mk-topbar-text: var(--top-menu-text-color, #ffffff);
    --mk-scrollbar-thumb: var(--scrollbar-thumb, #252538);
}