/* ============================================================ skin.css — 皮肤变量层（#1181） 加载顺序：style.css → design-system.css → shell-premium.css → content-premium.css → 本文件（最后） 只覆盖 --shell-*（侧栏）与 --cp-*（内容区品牌/画布）两组变量， 零布局改动、零 HTML/JS 逻辑改动。切换入口：顶栏调色板按钮， + localStorage('scheduler_skin') 记忆。 5 套主题： dawn 晨光白（默认，无覆盖 = 现行纯白清爽版） ocean 深海蓝（深蓝侧栏 + 天青点缀） graphite 石墨黑（近黑侧栏 + 靛蓝点缀） aurora 极光紫（深紫侧栏 + 紫罗兰点缀） forest 森林绿（深绿侧栏 + 祖母绿点缀） ⚠️ 语义色（.tt-* / .btn-danger / .sched-mode-pill 等）一律不碰。 ============================================================ */ /* ── 深海蓝 ── */ html[data-skin="ocean"] { --shell-bg: #0b2a4a; --shell-bg-soft: rgba(255, 255, 255, .06); --shell-group: #7da2c8; --shell-hair: rgba(255, 255, 255, .12); --shell-hair-strong: rgba(255, 255, 255, .22); --shell-nav-fg: #c3d7ec; --shell-nav-fg-hover: #ffffff; --shell-nav-bg-hover: rgba(255, 255, 255, .08); --shell-active-bg: rgba(56, 189, 248, .18); --shell-active-fg: #7dd3fc; --shell-brand-fg: #ffffff; --shell-brand-sub: #8fb3d4; --shell-footer-fg: #7da2c8; --shell-search-bg: rgba(15, 23, 42, .045); --shell-search-bd: rgba(15, 23, 42, .09); --cp-canvas: #f4f8fd; --cp-brand: #0369a1; --cp-brand-2: #0ea5e9; --cp-aurora: linear-gradient(100deg, #0284c7 0%, #0ea5e9 52%, #38bdf8 100%); --cp-ring: rgba(2, 132, 199, .18); --cp-tint: rgba(14, 165, 233, .06); } /* ── 石墨黑 ── */ html[data-skin="graphite"] { --shell-bg: #111827; --shell-bg-soft: rgba(255, 255, 255, .06); --shell-group: #8b94a7; --shell-hair: rgba(255, 255, 255, .11); --shell-hair-strong: rgba(255, 255, 255, .20); --shell-nav-fg: #b9c0cf; --shell-nav-fg-hover: #ffffff; --shell-nav-bg-hover: rgba(255, 255, 255, .08); --shell-active-bg: rgba(99, 102, 241, .20); --shell-active-fg: #a5b4fc; --shell-brand-fg: #ffffff; --shell-brand-sub: #8b94a7; --shell-footer-fg: #8b94a7; --shell-search-bg: rgba(15, 23, 42, .045); --shell-search-bd: rgba(15, 23, 42, .09); --cp-canvas: #f6f7f9; --cp-brand: #4f46e5; --cp-brand-2: #6366f1; --cp-aurora: linear-gradient(100deg, #4f46e5 0%, #6366f1 52%, #818cf8 100%); --cp-ring: rgba(79, 70, 229, .18); --cp-tint: rgba(99, 102, 241, .06); } /* ── 极光紫 ── */ html[data-skin="aurora"] { --shell-bg: #241b3d; --shell-bg-soft: rgba(255, 255, 255, .06); --shell-group: #a89ec9; --shell-hair: rgba(255, 255, 255, .12); --shell-hair-strong: rgba(255, 255, 255, .22); --shell-nav-fg: #cfc6e9; --shell-nav-fg-hover: #ffffff; --shell-nav-bg-hover: rgba(255, 255, 255, .08); --shell-active-bg: rgba(167, 139, 250, .20); --shell-active-fg: #c4b5fd; --shell-brand-fg: #ffffff; --shell-brand-sub: #a89ec9; --shell-footer-fg: #a89ec9; --shell-search-bg: rgba(15, 23, 42, .045); --shell-search-bd: rgba(15, 23, 42, .09); --cp-canvas: #f9f7fd; --cp-brand: #7c3aed; --cp-brand-2: #8b5cf6; --cp-aurora: linear-gradient(100deg, #7c3aed 0%, #8b5cf6 52%, #a78bfa 100%); --cp-ring: rgba(124, 58, 237, .18); --cp-tint: rgba(139, 92, 246, .06); } /* ── 森林绿 ── */ html[data-skin="forest"] { --shell-bg: #0d2b22; --shell-bg-soft: rgba(255, 255, 255, .06); --shell-group: #7fae9d; --shell-hair: rgba(255, 255, 255, .12); --shell-hair-strong: rgba(255, 255, 255, .22); --shell-nav-fg: #c2ddd2; --shell-nav-fg-hover: #ffffff; --shell-nav-bg-hover: rgba(255, 255, 255, .08); --shell-active-bg: rgba(52, 211, 153, .18); --shell-active-fg: #6ee7b7; --shell-brand-fg: #ffffff; --shell-brand-sub: #7fae9d; --shell-footer-fg: #7fae9d; --shell-search-bg: rgba(15, 23, 42, .045); --shell-search-bd: rgba(15, 23, 42, .09); --cp-canvas: #f5faf7; --cp-brand: #047857; --cp-brand-2: #059669; --cp-aurora: linear-gradient(100deg, #047857 0%, #059669 52%, #34d399 100%); --cp-ring: rgba(4, 120, 87, .18); --cp-tint: rgba(5, 150, 105, .06); }