/* ======================================================
   WxMark — 微信排版主题 CSS 变量
   用于编辑器预览区的主题色指示，
   实际微信渲染使用 JS 内联样式（见 themes.js）
   ====================================================== */

/* ---------- Theme Swatches（工具栏主题按钮背景色） ---------- */
.theme-btn[data-theme="default"] {
    background: linear-gradient(135deg, #4a90d9, #667eea);
}

.theme-btn[data-theme="green"] {
    background: linear-gradient(135deg, #34d399, #059669);
}

.theme-btn[data-theme="pink"] {
    background: linear-gradient(135deg, #f472b6, #db2777);
}

.theme-btn[data-theme="purple"] {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.theme-btn[data-theme="orange"] {
    background: linear-gradient(135deg, #fb923c, #ea580c);
}

.theme-btn[data-theme="brown"] {
    background: linear-gradient(135deg, #a8896c, #78604c);
}

.theme-btn[data-theme="custom"] {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    position: relative;
}

.theme-btn[data-theme="custom"]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, #6366f1, #06b6d4, #6366f1);
    background-size: 200% 200%;
    animation: studio-glow 3s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-btn[data-theme="custom"]:hover::before,
.theme-btn[data-theme="custom"].active::before {
    opacity: 1;
}

@keyframes studio-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}