/**
 * ============================================
 * 🎨 知芽小筑 - 企业级设计令牌系统
 * ============================================
 * 参考：小红书、Instagram、微信、Twitter
 * 版本：v3.0.0
 * 更新：2025-10-14
 */

/* ==================== 🌈 颜色系统 ==================== */

page {
  /* ---------- 品牌主色 - 活力渐变系统 ---------- */
  --brand-primary: #667EEA;
  --brand-secondary: #764BA2;
  --brand-accent: #FF6B9D;
  
  /* 主渐变色组 - 用于不同场景 */
  --gradient-purple-dream: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  --gradient-ocean-blue: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
  --gradient-fresh-green: linear-gradient(135deg, #43E97B 0%, #38F9D7 100%);
  --gradient-sunset-pink: linear-gradient(135deg, #FA709A 0%, #FEE140 100%);
  --gradient-midnight-city: linear-gradient(135deg, #30CFD0 0%, #330867 100%);
  --gradient-aurora: linear-gradient(135deg, #FA8BFF 0%, #2BD2FF 50%, #2BFF88 100%);
  
  /* 场景专用渐变 */
  --gradient-home: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  --gradient-course: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
  --gradient-forum: linear-gradient(135deg, #FA8BFF 0%, #2BD2FF 90%, #2BFF88 100%);
  --gradient-tools: linear-gradient(135deg, #FCCF31 0%, #F55555 100%);
  --gradient-profile: linear-gradient(135deg, #A8EDEA 0%, #FED6E3 100%);
  
  /* ---------- 语义化颜色 ---------- */
  --color-success: #52C41A;
  --color-success-light: #95DE64;
  --color-success-bg: #F6FFED;
  --color-success-border: #B7EB8F;
  
  --color-warning: #FAAD14;
  --color-warning-light: #FFC53D;
  --color-warning-bg: #FFFBE6;
  --color-warning-border: #FFE58F;
  
  --color-error: #FF4D4F;
  --color-error-light: #FF7875;
  --color-error-bg: #FFF1F0;
  --color-error-border: #FFCCC7;
  
  --color-info: #1890FF;
  --color-info-light: #69C0FF;
  --color-info-bg: #E6F7FF;
  --color-info-border: #91D5FF;
  
  /* ---------- 中性色 - 文字系统 ---------- */
  --text-primary: #1A1A1A;         /* 主要文字 - 标题 */
  --text-secondary: #595959;       /* 次要文字 - 正文 */
  --text-tertiary: #8C8C8C;        /* 三级文字 - 辅助信息 */
  --text-quaternary: #BFBFBF;      /* 四级文字 - 占位符 */
  --text-disabled: #D9D9D9;        /* 禁用文字 */
  --text-inverse: #FFFFFF;         /* 反色文字 - 深色背景上 */
  --text-link: #4A90E2;            /* 链接文字 */
  --text-link-hover: #357ABD;      /* 链接悬停 */
  
  /* ---------- 背景色系统 ---------- */
  --bg-page: #F5F7FA;              /* 页面背景 */
  --bg-primary: #FFFFFF;           /* 主要背景 - 卡片 */
  --bg-secondary: #FAFAFA;         /* 次要背景 */
  --bg-tertiary: #F0F2F5;          /* 三级背景 */
  --bg-hover: #F5F5F5;             /* 悬停背景 */
  --bg-active: #E8E8E8;            /* 激活背景 */
  --bg-disabled: #F5F5F5;          /* 禁用背景 */
  --bg-mask: rgba(0, 0, 0, 0.6);   /* 遮罩层 */
  
  /* ---------- 毛玻璃效果（Glassmorphism）---------- */
  --glass-white: rgba(255, 255, 255, 0.7);
  --glass-white-light: rgba(255, 255, 255, 0.5);
  --glass-white-strong: rgba(255, 255, 255, 0.9);
  --glass-black: rgba(0, 0, 0, 0.5);
  --glass-black-light: rgba(0, 0, 0, 0.3);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8rpx 32rpx 0 rgba(31, 38, 135, 0.37);
  
  /* ---------- 边框色系统 ---------- */
  --border-base: #E5E5E5;
  --border-light: #F0F0F0;
  --border-lighter: #FAFAFA;
  --border-dark: #D9D9D9;
  --border-darker: #BFBFBF;
  --divider: #F0F0F0;
  
  /* ==================== 📝 字体系统 ==================== */
  
  /* ---------- 字体家族 ---------- */
  --font-family-base: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 
                      'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 
                      'Segoe UI', Arial, sans-serif;
  --font-family-display: 'DIN Alternate Bold', -apple-system-font, 'SF Pro Display', 
                         'Helvetica Neue', sans-serif;
  --font-family-mono: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
  
  /* ---------- 字号系统（14级） ---------- */
  --font-size-2xs: 18rpx;          /* 极小 - 法律文本 */
  --font-size-xs: 22rpx;           /* 很小 - 辅助信息 */
  --font-size-sm: 26rpx;           /* 小 - 次要文本 */
  --font-size-base: 30rpx;         /* 基础 - 正文 */
  --font-size-md: 32rpx;           /* 中等 */
  --font-size-lg: 36rpx;           /* 大 - 小标题 */
  --font-size-xl: 40rpx;           /* 超大 - 标题 */
  --font-size-2xl: 48rpx;          /* 2倍大 - 大标题 */
  --font-size-3xl: 56rpx;          /* 3倍大 - 页面标题 */
  --font-size-4xl: 64rpx;          /* 4倍大 - 特大标题 */
  --font-size-5xl: 72rpx;          /* 5倍大 - Hero标题 */
  --font-size-6xl: 96rpx;          /* 6倍大 - 展示标题 */
  --font-size-7xl: 128rpx;         /* 7倍大 - 超级展示 */
  --font-size-8xl: 160rpx;         /* 8倍大 - 巨型标题 */
  
  /* ---------- 字重系统 ---------- */
  --font-weight-thin: 100;         /* 极细 */
  --font-weight-extralight: 200;   /* 超细 */
  --font-weight-light: 300;        /* 细 */
  --font-weight-regular: 400;      /* 常规 */
  --font-weight-medium: 500;       /* 中等 */
  --font-weight-semibold: 600;     /* 半粗 */
  --font-weight-bold: 700;         /* 粗 */
  --font-weight-extrabold: 800;    /* 超粗 */
  --font-weight-black: 900;        /* 最粗 */
  
  /* ---------- 行高系统 ---------- */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* ---------- 字间距 ---------- */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* ==================== 📏 间距系统 ==================== */
  
  /* 基于4rpx的精细间距系统 */
  --space-0: 0rpx;
  --space-1: 4rpx;
  --space-2: 8rpx;
  --space-3: 12rpx;
  --space-4: 16rpx;
  --space-5: 20rpx;
  --space-6: 24rpx;
  --space-7: 28rpx;
  --space-8: 32rpx;
  --space-9: 36rpx;
  --space-10: 40rpx;
  --space-11: 44rpx;
  --space-12: 48rpx;
  --space-14: 56rpx;
  --space-16: 64rpx;
  --space-18: 72rpx;
  --space-20: 80rpx;
  --space-24: 96rpx;
  --space-28: 112rpx;
  --space-32: 128rpx;
  --space-36: 144rpx;
  --space-40: 160rpx;
  --space-44: 176rpx;
  --space-48: 192rpx;
  --space-52: 208rpx;
  --space-56: 224rpx;
  --space-60: 240rpx;
  --space-64: 256rpx;
  --space-72: 288rpx;
  --space-80: 320rpx;
  --space-96: 384rpx;
  
  /* ==================== 🔲 圆角系统 ==================== */
  
  --radius-none: 0rpx;
  --radius-xs: 4rpx;
  --radius-sm: 8rpx;
  --radius-base: 12rpx;
  --radius-md: 16rpx;
  --radius-lg: 20rpx;
  --radius-xl: 24rpx;
  --radius-2xl: 32rpx;
  --radius-3xl: 40rpx;
  --radius-4xl: 48rpx;
  --radius-full: 9999rpx;
  --radius-round: 50%;
  
  /* ==================== 🌑 阴影系统 ==================== */
  
  /* 基础阴影 - 层次感 */
  --shadow-none: none;
  --shadow-xs: 0 1rpx 2rpx 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.06), 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.04);
  --shadow-base: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.08), 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.1), 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12rpx 24rpx 0 rgba(0, 0, 0, 0.12), 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16rpx 32rpx 0 rgba(0, 0, 0, 0.14), 0 12rpx 24rpx 0 rgba(0, 0, 0, 0.10);
  --shadow-2xl: 0 24rpx 48rpx 0 rgba(0, 0, 0, 0.18), 0 16rpx 32rpx 0 rgba(0, 0, 0, 0.12);
  --shadow-3xl: 0 32rpx 64rpx 0 rgba(0, 0, 0, 0.20), 0 24rpx 48rpx 0 rgba(0, 0, 0, 0.14);
  
  /* 彩色阴影 - 品牌感 */
  --shadow-primary: 0 8rpx 24rpx -4rpx rgba(102, 126, 234, 0.4);
  --shadow-secondary: 0 8rpx 24rpx -4rpx rgba(118, 75, 162, 0.4);
  --shadow-success: 0 8rpx 24rpx -4rpx rgba(82, 196, 26, 0.4);
  --shadow-warning: 0 8rpx 24rpx -4rpx rgba(250, 173, 20, 0.4);
  --shadow-error: 0 8rpx 24rpx -4rpx rgba(255, 77, 79, 0.4);
  --shadow-info: 0 8rpx 24rpx -4rpx rgba(24, 144, 255, 0.4);
  
  /* 内阴影 */
  --shadow-inner: inset 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.06);
  
  /* ==================== ⚡ 动画系统 ==================== */
  
  /* ---------- 持续时间 ---------- */
  --duration-fastest: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 500ms;
  --duration-slowest: 600ms;
  
  /* ---------- 缓动函数 ---------- */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* ---------- 组合过渡 ---------- */
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-base: all var(--duration-normal) var(--ease-in-out);
  --transition-slow: all var(--duration-slow) var(--ease-in-out);
  
  /* ==================== 📱 布局系统 ==================== */
  
  /* ---------- 容器宽度 ---------- */
  --container-xs: 640rpx;
  --container-sm: 750rpx;
  --container-md: 960rpx;
  --container-lg: 1200rpx;
  --container-xl: 1400rpx;
  
  /* ---------- Z-index 层级 ---------- */
  --z-index-base: 0;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1010;
  --z-index-fixed: 1020;
  --z-index-modal-backdrop: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  --z-index-notification: 1070;
  
  /* ---------- 安全区域 ---------- */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-right: env(safe-area-inset-right);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
  
  /* ==================== 🎭 特效系统 ==================== */
  
  /* ---------- 模糊效果 ---------- */
  --blur-none: 0;
  --blur-sm: 8rpx;
  --blur-base: 16rpx;
  --blur-md: 24rpx;
  --blur-lg: 32rpx;
  --blur-xl: 40rpx;
  --blur-2xl: 80rpx;
  --blur-3xl: 160rpx;
  
  /* ---------- 透明度 ---------- */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
  
  /* ---------- 渐变叠加效果 ---------- */
  --overlay-dark: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  --overlay-light: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
}

/* ==================== 🌙 深色模式支持 ==================== */

[data-theme="dark"] {
  /* 文字颜色反转 */
  --text-primary: #FFFFFF;
  --text-secondary: #B3B3B3;
  --text-tertiary: #808080;
  --text-quaternary: #595959;
  --text-disabled: #404040;
  --text-inverse: #1A1A1A;
  
  /* 背景色反转 */
  --bg-page: #0A0A0A;
  --bg-primary: #1A1A1A;
  --bg-secondary: #262626;
  --bg-tertiary: #2F2F2F;
  --bg-hover: #333333;
  --bg-active: #404040;
  --bg-mask: rgba(0, 0, 0, 0.8);
  
  /* 毛玻璃效果 */
  --glass-white: rgba(255, 255, 255, 0.1);
  --glass-white-light: rgba(255, 255, 255, 0.05);
  --glass-black: rgba(0, 0, 0, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  
  /* 边框色 */
  --border-base: #333333;
  --border-light: #262626;
  --border-dark: #404040;
  --divider: #262626;
  
  /* 阴影调整 */
  --shadow-sm: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8rpx 24rpx 0 rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12rpx 32rpx 0 rgba(0, 0, 0, 0.6);
}