/**
 * Word Core - 全局颜色变量系统
 * 
 * 使用方式：
 * - 在其他CSS文件中使用: background: var(--color-primary);
 * - 在JavaScript中修改: document.documentElement.style.setProperty('--color-primary', '#FF0000');
 * 
 * 优势：
 * - 一键修改全局颜色
 * - 统一的颜色管理
 * - 更好的可维护性
 * - 支持主题切换
 */

:root {
    /* ==================== 主色调 ==================== */
    --color-primary: #EBB1C3;
    --color-primary-light: #F9B6D0;
    --color-primary-dark: #D89FAF;
    --color-primary-hover: #F5C4D4;
    
    /* ==================== 背景颜色 - 粉色主题 ==================== */
    --bg-pink-light: #FFF4F6;
    --bg-pink-main: #FFF4F6;
    --bg-pink-dark: #1a1a1a;
    --bg-pink-frame: #FFF4F6;
    --bg-pink-frame-dark: #2a2a2a;
    
    /* ==================== 背景颜色 - 绿色主题 ==================== */
    --bg-green-light: #F0FFF4;
    --bg-green-main: #F0FFF4;
    --bg-green-dark: #1a2a1a;
    --bg-green-frame: #F0FFF4;
    --bg-green-frame-dark: #2a3a2a;
    
    /* ==================== 背景颜色 - 灰色主题 ==================== */
    --bg-gray-light: #f6f6f6;
    --bg-gray-main: #f6f6f6;
    --bg-gray-dark: #1a1a1a;
    --bg-gray-frame: #f6f6f6;
    --bg-gray-frame-dark: #2a2a2a;
    
    /* ==================== 文字颜色 ==================== */
    --text-primary: #474747;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-light: #CCCCCC;
    --text-white: #FFFFFF;
    --text-black: #000000;
    
    /* ==================== 夜间模式文字颜色 ==================== */
    --text-dark-primary: #E0E0E0;
    --text-dark-secondary: #B0B0B0;
    --text-dark-tertiary: #808080;
    
    /* ==================== 状态颜色 ==================== */
    --color-success: #4CAF50;
    --color-warning: #FF9800;
    --color-error: #F44336;
    --color-info: #2196F3;
    
    /* ==================== 边框颜色 ==================== */
    --border-light: rgba(235, 177, 195, 0.15);
    --border-medium: rgba(235, 177, 195, 0.3);
    --border-dark: rgba(235, 177, 195, 0.5);
    
    /* ==================== 阴影 ==================== */
    --shadow-sm: 0 2px 8px rgba(235, 177, 195, 0.15);
    --shadow-md: 0 4px 16px rgba(235, 177, 195, 0.2);
    --shadow-lg: 0 8px 32px rgba(235, 177, 195, 0.3);
    --shadow-xl: 0 12px 48px rgba(235, 177, 195, 0.4);
    
    /* ==================== 卡片背景 ==================== */
    --card-bg-light: #FFFFFF;
    --card-bg-dark: #2a2a2a;
    --card-bg-hover: #F8F8F8;
    
    /* ==================== 按钮颜色 ==================== */
    --btn-primary-bg: linear-gradient(135deg, #EBB1C3 0%, #F9B6D0 100%);
    --btn-primary-hover: linear-gradient(135deg, #F5C4D4 0%, #FCC4DD 100%);
    --btn-secondary-bg: rgba(235, 177, 195, 0.1);
    --btn-secondary-hover: rgba(235, 177, 195, 0.2);
    
    /* ==================== 输入框颜色 ==================== */
    --input-bg: #FFFFFF;
    --input-border: rgba(235, 177, 195, 0.3);
    --input-focus: rgba(235, 177, 195, 0.5);
    --input-dark-bg: #333333;
    --input-dark-border: rgba(235, 177, 195, 0.2);
    
    /* ==================== 页面背景颜色（统一）==================== */
    /* 默认使用粉色主题，可通过body.bg-pink/bg-green/bg-gray切换 */
    --page-bg-light: var(--bg-pink-main);        /* 日间模式页面背景 */
    --page-bg-dark: var(--bg-pink-dark);         /* 夜间模式页面背景 */
    
    /* ==================== 导航栏颜色（与页面背景保持一致）==================== */
    --nav-bg-light: var(--page-bg-light);        /* 导航栏背景=页面背景 */
    --nav-bg-dark: var(--page-bg-dark);          /* 导航栏背景=页面背景 */
    --nav-icon-color: #474747;
    --nav-icon-hover: #EBB1C3;
    
    /* ==================== 遮罩颜色 ==================== */
    --mask-overlay: rgba(0, 0, 0, 0.5);
    --mask-light: rgba(255, 255, 255, 0.9);
    
    /* ==================== 过渡动画 ==================== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ==================== 圆角 ==================== */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 50%;
    
    /* ==================== 间距 ==================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* ==================== 字体大小 ==================== */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 24px;
    --font-2xl: 32px;
    --font-3xl: 48px;
    --font-4xl: 64px;
    
    /* ==================== Z-index 层级 ==================== */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 50;
    --z-fixed: 100;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-tooltip: 3000;
}

/* ==================== 夜间模式颜色覆盖 ==================== */
body.dark-mode {
    --text-primary: var(--text-dark-primary);
    --text-secondary: var(--text-dark-secondary);
    --text-tertiary: var(--text-dark-tertiary);
    
    --card-bg-light: var(--card-bg-dark);
    
    /* ⭐ 夜间模式：页面和导航栏都使用深色背景 */
    --page-bg-light: var(--page-bg-dark);
    --nav-bg-light: var(--page-bg-dark);
    --nav-icon-color: #E0E0E0;
    
    --input-bg: var(--input-dark-bg);
    --input-border: var(--input-dark-border);
    
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-dark: rgba(255, 255, 255, 0.3);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);
}

/* ==================== 背景主题切换类 ==================== */
/* 粉色主题（默认） */
body.bg-pink {
    --page-bg-light: var(--bg-pink-main);
    --page-bg-dark: var(--bg-pink-dark);
    --nav-bg-light: var(--bg-pink-main);
    --nav-bg-dark: var(--bg-pink-dark);
}

/* 绿色主题 */
body.bg-green {
    --page-bg-light: var(--bg-green-main);
    --page-bg-dark: var(--bg-green-dark);
    --nav-bg-light: var(--bg-green-main);
    --nav-bg-dark: var(--bg-green-dark);
}

/* 灰色主题 */
body.bg-gray {
    --page-bg-light: var(--bg-gray-main);
    --page-bg-dark: var(--bg-gray-dark);
    --nav-bg-light: var(--bg-gray-main);
    --nav-bg-dark: var(--bg-gray-dark);
}

/* ==================== 使用示例 ==================== */
/*
.example-card {
    background: var(--card-bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.example-button {
    background: var(--btn-primary-bg);
    color: var(--text-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-md);
}

.example-button:hover {
    background: var(--btn-primary-hover);
}
*/