/**
 * 星钻辅学平台 - 设计令牌 (Design Tokens)
 * 现代教育平台 + 轻专业 SaaS 风格
 * 简洁、专业、可信、清晰、温和、不花哨、不廉价
 */

:root {
    /* === 品牌色 === */
    --color-primary: #4F6EF7;          /* 主色：偏蓝紫，降低饱和度，不刺眼 */
    --color-primary-hover: #3D5BD9;
    --color-primary-soft: #EEF1FE;     /* 主色浅底，用于背景高亮 */
    --color-primary-rgb: 79, 110, 247;
    
    --color-accent: #7C5CFC;           /* 强调色：紫色，仅用于钻石等级等少量场景 */
    --color-accent-soft: #F3EFFE;
    
    /* === 功能色 === */
    --color-success: #22C55E;
    --color-success-soft: #F0FDF4;
    --color-warning: #F59E0B;
    --color-warning-soft: #FFFBEB;
    --color-danger: #EF4444;
    --color-danger-soft: #FEF2F2;
    --color-info: #3B82F6;
    --color-info-soft: #EFF6FF;
    
    /* === 钻石等级色（保留） === */
    --color-diamond-1: #9CA3AF;
    --color-diamond-2: #60A5FA;
    --color-diamond-3: #34D399;
    --color-diamond-4: #FBBF24;
    --color-diamond-5: #8B5CF6;
    
    /* === 文字色 === */
    --color-text: #1F2937;             /* 主文字：深灰，不是纯黑 */
    --color-text-secondary: #6B7280;   /* 次要文字 */
    --color-text-tertiary: #9CA3AF;    /* 辅助文字 */
    --color-text-quaternary: #D1D5DB;  /* 极弱文字/占位符 */
    
    /* === 背景色 === */
    --color-bg: #F8F9FB;               /* 页面背景：浅灰白，不是纯灰蓝 */
    --color-bg-elevated: #FFFFFF;      /* 卡片/面板背景 */
    --color-bg-hover: #F3F4F6;         /* hover 背景 */
    --color-bg-active: #E5E7EB;        /* active 背景 */
    
    /* === 边框色 === */
    --color-border: #E5E7EB;           /* 默认边框 */
    --color-border-light: #F3F4F6;     /* 轻边框 */
    --color-divider: #F3F4F6;          /* 分割线 */
    
    /* === 字体层级 === */
    --font-size-page-title: 20px;      /* 页面标题 */
    --font-size-section-title: 16px;   /* 模块标题 */
    --font-size-card-title: 15px;      /* 卡片标题 */
    --font-size-body: 14px;            /* 正文 */
    --font-size-caption: 13px;         /* 辅助信息 */
    --font-size-small: 12px;           /* 小字/标签 */
    
    --font-weight-bold: 600;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    
    --line-height-tight: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    
    /* === 间距系统（8px 基准） === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    
    /* === 圆角 === */
    --radius-sm: 6px;                  /* 小元素：badge、小按钮 */
    --radius-md: 10px;                 /* 中元素：卡片、输入框 */
    --radius-lg: 14px;                 /* 大元素：模态框、面板 */
    --radius-xl: 20px;                 /* 特大：banner */
    --radius-full: 9999px;             /* 圆形：头像、pill */
    
    /* === 阴影 === */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);                          /* 轻阴影：卡片 */
    --shadow-md: 0 2px 8px rgba(0,0,0,0.06);                          /* 中阴影：浮起卡片 */
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);                         /* 大阴影：弹窗 */
    --shadow-border: 0 0 0 1px rgba(0,0,0,0.05);                      /* 边框阴影 */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03); /* 卡片综合阴影 */
    
    /* === 过渡 === */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    
    /* === 布局常量 === */
    --header-height: 56px;
    --tabbar-height: 60px;
    --sidebar-width: 240px;
    --mobile-max-width: 430px;
    --max-content-width: 1200px;
    
    /* === 层叠顺序 === */
    --z-sticky: 100;
    --z-modal: 1050;
    --z-toast: 1090;
    
    /* === Bootstrap 变量覆盖 === */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-success: var(--color-success);
    --bs-warning: var(--color-warning);
    --bs-danger: var(--color-danger);
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);
    
    /* === 兼容旧变量（向后兼容） === */
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-tertiary);
    --text-quaternary: var(--color-text-quaternary);
    --text-link: var(--color-primary);
    --bg-page: var(--color-bg);
    --bg-card: var(--color-bg-elevated);
    --bg-header: var(--color-bg-elevated);
    --bg-sidebar: var(--color-bg-elevated);
    --border-light: var(--color-border);
    --border-medium: #D1D5DB;
    --border-dark: var(--color-text-tertiary);
    --color-primary-light: #7B8DF8;
    --color-primary-dark: var(--color-primary-hover);
    --color-primary-50: var(--color-primary-soft);
    --color-primary-100: #DEE4FD;
    --color-accent-light: #A78BFA;
    --color-accent-dark: #6D28D9;
    --color-success-light: #BBF7D0;
    --color-warning-light: #FDE68A;
    --color-danger-light: #FECACA;
    --color-info-light: #BFDBFE;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    --color-white: #FFFFFF;
}