/* Base Styles - Variables, Reset, Typography */

/* ========================================
   COLOR SYSTEM DOCUMENTATION
   ======================================== 
   
   所有字体颜色定义都集中在此文件中，其他CSS文件应使用这些utility classes：
   
   基础文字颜色：
   - .text-white           - 纯白色文字
   - .text-primary         - 主色调文字 (bright-cyan)
   - .text-secondary       - 次要颜色文字 (steel-blue)
   
   内容文字颜色：
   - .text-body            - 主要内容文字 (80%透明度白色)
   - .text-muted           - 次要内容文字 (70%透明度白色)
   - .text-subtle          - 辅助信息文字 (60%透明度白色)
   
   导航颜色：
   - .text-nav-default     - 导航默认颜色 (80%透明度白色)
   - .text-nav-active      - 导航激活颜色 (bright-cyan)
   
   品牌颜色：
   - .text-brand-primary   - 品牌主色 (bright-cyan)
   - .text-brand-secondary - 品牌辅色 (白色)
   
   按钮文字颜色：
   - .text-btn-primary     - 主按钮文字 (白色)
   - .text-btn-outline     - 轮廓按钮文字 (bright-cyan)
   - .text-btn-outline-hover - 轮廓按钮悬停文字 (deep-ocean)
   
   特殊文字颜色：
   - .text-accent          - 强调文字 (bright-cyan)
   - .text-hero-subtitle   - 英雄区副标题 (90%透明度白色)
   - .text-page-subtitle   - 页面副标题 (80%透明度白色)
   
   数字显示颜色（保持直接定义）：
   - .counter              - 数字跳动效果 (bright-cyan) - 在layout.css中
   - .stat-number          - 统计数字 (bright-cyan) - 在pages.css中
   - .team-stat-number     - 团队统计数字 (bright-cyan) - 在pages.css中
   - .metric-value         - 指标数值 (bright-cyan) - 在pages.css中
   
   表单颜色：
   - .text-error           - 错误提示文字 (红色)
   - .text-success         - 成功提示文字 (绿色)
   
   特殊效果：
   - .text-transparent     - 透明文字 (用于渐变效果)
   
   ======================================== */

:root {
    /* Base Colors */
    --deep-ocean: #0A1628;
    --tech-blue: #1E3A8A;
    --steel-blue: #475569;
    --soft-sky: #E0F2FE;
    
    /* Primary Colors - Cyan to Blue gradient */
    --bright-cyan: #06B6D4;
    --electric-blue: #3B82F6;
    --deep-blue: #2563EB;
    
    /* Secondary Colors - Purple accent */
    --vivid-purple: #A855F7;
    --deep-purple: #9333EA;
    
    /* Accent Colors - Warm emphasis */
    --amber-glow: #F59E0B;
    --orange-accent: #FB923C;
    
    /* Gradient Combinations */
    --gradient-primary: linear-gradient(135deg, var(--bright-cyan), var(--electric-blue));
    --gradient-secondary: linear-gradient(135deg, var(--electric-blue), var(--vivid-purple));
    --gradient-accent: linear-gradient(135deg, var(--amber-glow), var(--orange-accent));
    --gradient-hero: linear-gradient(135deg, var(--bright-cyan), var(--electric-blue), var(--vivid-purple));
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.6s ease;
    
    /* Enhanced Shadows with color */
    --shadow-sm: 0 4px 12px rgba(6, 182, 212, 0.1);
    --shadow-md: 0 10px 25px rgba(6, 182, 212, 0.2);
    --shadow-lg: 0 25px 50px rgba(6, 182, 212, 0.3);
    --shadow-purple: 0 10px 25px rgba(168, 85, 247, 0.2);
    --shadow-amber: 0 10px 25px rgba(245, 158, 11, 0.2);
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 移除所有元素的默认焦点轮廓，但保持可访问性 */
*:focus {
    outline: none !important;
}

/* 为键盘用户提供可访问的焦点指示 */
*:focus-visible {
    outline: 2px solid var(--bright-cyan) !important;
    outline-offset: 2px !important;
}

/* Anti-flicker styles for smooth interactions */
a, button, input, textarea, select {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Allow text selection for input fields */
input, textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Smooth transitions for all interactive elements */
a, button {
    transition: all 0.2s ease !important;
}

/* Remove default button and link styling that causes flicker */
button::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
}

/* Prevent text selection on interactive elements */
.nav-link, .mobile-nav-link, .btn, .learn-more-btn, .modal-close, .back-to-top {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Base Typography */
body {
    font-family: var(--font-primary);
    background: var(--deep-ocean);
    color: white;
    overflow-x: hidden;
    line-height: 1.6;
    position: relative;
}

/* Noise texture overlay for depth */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: overlay;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
}

/* ========================================
   FONT COLOR DEFINITIONS
   ======================================== */

/* Primary Text Colors */
.text-white { color: white; }
.text-primary { color: var(--bright-cyan); }
.text-secondary { color: var(--steel-blue); }

/* Content Text Colors */
.text-body { color: rgba(255, 255, 255, 0.8); }        /* 主要内容文字 */
.text-muted { color: rgba(255, 255, 255, 0.7); }       /* 次要内容文字 */
.text-subtle { color: rgba(255, 255, 255, 0.6); }      /* 辅助信息文字 */

/* Navigation Colors */
.text-nav-default { color: rgba(255, 255, 255, 0.8); } /* 导航默认颜色 */
.text-nav-active { color: var(--bright-cyan); }        /* 导航激活颜色 */

/* Brand Colors */
.text-brand-primary { color: var(--bright-cyan); }     /* 品牌主色 */
.text-brand-secondary { color: white; }                /* 品牌辅色 */

/* Button Text Colors */
.text-btn-primary { color: white; }                    /* 主按钮文字 */
.text-btn-outline { color: var(--bright-cyan); }       /* 轮廓按钮文字 */
.text-btn-outline-hover { color: var(--deep-ocean); }  /* 轮廓按钮悬停文字 */

/* Special Text Colors */
.text-accent { color: var(--bright-cyan); }            /* 强调文字 */
.text-hero-subtitle { color: rgba(255, 255, 255, 0.9); } /* 英雄区副标题 */
.text-page-subtitle { color: rgba(255, 255, 255, 0.8); } /* 页面副标题 */

/* Form Colors */
.text-error { color: #ef4444; }                        /* 错误提示文字 */
.text-success { color: #10b981; }                      /* 成功提示文字 */

/* Transparent Text (for gradient effects) */
.text-transparent { 
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.container {
    max-width: 1580px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

/* Gradient Text Utility */
.gradient-text {
    background: linear-gradient(135deg, var(--bright-cyan), var(--electric-blue), var(--vivid-purple));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 15, 30, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Scroll progress indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--bright-cyan), var(--electric-blue), var(--vivid-purple));
    z-index: 10000;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}