/* ========================================
   墨韵幽境 — 色彩系统 (Ink & Void Palette)
   ======================================== */

:root {
    /* ── 墨色系 (Ink Tones) ── */
    --ink-black: #0b0b0e;
    --ink-deep: #141418;
    --ink-surface: #1c1c22;
    --ink-subtle: #2a2a33;

    /* ── 宣纸色系 (Parchment) ── */
    --parchment: #e8dcc8;
    --parchment-dim: #b8a88a;
    --parchment-faint: rgba(232, 220, 200, 0.08);

    /* ── 琥珀点缀 (Amber Accent) ── */
    --amber: #c8956c;
    --amber-light: #ddb08a;
    --amber-glow: rgba(200, 149, 108, 0.3);
    --amber-faint: rgba(200, 149, 108, 0.1);

    /* ── 玉色交互 (Jade Interactive) ── */
    --jade: #6b8f71;
    --jade-dim: rgba(107, 143, 113, 0.2);
    --jade-glow: rgba(107, 143, 113, 0.35);

    /* ── 朱砂警示 (Crimson Warning) ── */
    --crimson: #8b3a3a;
    --crimson-light: #a85050;
    --crimson-dim: rgba(139, 58, 58, 0.2);

    /* ── 文字色阶 ── */
    --text-primary: #e0d6c8;
    --text-secondary: #9a9089;
    --text-muted: #5c564f;
    --text-disabled: #3d3832;

    /* ── 边框 ── */
    --border: rgba(232, 220, 200, 0.1);
    --border-hover: rgba(232, 220, 200, 0.25);
    --border-active: rgba(200, 149, 108, 0.5);

    /* ── 遮罩 ── */
    --overlay-light: rgba(11, 11, 14, 0.4);
    --overlay-medium: rgba(11, 11, 14, 0.65);
    --overlay-heavy: rgba(11, 11, 14, 0.85);

    /* ── 阴影 ── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

    /* ── 结局基调色（保留供 JS 使用） ── */
    --color-tone-he: #6b8f71;
    --color-tone-be: #9B59B6;
    --color-tone-ne: #b8a88a;
    --color-tone-dark: #5c564f;
    --color-tone-humor: #d4a843;
    --color-tone-abstract: #9B59B6;
    --color-tone-aesthetic: #8b3a3a;
    --color-tone-logical: #6b8f71;
    --color-tone-mystery: #c8956c;
    --color-tone-stream: #9B59B6;

    /* ── 向后兼容别名（供 JS 中未修改的动态样式引用） ── */
    --color-primary: var(--amber);
    --color-primary-dark: #a87a52;
    --color-primary-light: var(--amber-light);
    --color-primary-rgb: 200, 149, 108;
    --color-primary-10: var(--amber-faint);
    --color-primary-20: rgba(200, 149, 108, 0.2);
    --color-primary-30: var(--amber-glow);
    --color-primary-50: rgba(200, 149, 108, 0.5);
    --color-danger: var(--crimson);
    --color-danger-dark: #6e2c2c;
    --color-success: var(--jade);
    --color-success-dark: #4f7255;
    --color-info: var(--parchment-dim);
    --color-warning: #d4a843;
    --color-bg-primary: var(--ink-black);
    --color-bg-secondary: var(--ink-deep);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-muted);
    --color-border: var(--border);
}

/* ── 全局基底 ── */
body {
    background-color: var(--ink-black);
    color: var(--text-primary);
}

#gameplay-screen {
    background-color: transparent;
    color: var(--text-primary);
}

/* ── 按钮颜色覆盖（供 color_system 内 btn-main 兼容） ── */
.btn-main,
.btn-primary {
    background-color: transparent !important;
    border-color: var(--border-hover) !important;
    color: var(--text-primary) !important;
}

.btn-main:hover,
.btn-primary:hover {
    border-color: var(--amber) !important;
    color: var(--amber) !important;
    box-shadow: 0 0 20px var(--amber-faint) !important;
}

/* ── 选项编号兼容 ── */
.option-number {
    background-color: var(--amber) !important;
    color: var(--ink-black) !important;
}

.option-card.selected .option-number {
    background-color: var(--parchment) !important;
    color: var(--ink-black) !important;
}

/* ── 进度条 ── */
.progress-fill {
    background: var(--amber) !important;
}

/* ── 焦点轮廓 ── */
*:focus-visible {
    outline-color: var(--amber);
    outline-offset: 2px;
}

/* ── 链接 ── */
a {
    color: var(--amber);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--amber-light);
}