/**
 * 文件路径: /home/ubuntu/talktalk_backend/public/css/variables.css
 * 功能用途: CSS变量定义，可爱动物卡通动漫风格
 * 版本: v3.0
 * 最后修改: 2025-11-27 - 切换到可爱卡通主题
 */

/* ==================== CSS变量定义 ==================== */
:root {
    /* 卡通风格基础设置 */
    --border-radius-lg: 24px;
    --border-radius-md: 16px;
    --border-radius-sm: 12px;
    --border-radius-round: 50px;
    
    --border-width: 3px;
    --border-style: solid;
    
    --font-primary: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --font-heading: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    
    /* 白日模式 - 森林/草地/蓝天主题 */
    --bg-primary: #E0F7FA;      /* 浅蓝天空 */
    --bg-secondary: #FFFFFF;    /* 云朵白 */
    --bg-tertiary: #F1F8E9;     /* 浅绿 */
    --bg-sidebar: #FFF8E1;      /* 奶油色侧边栏 */
    
    --text-primary: #455A64;    /* 深蓝灰，比纯黑柔和 */
    --text-secondary: #78909C;
    --text-inverted: #FFFFFF;
    
    /* 糖果色系 */
    --primary-color: #FF8A65;   /* 珊瑚粉 */
    --primary-hover: #FF7043;
    --secondary-color: #4DD0E1; /* 青色 */
    --secondary-hover: #26C6DA;
    
    --accent-color: #FFD54F;    /* 暖黄 */
    --success-color: #81C784;   /* 柔和绿 */
    --danger-color: #E57373;    /* 柔和红 */
    --warning-color: #FFF176;   /* 柔和黄 */
    --info-color: #64B5F6;      /* 柔和蓝 */
    
    --border-color: #B0BEC5;    /* 边框色 */
    
    /* 卡通阴影：较深色，偏硬 */
    --shadow-color: rgba(69, 90, 100, 0.15);
    --card-shadow: 0 8px 0 var(--shadow-color);
    --btn-shadow: 0 4px 0 rgba(0,0,0,0.1);
    --btn-active-transform: translateY(4px);
    --btn-active-shadow: none;
    
    /* 布局尺寸 */
    --sidebar-width: 280px;
    --header-height: 80px;
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    
    /* 滚动条 */
    --scrollbar-width: 12px;
    --scrollbar-thumb: #FFCCBC;
    --scrollbar-track: transparent;
    
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 弹性动画 */
    
    /* 建议框和反馈框浅色模式变量 */
    --suggestion-bg: rgba(25, 118, 210, 0.08);
    --suggestion-border: rgba(25, 118, 210, 0.2);
    --feedback-bg: rgba(56, 142, 60, 0.08);
    --feedback-border: rgba(56, 142, 60, 0.2);
    --card-bg: #FFFFFF;
    --hover-bg: rgba(25, 118, 210, 0.05);
    --text-muted: #78909C;
    
    /* 词汇和语法提示浅色模式变量 */
    --vocabulary-bg: rgba(156, 39, 176, 0.06);
    --vocabulary-color: #9C27B0;
    --grammar-bg: rgba(0, 150, 136, 0.06);
    --grammar-color: #009688;
}
    
/* 黑夜模式 - 星空/梦境主题 */
[data-theme="dark"] {
    --bg-primary: #263238;      /* 深蓝夜空 */
    --bg-secondary: #37474F;    /* 深色卡片 */
    --bg-tertiary: #455A64;
    --bg-sidebar: #2d3d46;
    
    --text-primary: #ECEFF1;
    --text-secondary: #B0BEC5;
    --text-inverted: #263238;
    
    --primary-color: #FFAB91;   /* 亮珊瑚 */
    --primary-hover: #FF8A65;
    
    --secondary-color: #80DEEA;
    --secondary-hover: #4DD0E1;
    
    --accent-color: #FFD54F;
    
    --border-color: #546E7A;
    
    --shadow-color: rgba(0, 0, 0, 0.3);
    
    --scrollbar-thumb: #546E7A;
    --scrollbar-track: transparent;
    
    /* 建议框和反馈框暗色模式变量 */
    --suggestion-bg: rgba(100, 181, 246, 0.12);
    --suggestion-border: rgba(100, 181, 246, 0.25);
    --feedback-bg: rgba(129, 199, 132, 0.12);
    --feedback-border: rgba(129, 199, 132, 0.25);
    --card-bg: #37474F;
    --hover-bg: rgba(100, 181, 246, 0.15);
    --text-muted: #90A4AE;
    
    /* 词汇和语法提示暗色模式变量 */
    --vocabulary-bg: rgba(206, 147, 216, 0.12);
    --vocabulary-color: #CE93D8;
    --grammar-bg: rgba(128, 203, 196, 0.12);
    --grammar-color: #80CBC4;
}