/**
 * 蜂鸟地图 - 设计系统
 * Design System for Fengmap Indoor Navigation
 * 
 * 包含：CSS变量、基础重置、字体系统、动画系统
 */

/* 基础重置和设计系统 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS变量 - 液态玻璃设计系统 */
:root {
    /* Font Awesome 系统 */
    --fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
    
    /* 主色调 - 柔和蓝调 */
    --primary-blue: #E3F2FD;
    --primary-blue-light: #F8FDFF;
    --primary-blue-dark: #BBDEFB;
    --accent-blue: #90CAF9;
    --accent-green: #81C784;
    --accent-purple: #BA68C8;
    
    /* 金属色调 */
    --metal-light: #F5F7FA;
    --metal-medium: #E8EBF0;
    --metal-dark: #DDE1E7;
    
    /* 渐变色 - 柔和液态效果 */
    --gradient-primary: linear-gradient(135deg, #F8FDFF 0%, #E3F2FD 50%, #BBDEFB 100%);
    --gradient-secondary: linear-gradient(135deg, #FFFFFF 0%, #F5F7FA 50%, #E8EBF0 100%);
    --gradient-metal: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 50%, #DEE2E6 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,253,255,0.8) 50%, rgba(227,242,253,0.7) 100%);
    --gradient-accent: linear-gradient(135deg, #90CAF9 0%, #81C784 50%, #BA68C8 100%);
    
    /* 液态玻璃效果 */
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-bg-light: rgba(255, 255, 255, 0.35);
    --glass-bg-heavy: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-border-light: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    --glass-shadow-heavy: 0 16px 64px rgba(0, 0, 0, 0.08);
    --glass-backdrop: blur(20px);
    --glass-backdrop-heavy: blur(40px);
    
    /* 深色玻璃态 */
    --glass-dark-bg: rgba(0, 0, 0, 0.08);
    --glass-dark-border: rgba(255, 255, 255, 0.15);
    
    /* 光泽和反射效果 */
    --shine-gradient: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.3) 100%);
    --reflection-gradient: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
    --glow-blue: 0 0 20px rgba(144, 202, 249, 0.3);
    --glow-white: 0 0 30px rgba(255, 255, 255, 0.4);
    
    /* 阴影系统 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.25);
    
    /* 圆角系统 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;
    
    /* 间距系统 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    
    /* 字体系统 */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    
    /* 动画时长 */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    
    /* 缓动函数 */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 基础字体和交互设置 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: #4A5568;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-md);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f2f5;
    -webkit-font-smoothing: antialiased;
}

/* Font Awesome 基础设置 */
.fas, .far, .fab {
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

.fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.far {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}

.fab {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

/* 通用动画类 */
.transition-fast {
    transition: all var(--duration-fast) var(--ease-out);
}

.transition-normal {
    transition: all var(--duration-normal) var(--ease-in-out);
}

.transition-slow {
    transition: all var(--duration-slow) var(--ease-bounce);
}

/* 通用阴影类 */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* 通用圆角类 */
.radius-sm {
    border-radius: var(--radius-sm);
}

.radius-md {
    border-radius: var(--radius-md);
}

.radius-lg {
    border-radius: var(--radius-lg);
}

.radius-xl {
    border-radius: var(--radius-xl);
}

.radius-full {
    border-radius: var(--radius-full);
}

/* 液态玻璃效果类 */
.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-effect-heavy {
    background: var(--glass-bg-heavy);
    backdrop-filter: var(--glass-backdrop-heavy);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-heavy);
}