/* Mahoro Portal — dark theme（深空终端） * * Loaded AFTER _tokens.css. Activates when . * Pure token redefinition: every token defined in _tokens.css gets a * dark counterpart here. No selector-level overrides (those would * indicate a hardcoded color that should be tokenized in inline CSS). * * 深空终端色系：深空黑底（--bg #05070C 一族）+ brand 青 #7FDCFF * + violet 槽位改琥珀 #FFB454。category 六色走青→琥珀色阶。 * 涨跌红绿（--up/--down）等金融语义色不动。 * * A few targeted .selector overrides at the bottom handle leftover * hardcoded literals from inline CSS that aren't worth promoting to * tokens (low-frequency code/blockquote/slate-grays). */ :root[data-theme="dark"] { /* ── Base surfaces & text（深空黑系；ink 灰阶保持浅暖白） ── */ --bg: #05070C; --bg-tint: linear-gradient(180deg, #070C14 0%, #05070C 40%, #030509 100%); --card: #0A0E16; --line: rgba(127,220,255,0.14); /* 发丝线：青基调 */ --ink: #F4F0F7; --ink2: #C7C0D2; --ink3: #8B8194; --ink4: #5C535F; /* ── Brand → 青 (powered up for dark contrast) ── */ --brand: #7FDCFF; --brand-soft: rgba(127, 220, 255, 0.14); --brand-ink: #B8E9FF; --violet: #FFB454; /* violet 槽位 → 琥珀 */ --violet-soft: rgba(255, 180, 84, 0.14); /* ── Category tags（青→琥珀色阶） ── */ --cat-concept-tag: #7FDCFF; --cat-concept-soft: rgba(127,220,255,0.13); --cat-concept-rule: #7FDCFF; --cat-insight-tag: #6FE3C1; --cat-insight-soft: rgba(111,227,193,0.13); --cat-insight-rule: #6FE3C1; --cat-principle-tag: #7CE69B; --cat-principle-soft: rgba(124,230,155,0.13); --cat-principle-rule: #7CE69B; --cat-mechanism-tag: #C9E06A; --cat-mechanism-soft: rgba(201,224,106,0.13); --cat-mechanism-rule: #C9E06A; --cat-process-tag: #F0C44C; --cat-process-soft: rgba(240,196,76,0.13); --cat-process-rule: #F0C44C; --cat-evidence-tag: #FFB454; --cat-evidence-soft: rgba(255,180,84,0.13); --cat-evidence-rule: #FFB454; /* ── Surfaces (cards / overlays / hover) ── */ --surface: #0A0E16; --surface-2: #0D1420; --surface-soft: rgba(255,255,255,0.04); --surface-tint: rgba(255,255,255,0.06); --surface-hover: rgba(255,255,255,0.08); /* ── Brand & violet rings / glows (slightly stronger for visibility) ── */ --brand-ring: rgba(127,220,255,0.30); --brand-glow: rgba(127,220,255,0.20); --brand-light: #A8E6FF; --violet-ring: rgba(255,180,84,0.30); --violet-shadow: rgba(255,180,84,0.32); /* ── Semantic ── */ --ink-on-accent: #05070C; /* 青/琥珀底上白字对比不足 → 深空黑字 */ --link-blue: #7FDCFF; /* brand 青同族 */ /* ── Dashboard A股 stage palette (red-up / green-down convention) ── */ --up: #FF6B6B; /* 强势/Stage 2/上升 — brighter red for dark */ --up-soft: rgba(255, 107, 107, 0.16); --down: #5FD3B6; /* 弱势/Stage 4/下跌 — teal-green for dark */ --down-soft: rgba(95, 211, 182, 0.16); --neutral: #F0C44C; /* Stage 3/顶部转化 — 琥珀族金（与 P_DARK 拍板值一致） */ --neutral-soft: rgba(240, 196, 76, 0.16); --basket: #7FDCFF; /* Stage 1/基础 — 青族 */ --basket-soft: rgba(127, 220, 255, 0.16); --undef: #5C535F; /* 未定义 — dim gray (matches --ink4) */ --undef-soft: rgba(255, 255, 255, 0.06); /* ── Shadows（黑基加深一档） ── */ --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.5); --shadow-float: 0 1px 2px rgba(0,0,0,0.6), 0 18px 40px rgba(0,0,0,0.55); --shadow-pop: 0 2px 4px rgba(0,0,0,0.65), 0 24px 60px rgba(0,0,0,0.7); color-scheme: dark; } /* ─── Body transition for theme switch (both directions) ──────────── */ html, body { transition: background-color .25s, color .25s; } /* ─── _chrome.css overrides for dark ──────────────────────────────── */ /* Topbar glass bg (chrome has it as light pink rgba — needs dark version) */ [data-theme="dark"] .topbar { background: rgba(5, 7, 12, 0.72); /* --bg #05070C 的 72% 玻璃态 */ } /* Dots-bg gradients (chrome has them tuned for light bg) — 青/琥珀透明 */ [data-theme="dark"] .dots-bg { background: radial-gradient(circle at 85% 4%, rgba(127,220,255,0.16) 0%, transparent 28%), radial-gradient(circle at 8% 88%, rgba(255,180,84,0.10) 0%, transparent 26%), radial-gradient(circle at 5% 5%, rgba(127,220,255,0.05) 0%, transparent 20%); } /* ─── Leftover hardcoded literals not worth tokenizing ────────────── */ /* Inline code: light has #f4f0f7 → dark needs a dim panel */ [data-theme="dark"] .md-note code, [data-theme="dark"] .note code { background: rgba(255,255,255,0.07) !important; color: var(--brand-ink) !important; } /* Code block (pre): stays dark in both modes — just ensure consistent */ [data-theme="dark"] .md-note pre, [data-theme="dark"] .note pre { background: #080D14 !important; /* 深空黑面板：--card #0A0E16 同族、略深一档 */ } /* Blockquote: light has soft pink bg — dark needs a brand-tinted dim bg */ [data-theme="dark"] .md-note blockquote, [data-theme="dark"] .note blockquote { background: rgba(127, 220, 255, 0.10) !important; color: var(--ink2) !important; } /* Table header: light has #fafafa — dark needs subtle */ [data-theme="dark"] .md-note table th, [data-theme="dark"] .note th { background: var(--surface-hover) !important; } /* .subtab.active / .chip.active: light has bright dark pill (var(--ink) bg + #fff text). In dark mode --ink is light → pill becomes near-white → too high contrast / 刺眼. Use border-highlight pattern instead: same dark card bg as inactive, but brand-colored text + brand-colored 1px border. Selection unmistakable but visually quiet. Applies to all 3 pill systems on the site: subtab (index), chip (feeds/signals). */ [data-theme="dark"] .subtab.active, [data-theme="dark"] .subtab-child.active, [data-theme="dark"] .chip.active { background: var(--card) !important; color: var(--brand) !important; border: 1px solid var(--brand) !important; } /* When .chip.active has an inline style="background:var(--cat-...)" override from JS template (signals page sets a category-soft bg on inactive chips), force it back to card bg. */ [data-theme="dark"] .chip.active .count { color: var(--brand) !important; opacity: 0.7; } /* Slate colors used by /lab/overview ov-mem feature */ [data-theme="dark"] .ov-mem-jump { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; color: var(--ink2) !important; } [data-theme="dark"] .ov-mem-jump:hover { background: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .ov-mem-search, [data-theme="dark"] .ov-mem-search:focus { background: var(--card) !important; border-color: var(--link-blue) !important; color: var(--ink) !important; } /* Neutral pills (.d10-tag.again, .d10-pill.neu): light has #EEE + #666 */ [data-theme="dark"] .d10-tag.again, [data-theme="dark"] .d10-pill.neu { background: var(--surface-hover) !important; color: var(--ink3) !important; } /* d10-new-card: light has pink-tinted gradient + light pink border. Dark equivalent: subtle brand-tinted gradient + brand-ring border. */ [data-theme="dark"] .d10-new-card { background: linear-gradient(135deg, rgba(127,220,255,0.05) 0%, rgba(127,220,255,0.12) 100%) !important; border-color: var(--brand-ring) !important; } /* d10-newrow: light has 70% white overlay to make rows pop on pink card. Dark equivalent: 5% white overlay on the brand-tinted dark card. */ [data-theme="dark"] .d10-newrow { background: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .d10-newrow:hover { background: rgba(255,255,255,0.08) !important; } /* ─── Theme toggle widget (injected by _theme.js) ─────────────────── */ /* .opt.active 渐变 var(--violet)→var(--brand) 现在解析为 琥珀→青 */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 4px; border-radius: 999px; background: var(--card); border: 0.5px solid var(--line); box-shadow: var(--shadow-card); } .theme-toggle .opt { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink3); transition: all .15s; font-size: 13px; font-family: var(--font-sans); border: none; background: none; cursor: pointer; padding: 0; } .theme-toggle .opt:hover { color: var(--ink2); } .theme-toggle .opt.active { background: linear-gradient(135deg, var(--violet) 0%, var(--brand) 100%); color: var(--ink-on-accent); box-shadow: 0 2px 6px var(--brand-soft); } @media (max-width: 600px) { .theme-toggle { margin-left: 4px; padding: 3px; } .theme-toggle .opt { width: 22px; height: 22px; font-size: 11px; } }