/**
 * Mika design tokens (--mika-*)
 * 语义层变量；运行时由 Main.php 注入 --radius / --btn-radius / --gap，
 * 本文件用别名映射到 --mika-*。勿在后继 CSS 再硬覆盖这三项。
 * 模块局部 token（如 --v5-r / --inspiration-gap / --home-radius）必须别名到 --mika-*，禁止写死绝对值。
 *
 * 日夜策略：
 * - 白天：画布可配；表面/顶栏/侧栏由「综合 → 日间壳层」关系解析（默认白壳台阶）
 * - 黑夜：紫灰分层 + 中性选中抬升 + 品牌主色 CTA（.dark-theme 锁定，不读亮色壳层）
 * - primary-end：亮暗均 color-mix(主色 72%, #fff)，与 Main.php 注入一致
 */
:root {
    /* 品牌 / 强调 — 设计图默认 #FF0033；运行时由 --theme-color 覆盖 */
    --mika-color-primary: var(--theme-color, #ff0033);
    --mika-color-primary-end: var(--color-primary-end, color-mix(in srgb, var(--mika-color-primary) 72%, #ffffff));
    --mika-color-on-primary: var(--color-white, #ffffff);
    /* 主色浅底上的文字（选中条、软高亮），保证与 primary-tint 背景对比 */
    --mika-color-on-primary-soft: var(--mika-color-primary);
    /* 选中/软高亮底：浓度需可辨，避免「淡到看不见」 */
    --mika-color-primary-soft: color-mix(in srgb, var(--mika-color-primary) 12%, transparent);
    --mika-color-primary-soft-strong: color-mix(in srgb, var(--mika-color-primary) 18%, transparent);

    /* 文字 · 价值阶（可点控件优先用 ink / muted，勿用 subtle） */
    --mika-color-text: var(--color-text-primary, #1f2937);
    --mika-color-text-muted: var(--color-text-regular, #6b7280);
    --mika-color-text-subtle: var(--color-text-secondary, #9ca3af);
    --mika-color-text-placeholder: var(--color-text-placeholder, #c0c4cc);
    --mika-color-ink: var(--mika-color-text);
    --mika-color-ink-strong: #111827;
    --mika-color-ink-icon: #6b7280; /* 默认可点图标 / 菜单 */

    /*
     * 财务语义（与 --theme-color 解耦）
     * gain = 入账/获得；loss = 支出/扣除；finance = 存量金额；muted = 0/无变动
     * credit = 积分存量（与余额主色区分，暖色金币感）
     * 国内习惯：红进绿出。色弱场景仍依赖 +/- 符号。
     */
    --mika-color-gain: #e54d42;
    --mika-color-gain-soft: color-mix(in srgb, var(--mika-color-gain) 12%, transparent);
    --mika-color-loss: #18a058;
    --mika-color-loss-soft: color-mix(in srgb, var(--mika-color-loss) 12%, transparent);
    --mika-color-finance: var(--mika-color-text);
    --mika-color-finance-muted: var(--mika-color-text-muted);
    --mika-color-credit: #f59e0b;

    /*
     * 信号色（不随主题色乱变；剂量克制）
     * like = 赞/收藏；heat = 热度/排行；premium = VIP/会员点缀
     * 下载/领取主路径仍用 primary 实心 CTA，避免再多一色。
     */
    --mika-color-like: #e11d48;
    --mika-color-like-soft: color-mix(in srgb, var(--mika-color-like) 12%, transparent);
    --mika-color-heat: #ea580c;
    --mika-color-heat-soft: color-mix(in srgb, var(--mika-color-heat) 12%, transparent);
    --mika-color-premium: #d97706;
    --mika-color-premium-soft: color-mix(in srgb, var(--mika-color-premium) 14%, transparent);

    /* 交互语义快捷别名 */
    --mika-color-icon: var(--mika-color-ink-icon);
    --mika-color-icon-active: var(--mika-color-primary);
    --mika-color-metric: var(--mika-color-ink-strong);
    --mika-color-metric-meta: var(--mika-color-text-muted);
    --mika-color-action-secondary: var(--mika-color-primary);

    /* 背景 / 表面 · 白天冷灰画布 + 白卡片 */
    --mika-color-bg: var(--bg-body-color, #f5f7f9);
    --mika-color-surface: var(--bg-main-color, #ffffff);
    --mika-color-surface-muted: var(--bg-muted-color, #eef1f4);
    --mika-color-surface-raised: #ffffff;
    --mika-color-surface-accent: var(--bg-text-color, color-mix(in srgb, var(--mika-color-primary) 10%, transparent));

    /* 边框 */
    --mika-color-border: var(--border-color-base, rgba(15, 23, 42, 0.08));
    --mika-color-border-muted: var(--border-color-muted, rgba(15, 23, 42, 0.05));

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

    /* 顶栏 */
    --mika-topbar-width: var(--top-menu-width, 100%);
    --mika-topbar-height: var(--top-menu-height, 64px);
    /* sticky 命令栏等：经典布局跟 top-menu；app 布局由 .app-layout-active 覆写为 channel-head */
    --header-height: var(--mika-topbar-height, var(--top-menu-height, 64px));
    --mika-topbar-bg: var(--top-menu-bg-color, #ffffff);
    --mika-topbar-text: var(--top-menu-text-color, var(--mika-color-text));

    /* 侧栏 / 频道 — 白天白底 rail */
    --mika-channel-width: var(--channel-width, 200px);
    --mika-channel-width-collapsed: var(--channel-width-collapsed, 72px);
    --mika-channel-bg: var(--channel-bg, #ffffff);
    --mika-channel-border: var(--channel-border, rgba(15, 23, 42, 0.06));
    --mika-channel-accent: var(--channel-accent, var(--mika-color-primary));

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

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

    /* 氛围光（白天关闭；黑夜由 .dark-theme 赋值） */
    --mika-glow-ambient: transparent;
    --mika-glow-ambient-2: transparent;
    --mika-glow-brand: transparent;

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

/* 深底 / 浅底 LOGO 成对切换（有 img_logo_on_dark 时） */
.mika-logo-pair {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    line-height: 0;
}
.mika-logo-pair .mika-logo {
    display: block;
    max-width: 100%;
    height: auto;
}
.mika-logo-pair .mika-logo--dark {
    display: none;
}
html.dark-theme .mika-logo-pair .mika-logo--light,
body.dark-theme .mika-logo-pair .mika-logo--light {
    display: none;
}
html.dark-theme .mika-logo-pair .mika-logo--dark,
body.dark-theme .mika-logo-pair .mika-logo--dark {
    display: block;
}
/* 亮色反差深侧栏 / 深顶栏（body class 由 shell token 注入） */
body.shell-channel-dark:not(.dark-theme) .sidebar-menu .mika-logo-pair .mika-logo--light,
body.shell-channel-dark:not(.dark-theme) .sb-logo-mini .mika-logo-pair .mika-logo--light {
    display: none;
}
body.shell-channel-dark:not(.dark-theme) .sidebar-menu .mika-logo-pair .mika-logo--dark,
body.shell-channel-dark:not(.dark-theme) .sb-logo-mini .mika-logo-pair .mika-logo--dark {
    display: block;
}
body.shell-top-dark:not(.dark-theme) .header .mika-logo-pair .mika-logo--light,
body.shell-top-dark:not(.dark-theme) .header-logo .mika-logo-pair .mika-logo--light,
body.shell-top-dark:not(.dark-theme) .brand-sm-img .mika-logo-pair .mika-logo--light {
    display: none;
}
body.shell-top-dark:not(.dark-theme) .header .mika-logo-pair .mika-logo--dark,
body.shell-top-dark:not(.dark-theme) .header-logo .mika-logo-pair .mika-logo--dark,
body.shell-top-dark:not(.dark-theme) .brand-sm-img .mika-logo-pair .mika-logo--dark {
    display: block;
}

:root .dark-theme,
html.dark-theme,
body.dark-theme {
    /* 品牌色保持 --theme-color；仅略提亮端色，避免闷 */
    --mika-color-primary: var(--theme-color, #ff0033);
    --mika-color-primary-end: var(--color-primary-end, color-mix(in srgb, var(--mika-color-primary) 72%, #ffffff));
    --mika-color-on-primary: #ffffff;
    --mika-color-on-primary-soft: color-mix(in srgb, var(--mika-color-primary) 78%, #ffffff);
    --mika-color-primary-soft: color-mix(in srgb, var(--mika-color-primary) 16%, transparent);
    --mika-color-primary-soft-strong: color-mix(in srgb, var(--mika-color-primary) 22%, transparent);

    /* 文字 · 对齐社区参考图 */
    --mika-color-text: var(--color-text-primary, #e8e8f0);
    --mika-color-text-muted: var(--color-text-regular, #8b8ba3);
    --mika-color-text-subtle: var(--color-text-secondary, #6e6e88);
    --mika-color-text-placeholder: var(--color-text-placeholder, #555570);
    --mika-color-ink: var(--mika-color-text);
    --mika-color-ink-strong: #e8e8f0;
    --mika-color-ink-icon: #a8a8c0;

    /*
     * 紫灰分层（对齐社区参考）：页面最深 → 侧栏略亮 → 卡片再亮
     * 忌近黑 #0b0b14；靠色阶抬升，少用硬边框
     */
    --mika-color-bg: var(--bg-body-color, #1c1c2a);
    --mika-color-surface: var(--bg-main-color, #2a2a3c);
    --mika-color-surface-muted: var(--bg-muted-color, #232334);
    --mika-color-surface-raised: #32324a;
    --mika-color-border: var(--border-color-base, rgba(255, 255, 255, 0.06));
    --mika-color-border-muted: var(--border-color-muted, rgba(255, 255, 255, 0.04));

    --mika-topbar-bg: var(--top-menu-bg-color, rgba(28, 28, 42, 0.94));
    --mika-topbar-text: var(--top-menu-text-color, #e8e8f0);
    --mika-channel-bg: var(--channel-bg, #242436);
    --mika-channel-border: var(--channel-border, rgba(255, 255, 255, 0.05));
    --mika-channel-accent: var(--channel-accent, color-mix(in srgb, var(--mika-color-primary) 78%, #ffffff));
    --mika-scrollbar-thumb: var(--scrollbar-thumb, #3a3a52);

    /* 氛围克制：参考图几乎无光斑，只留极淡品牌软光 */
    --mika-glow-ambient: rgba(99, 102, 241, 0.05);
    --mika-glow-ambient-2: rgba(99, 102, 241, 0.03);
    --mika-glow-brand: color-mix(in srgb, var(--mika-color-primary) 6%, transparent);

    --mika-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
    --mika-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);

    /* 财务语义 · 暗色 */
    --mika-color-gain: #f07167;
    --mika-color-gain-soft: color-mix(in srgb, var(--mika-color-gain) 18%, transparent);
    --mika-color-loss: #34d399;
    --mika-color-loss-soft: color-mix(in srgb, var(--mika-color-loss) 18%, transparent);
    --mika-color-finance: var(--mika-color-text, #e8e8f0);
    --mika-color-finance-muted: var(--mika-color-text-muted, #8b8ba3);
    --mika-color-credit: #fbbf24;

    --mika-color-like: #fb7185;
    --mika-color-like-soft: color-mix(in srgb, var(--mika-color-like) 18%, transparent);
    --mika-color-heat: #fb923c;
    --mika-color-heat-soft: color-mix(in srgb, var(--mika-color-heat) 18%, transparent);
    --mika-color-premium: #fbbf24;
    --mika-color-premium-soft: color-mix(in srgb, var(--mika-color-premium) 18%, transparent);
    --mika-color-icon: var(--mika-color-ink-icon);
    --mika-color-icon-active: var(--mika-channel-accent);
    --mika-color-metric: var(--mika-color-ink-strong);
    --mika-color-metric-meta: var(--mika-color-text-muted);
    --mika-color-action-secondary: var(--mika-color-primary);
}