/* CSS Variables - Harmonious Color System */

:root {
    /* Brand Colors - Teal系清新配色 */
    --color-brand: #14b8a6;
    /* Teal 500 - 主品牌色 */
    --color-brand-light: #5eead4;
    /* Teal 300 - 浅色变体 */
    --color-brand-dark: #0f766e;
    /* Teal 700 - 深色变体 */
    --color-brand-subtle: #ccfbf1;
    /* Teal 100 - 微妙背景 */

    /* Text Colors - 优化文字层次 */
    --color-primary: #1f2937;
    /* Gray 800 - 主要文字 */
    --color-secondary: #6b7280;
    /* Gray 500 - 次要文字 */
    --color-tertiary: #9ca3af;
    /* Gray 400 - 辅助文字 */

    /* Background Colors - 和谐背景层次 */
    --bg-primary: #fafaf9;
    /* Stone 50 - 页面背景 */
    --bg-secondary: #ffffff;
    /* 纯白 - 卡片背景 */
    --bg-card: rgba(255, 255, 255, 0.95);
    /* 卡片背景（带透明） */
    --bg-glass: rgba(255, 255, 255, 0.7);
    /* 玻璃态背景 */
    --bg-elevated: #f8fafc;
    /* Slate 50 - 凸起元素 */

    /* Code Block Colors - 浅色主题 */
    --code-bg: #f8fafc;
    /* Slate 50 - 代码块背景 */
    --code-text: #475569;
    /* Slate 600 - 代码文字 */
    --code-inline-bg: #e0f2fe;
    /* Sky 100 - 行内代码背景 */
    --code-inline-text: #0c4a6e;
    /* Sky 900 - 行内代码文字 */
    --code-border: #e2e8f0;
    /* Slate 200 - 代码边框 */
    --code-comment: #94a3b8;
    /* Slate 400 - 注释颜色 */

    /* Border & Shadow - 柔和边框和阴影 */
    --border-color: #e5e7eb;
    /* Gray 200 */
    --border-light: #f3f4f6;
    /* Gray 100 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* Dark Mode Overrides */
[data-theme='dark'] {
    /* Brand Colors - Adjust for dark mode visibility */
    --color-brand: #5eead4;
    /* Teal 300 - softer */
    --color-brand-dark: #2dd4bf;
    /* Teal 400 */
    --color-brand-subtle: #134e4a;
    /* Teal 900 */

    /* Text Colors */
    --color-primary: #e2e8f0;
    /* Slate 200 */
    --color-secondary: #cbd5e1;
    /* Slate 300 */
    --color-tertiary: #94a3b8;
    /* Slate 400 */

    /* Background Colors */
    --bg-primary: #0f172a;
    /* Slate 900 */
    --bg-secondary: #1e293b;
    /* Slate 800 */
    --bg-card: rgba(30, 41, 59, 0.5);
    --bg-glass: rgba(30, 41, 59, 0.4);
    --bg-elevated: #334155;
    /* Slate 700 */

    /* Code Block Colors - Dark Theme */
    --code-bg: #1e293b;
    /* Slate 800 */
    --code-text: #e2e8f0;
    /* Slate 200 */
    --code-inline-bg: rgba(148, 163, 184, 0.15);
    --code-inline-text: #5eead4;
    /* Teal 300 */
    --code-border: #334155;
    /* Slate 700 */
    --code-comment: #64748b;
    /* Slate 500 */

    /* Border & Shadow */
    --border-color: rgba(148, 163, 184, 0.2);
    --border-light: rgba(148, 163, 184, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
}