/* ============================================================================
 * A5 特效钢琴 · 设计令牌（design tokens）
 * ----------------------------------------------------------------------------
 * 2026-10-19（第八十一轮 · 用户要求「UI 精致化」）
 * ★ 只放**变量 + 极少量全局基础** ✗ 不放具体组件样式（那在 page-tool.css 末尾 / fx-export.js）
 * ★ 以后改主题只改这一处 ⇒ 页面 / 参数面板 / 导出面板 / 队列 自动跟着变 ✓
 * ============================================================================ */
:root {
    /* —— 颜色 —— */
    --c-bg:          #f2f6f4;   /* 页面底（2026-10-19 第八十二轮：略深一点，让白卡片浮起来） */
    --c-surface:     #ffffff;   /* 卡片 / 面板 */
    --c-surface-2:   #f6faf8;   /* 次级面（工具条 / 信息条） */
    --c-line:        #e3ebe6;   /* 细边 */
    --c-line-strong: #cfe3d6;   /* 可交互边框 */
    --c-text:        #111827;   /* 主文字（更黑 ⇒ 白底上更清楚 ✓） */
    --c-text-2:      #4b5563;   /* 次文字 */
    --c-text-3:      #6b7280;   /* 弱文字 */

    --c-brand:       #2f855a;   /* 品牌绿 */
    --c-brand-hover: #37a06c;
    --c-brand-down:  #276749;
    --c-brand-soft:  #eef7f1;

    --c-danger:      #c0392b;
    --c-danger-soft: #fdecea;
    --c-warn:        #b7791f;
    --c-warn-soft:   #fdf6e3;

    /* —— 圆角 —— */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* —— 间距 —— */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;

    /* —— 阴影 —— */
    --sh-1: 0 1px 2px rgba(16, 60, 40, .04);
    --sh-2: 0 8px 24px -16px rgba(16, 60, 40, .28);
    --sh-3: 0 18px 50px -24px rgba(16, 60, 40, .28);

    /* —— 字号 —— */
    --fz-1: 12px;
    --fz-2: 13px;
    --fz-3: 15px;
    --fz-4: 18px;

    /* —— 动效 —— */
    --dur: .16s;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* 页面 / 容器字体：统一一套（避免中文在 system-ui 下忽粗忽细） */
body.v2-route {
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

/* —— 全局观感（只作用于工具页；导出舞台 body.fx-stage 不受影响 ✓）—— */
body.v2-route {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 选中文字：品牌绿淡底（默认蓝色选区在这套绿白里很跳 ✗） */
body.v2-route ::selection {
    background: rgba(47, 133, 90, .18);
    color: var(--c-text);
}

/* 键盘可达性：统一的绿色焦点环（只在键盘 Tab 时出现 ✓ 鼠标点击不显示） */
body.v2-route :focus-visible {
    outline: 2px solid rgba(47, 133, 90, .45);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* 数字等宽：时间 / 百分比 / 尺寸 不再跳字 ✓ */
body.v2-route .piano-time,
body.v2-route .tool-stat,
body.v2-route .piano-nav-range,
body.v2-route #fxSize,
body.v2-route .fx-log {
    font-variant-numeric: tabular-nums;
}