/*
╔══════════════════════════════════════════════════════════╗
║  base.css - 全局基础样式                                 ║
║                                                          ║
║  📌 这个文件做什么？                                      ║
║     定义所有颜色、字体、圆角、间距等"设计变量"              ║
║     就像装修房子前先定好"用什么颜色的油漆、什么材质的地板"   ║
║                                                          ║
║  📌 如何修改主题色？                                      ║
║     找到下面 --primary 那一行，改成你想要的颜色即可         ║
║     例如改成蓝色：--primary: #3B82F6;                     ║
║                                                          ║
║  📌 被谁使用？                                            ║
║     所有其他CSS文件都会用到这里定义的变量                    ║
║     例如写 color: var(--primary) 就会自动变成这里定义的橙色  ║
╚══════════════════════════════════════════════════════════╝
*/

/* --- 全局重置：清除浏览器自带的间距和边框计算方式 --- */
* {
    margin: 0;           /* 清除所有元素的外边距 */
    padding: 0;          /* 清除所有元素的内边距 */
    box-sizing: border-box; /* 让宽高计算包含边框，避免布局错乱 */
}

/* --- CSS变量（全局设计令牌）---
     用 var(--变量名) 就能在任何地方引用这些值
     修改这里 = 全站一起变 */
:root {
    /* === 品牌主色（椒麦橙） === */
    --primary: #FF6B35;            /* 主色：橙色（按钮、高亮、品牌色） */
    --primary-dark: #E85A28;       /* 主色加深版（鼠标悬停时用） */
    --primary-light: #FF8A5C;      /* 主色浅版 */
    --primary-glow: rgba(255,107,53,0.12); /* 主色发光效果（半透明背景） */

    /* === 功能色（表达状态的颜色） === */
    --success: #10B981;            /* 成功/充足 = 绿色 */
    --success-glow: rgba(16,185,129,0.12);
    --warning: #F59E0B;            /* 警告 = 黄色 */
    --danger: #EF4444;             /* 危险/缺货 = 红色 */
    --danger-glow: rgba(239,68,68,0.1);
    --info: #3B82F6;               /* 信息 = 蓝色 */
    --gold: #F59E0B;               /* 金色（营业额等） */

    /* === 背景色（深色主题） === */
    --bg: #0B0D13;                 /* 页面最底层背景（最深） */
    --bg-card: #151821;            /* 卡片背景 */
    --bg-card-hover: #1C1F2A;      /* 卡片悬停时背景 */
    --bg-elevated: #1F222D;        /* 抬升区域（比卡片稍亮） */
    --bg-input: #12141B;           /* 输入框背景 */

    /* === 边框色 === */
    --border: rgba(255,255,255,0.05);       /* 普通边框（很淡） */
    --border-light: rgba(255,255,255,0.08); /* 稍明显的边框 */
    --border-active: rgba(255,255,255,0.15);/* 激活状态边框 */

    /* === 文字色 === */
    --text-primary: #ECEEF2;       /* 主要文字（最亮） */
    --text-secondary: #858AA0;     /* 次要文字（灰色） */
    --text-muted: #4E5264;         /* 最淡的文字 */

    /* === 圆角大小 === */
    --radius-sm: 8px;              /* 小圆角（按钮等） */
    --radius-md: 12px;             /* 中圆角（卡片等） */
    --radius-lg: 18px;             /* 大圆角（大卡片等） */
    --radius-xl: 24px;             /* 超大圆角（弹窗等） */

    /* === 固定高度 === */
    --top-bar-height: 60px;        /* 顶部栏高度 */
    --bottom-nav-height: 68px;     /* 底部导航栏高度 */
    --sidebar-width: 232px;        /* 侧边栏宽度（仅电脑端） */
}

/* --- 全局字体和颜色 --- */
body {
    /* 字体优先级：DM Sans（英文数字）→ Noto Sans SC（中文）→ 系统默认 */
    font-family: 'DM Sans', 'Noto Sans SC', -apple-system, sans-serif;
    background: var(--bg);           /* 使用最深的背景色 */
    color: var(--text-primary);      /* 默认文字颜色 */
    font-size: 15px;                 /* 默认字号 */
    line-height: 1.5;                /* 行高（1.5倍字号） */
    -webkit-font-smoothing: antialiased; /* 让文字在Mac上更清晰 */
    overflow-x: hidden;              /* 禁止横向滚动 */
}

/* --- 通用动画 --- */
@keyframes pageIn {
    /* 页面切换时的淡入+上移动画 */
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    /* 小圆点闪烁动画（用于预警提示） */
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes bounce {
    /* 录音声波跳动动画 */
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(2); }
}

@keyframes slideUp {
    /* 弹窗从底部滑入 */
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes modalIn {
    /* 弹窗缩放淡入 */
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes recPulse {
    /* 录音按钮脉冲光晕 */
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}