/* ============================================================================
* Mira 觅画 · 印社暗夜 Dark Override (5/30)
*
* 加载顺序：必须最后加载（覆盖优先级最高）
* index.html 最后一个 ，跟 landing.html 视觉对齐
*
* 视觉哲学：墨与桑皮纸为骨，朱砂仅作落款一笔
* 不动 token 命名，仅 invert 值；mockA 视觉规范
* Chrome on Windows 字渲染优化：antialiased + optimizeLegibility + Segoe UI 优先
* ============================================================================ */
/* ============================================================================
* Layer 1 — PRIMITIVE invert
* ink ↔ paper 互换；朱砂/古铜金在暗底上微调更鲜艳
* ============================================================================ */
:root {
/* 桑皮纸 → 墨 (浅底反转为深底) */
--paper-50: #181410;
--paper-100: #211c17;
--paper-200: #2a221b;
--paper-300: #3a2f24;
--paper-400: #4a3d30;
/* 墨 → 米白 (深字反转为米白) */
--ink-50: #181410;
--ink-100: #211c17;
--ink-200: #2a221b;
--ink-300: #6b5d4f;
--ink-500: #8a7d6e;
--ink-700: #b8a896;
--ink-900: #ebe0d4;
/* 朱砂 (暗底上需要更鲜艳) */
--seal-50: rgba(200,40,31,0.12);
--seal-100: rgba(200,40,31,0.22);
--seal-300: rgba(200,40,31,0.45);
--seal-500: #c8281f;
--seal-700: #9b1d16;
--seal-900: #7a1611;
/* 古铜金 (暗底上提亮) */
--gold-50: rgba(212,163,86,0.10);
--gold-100: rgba(212,163,86,0.18);
--gold-300: rgba(212,163,86,0.32);
--gold-500: #d4a356;
--gold-700: #b87333;
/* 翠墨 (暗底上柔和) */
--jade-100: rgba(74,136,112,0.18);
--jade-300: #6db96d;
--jade-500: #4A8870;
--jade-700: #2a5a47;
/* === 阴影暗底化（替换原 warm 投影为深黑） === */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
--shadow-sm: 0 1px 0 rgba(212,163,86,0.18) inset, 0 2px 8px rgba(0,0,0,0.35);
--shadow-md: 0 1px 0 rgba(212,163,86,0.22) inset, 0 8px 24px rgba(0,0,0,0.45);
--shadow-lg: 0 1px 0 rgba(212,163,86,0.32) inset, 0 16px 48px rgba(0,0,0,0.55);
--shadow-press: 0 1px 0 rgba(212,163,86,0.32) inset, 0 8px 24px rgba(200,40,31,0.32);
--shadow-ring: 0 0 0 3px rgba(212,163,86,0.32);
}
/* ============================================================================
* Layer 2 — SEMANTIC remap (修正 light-only 硬编码 #ffffff)
* ============================================================================ */
:root {
--surface-base: var(--paper-50);
--surface-raised: var(--paper-200);
--surface-card: var(--paper-100); /* 不再 #ffffff */
--surface-sunken: var(--paper-300);
--surface-overlay: rgba(10,8,6,0.72); /* 更深 + blur */
--text-primary: var(--ink-900);
--text-secondary: var(--ink-700);
--text-muted: var(--ink-500);
--text-disabled: var(--ink-300);
--text-inverse: #fff8eb; /* 朱砂底上的米白文字 */
--text-accent: var(--seal-500);
--text-number: var(--gold-500);
--border-subtle: rgba(212,163,86,0.18);
--border-default: rgba(212,163,86,0.32);
--border-strong: var(--gold-500);
--border-accent: var(--seal-300);
--border-focus: var(--gold-500);
--status-success: var(--jade-300);
--status-warning: var(--gold-500);
--status-error: var(--seal-500);
--status-info: var(--ink-500);
--accent-base: var(--seal-500);
--accent-hover: var(--seal-700);
--accent-press: var(--seal-900);
--accent-soft: rgba(200,40,31,0.12);
--accent-line: rgba(200,40,31,0.32);
--accent-glow: rgba(200,40,31,0.50);
}
/* ============================================================================
* Layer 3 — COMPONENT remap
* ============================================================================ */
:root {
--input-bg: var(--paper-200); /* 不再 #ffffff */
--card-bg: var(--surface-card);
--modal-bg: var(--surface-card);
}
/* ============================================================================
* 字渲染 3 件套 (Chrome on Windows 解决字模糊)
* ============================================================================ */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection { background: var(--seal-500); color: #fff8eb; }
/* body 系统字体最清晰；仅标题用思源宋体显气质 */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Microsoft YaHei UI', 'Source Han Sans SC', system-ui, sans-serif !important;
font-feature-settings: 'kern' 1, 'liga' 1;
background: var(--paper-50);
color: var(--ink-900);
/* 宣纸金粉噪点：暗底上的微妙金色质感 */
background-image:
url("data:image/svg+xml;utf8,");
}
/* 仅标题用思源宋体（中文衬线显气质，body 用系统字体最清晰） */
h1, h2, h3, .panel-title, .section-title, .page-title,
.lib-drawer-title, .modal-title {
font-family: 'Noto Serif SC', 'Source Han Serif SC', serif !important;
}
/* 朱砂角章光晕（mockA 视觉锚点 — 右上 fixed） */
body::after {
content: '';
position: fixed;
top: -120px; right: -120px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(200,40,31,0.18), transparent 70%);
pointer-events: none;
z-index: 0;
}
/* ============================================================================
* 通用：硬编码白底覆盖（兜底，针对 token 无法触达的散装 white）
* 仅覆盖明确"色卡"性质的白底，不动 inline image / SVG fill
* ============================================================================ */
/* header / 顶栏类 — 半透明墨色 */
.header, header.header,
.ad-header {
background: rgba(33, 28, 23, 0.85) !important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--gold-300) !important;
}
/* nav-btn active — 朱砂 */
.nav-btn.active {
background: var(--seal-500) !important;
color: #fff8eb !important;
box-shadow:
inset 0 0 0 1px rgba(255,248,235,0.22),
0 2px 6px rgba(200,40,31,0.32);
}
.nav-btn:hover:not(.active) {
background: rgba(212,163,86,0.10);
color: var(--ink-900);
}
/* input / select / textarea — 墨底金边 */
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="date"], input[type="search"],
input[type="url"], input[type="tel"],
select, textarea {
background: var(--paper-200) !important;
color: var(--ink-900) !important;
border-color: var(--gold-300) !important;
}
input:focus, select:focus, textarea:focus {
border-color: var(--gold-500) !important;
background: var(--paper-300) !important;
box-shadow: 0 0 0 2px rgba(212,163,86,0.22) !important;
outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-500) !important; }
/* drawer / modal overlay 暗夜化 */
.lib-drawer-overlay, .modal-overlay, .modal-mask {
background: rgba(10, 8, 6, 0.72) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.lib-drawer-panel, .modal-card, .modal-content {
background: linear-gradient(180deg, #2a221b 0%, #181410 100%) !important;
border-left: 1px solid var(--gold-300) !important;
}
/* 主区域 main 在光晕上层 */
main, .main, .workstation, .panel-container, .content {
position: relative;
z-index: 1;
}
/* 凡是 background: #fff / #ffffff / white 的散装写法兜底覆盖 */
[style*="background:#fff"]:not([style*="rgba"]):not([style*="#fff8eb"]):not([style*="#fff5"]) {
background-color: var(--paper-100) !important;
color: var(--ink-900) !important;
}