/* ================================================================
   千辞 AI 对话设计平台 - 主题基础变量
   ================================================================
   说明：
   - 本文件存放所有主题通用的基础变量（字体、圆角、间距、语义色）
   - 主题专属颜色定义在各独立 CSS 文件中（css/themes/*.css）
   - 系统启动时由 JS 动态加载对应主题的 CSS 文件
   ================================================================ */

/* ===== 共享基础变量（所有主题通用） ===== */
:root {
    /* 字体 */
    --font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* 圆角 */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;

    /* 间距 */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* 过渡 */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* 语义色（所有主题通用，可被主题覆盖） */
    --color-success: #16a34a;
    --color-success-lighter: rgba(22, 163, 74, 0.12);
    --color-warning: #ca8a04;
    --color-warning-lighter: rgba(202, 138, 4, 0.12);
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-lighter: rgba(220, 38, 38, 0.1);
    --color-info: #3b82f6;
    --color-info-lighter: rgba(59, 130, 246, 0.12);
}

/* ===== 按钮图标颜色继承按钮文字颜色 ===== */
/* 导入主题时，图标不再使用独立的 --color-primary/--color-accent，
   而是跟随按钮文字色，使导入的主题视觉更协调 */
html[data-theme] button i.fa { color: inherit !important; }

/* ===== Tailwind 品牌色映射（确保导入主题也生效） ===== */
/* 让 --tw-klein-blue 和 --tw-hermes-orange 跟随语义色变量。
   这样导入 CherryStudio 主题后，项目中所有 text-klein-blue、bg-klein-blue、
   dark:text-hermes-orange 等 Tailwind 类会自动使用导入主题的颜色，
   无需逐一修改 HTML/JS。 */
:root {
    --tw-klein-blue: var(--color-primary);
    --tw-klein-light: var(--color-primary-light);
    --tw-hermes-orange: var(--color-accent);
    --tw-hermes-light: var(--color-accent-light);
}
.dark {
    --tw-klein-blue: var(--color-primary);
    --tw-klein-light: var(--color-primary-light);
    --tw-hermes-orange: var(--color-accent);
    --tw-hermes-light: var(--color-accent-light);
}