/* === NOVAI Design Token System (marvis-shared.css) === */
/* 单一真实来源：所有颜色、字体、阴影、圆角、动效的语义化变量 */

:root {
    /* ── 字体 ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* ── 背景层 ── */
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --elevated: #ffffff;
    --overlay: rgba(255, 255, 255, 0.72);
    --canvas-bg: #f5f5f7;
    --panel-bg: rgba(255, 255, 255, 0.92);
    --sidebar-bg: rgba(245, 245, 247, 0.72);
    --stage-bg: #ffffff;

    /* ── 文字层 ── */
    --text: #1d1d1f;
    --text-2: #6e6e73;
    --text-3: #86868b;
    --text-on-accent: #ffffff;
    --accent: #1d1d1f;
    --accent-hover: #000000;
    --accent-text: #ffffff;

    /* ── 语义色 ── */
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --danger-text: #991b1b;
    --success: #10b981;
    --success-bg: #ecfdf5;
    --success-border: #a7f3d0;
    --success-text: #065f46;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;
    --warning-text: #92400e;
    --info: #3b82f6;
    --info-bg: #eff6ff;
    --info-border: #bfdbfe;
    --info-text: #1e40af;

    /* ── 边框 ── */
    --border: rgba(0, 0, 0, 0.06);
    --border-2: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.20);
    --nav-hover-bg: rgba(0, 0, 0, 0.04);
    --divider: rgba(0, 0, 0, 0.06);
    --scrollbar: rgba(0, 0, 0, 0.12);

    /* ── 阴影 ── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.10);
    /* 原始阴影色（用于自定义 box-shadow 组合） */
    --shadow-color: rgba(0,0,0,0.06);
    --shadow-color-lg: rgba(0,0,0,0.10);

    /* ── 网格点 ── */
    --grid-color: #c8c8c8;

    /* ── 圆角 ── */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* ── 动效 ── */
    --fluid-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --fast-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 暗色模式：只需重定义变量值 ── */
html.theme-dark,
html.studio-theme-dark,
body.theme-dark,
body.studio-theme-dark {
    /* 背景层 */
    --bg: #0d0d0d;
    --surface: #141414;
    --surface-2: #1a1a1a;
    --elevated: #1c1c1c;
    --overlay: rgba(13, 13, 13, 0.78);
    --canvas-bg: #0d0d0d;
    --panel-bg: rgba(20, 20, 20, 0.92);
    --sidebar-bg: rgba(13, 13, 13, 0.78);
    --stage-bg: #161616;

    /* 文字层 */
    --text: #f5f5f7;
    --text-2: #a5a5a5;
    --text-3: #808080;
    --text-on-accent: #0d0d0d;
    --accent: #dcdcdc;
    --accent-hover: #f5f5f5;
    --accent-text: #0d0d0d;

    /* 语义色（暗色微调） */
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.12);
    --danger-border: rgba(239, 68, 68, 0.30);
    --danger-text: #fca5a5;
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --success-border: rgba(52, 211, 153, 0.30);
    --success-text: #6ee7b7;
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --warning-border: rgba(251, 191, 36, 0.30);
    --warning-text: #fcd34d;
    --info: #60a5fa;
    --info-bg: rgba(96, 165, 250, 0.12);
    --info-border: rgba(96, 165, 250, 0.30);
    --info-text: #93c5fd;

    /* 边框 */
    --border: rgba(255, 255, 255, 0.06);
    --border-2: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.20);
    --nav-hover-bg: rgba(255, 255, 255, 0.06);
    --divider: rgba(255, 255, 255, 0.06);
    --scrollbar: rgba(255, 255, 255, 0.16);

    /* 阴影（暗色更深） */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.18);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.28);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.34);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.42);
    --shadow-color: rgba(0,0,0,0.28);
    --shadow-color-lg: rgba(0,0,0,0.42);

    /* 网格点 */
    --grid-color: rgba(120,120,120,0.16);
}

/* ── 滚动条 ── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
}

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── 基础排版 ── */
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg);
    color: var(--text);
}

/* ── 等宽文本工具类 ── */
.mono, code, pre, kbd, samp {
    font-family: var(--font-mono);
}

/* ── 极简悬浮浅灰滚动条 ── */
*::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
}
*::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
}
*::-webkit-scrollbar-thumb {
    background-color: #d8d8d8 !important;
    border: 3px solid transparent !important;
    border-right-width: 5px !important;
    background-clip: padding-box !important;
    border-radius: 10px !important;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: #c0c0c0 !important;
}
*::-webkit-scrollbar-corner {
    background: transparent !important;
}
* {
    scrollbar-width: thin !important;
    scrollbar-color: #d8d8d8 transparent !important;
}

/* settings-embed — 嵌入 iframe 时隐藏滚动条 */
html.settings-embed, html.settings-embed * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
html.settings-embed::-webkit-scrollbar,
html.settings-embed *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* ═══════════════════════════════════════════
   NOVAI 交互增强动画工具类（追加）
   ═══════════════════════════════════════════ */

/* ── 按钮 ripple 点击波纹效果 ── */
.btn-ripple {
    position: relative;
    overflow: hidden;
}
.btn-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
                rgba(255, 255, 255, 0.3) 0%,
                transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
}
.btn-ripple:active::after {
    opacity: 1;
    transition: opacity 0s;
}

/* ── 卡片 hover 上浮 + 阴影增强 ── */
.card-hover-float {
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card-hover-float:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated, 0 20px 40px rgba(0,0,0,0.08));
}

/* ── Switch 开关弹簧动画 ── */
.switch-spring {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.switch-spring:active {
    transform: scale(0.92);
}
/* iOS-style switch knob spring */
.ios-switch input:checked + .ios-slider:before {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ios-switch .ios-slider:before {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}