/**
 * Ubaytech 设计系统 - CSS 变量定义
 * 包含颜色、字体、间距、阴影等设计令牌
 */

:root {
  /* ===== 颜色系统 ===== */

  /* 主色调 */
  --color-primary-900: #0A1929;
  /* 深蓝主色 */
  --color-primary-800: #0D2137;
  --color-primary-700: #102A45;
  --color-primary-600: #1E3A5F;
  --color-primary-500: #1E88E5;
  /* 品牌蓝 */
  --color-primary-400: #42A5F5;
  --color-primary-300: #64B5F6;
  --color-primary-200: #90CAF9;
  --color-primary-100: #BBDEFB;
  --color-primary-50: #E3F2FD;

  /* 强调色 */
  --color-accent-700: #C2410C;
  /* 可读橙：白底文字/价格专用，白底 ≈ 5.2:1（过 AA 正文） */
  --color-accent-600: #E55A2B;
  --color-accent-500: #FF6B35;
  /* 活力橙 */
  --color-accent-400: #FF8A5C;
  --color-accent-300: #FFAB8A;

  /* 轻科技辅助色 */
  --color-tech-cyan: #00C2FF;
  --color-tech-cyan-soft: #E6FAFF;
  --color-tech-line: rgba(0, 194, 255, 0.24);
  --color-tech-ink: #071827;

  /* 成功/警告/错误 */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* 兼容历史页面别名 */
  --color-white: #FFFFFF;
  --color-primary: var(--color-primary-500);
  --color-primary-dark: var(--color-primary-600);
  --color-primary-light: var(--color-primary-100);
  --color-accent: var(--color-accent-500);
  --color-danger: var(--color-error);
  --color-success-700: #15803D;
  --color-success-light: #D4EDDA;
  --color-danger-light: #F8D7DA;

  /* 中性色 */
  --color-gray-900: #111827;
  --color-gray-800: #1F2937;
  --color-gray-700: #374151;
  --color-gray-600: #4B5563;
  --color-gray-500: #6B7280;
  --color-gray-400: #9CA3AF;
  --color-gray-300: #D1D5DB;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #F3F4F6;
  --color-gray-50: #F9FAFB;

  /* 背景色 */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F8F9FA;
  --color-bg-tertiary: #F1F5F9;
  --color-bg-dark: #0A1929;

  /* 文字色 */
  --color-text-primary: var(--color-gray-800);
  /* #1F2937 */
  --color-text-secondary: var(--color-gray-500);
  /* #6B7280 */
  --color-text-tertiary: var(--color-gray-400);
  /* #9CA3AF */
  --color-text-inverse: #FFFFFF;

  /* ===== 字体系统 ===== */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* 字体大小 */
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-md: var(--font-size-base);
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: clamp(1.5rem, 4vw, 1.875rem);
  /* 30px */
  --font-size-4xl: clamp(1.75rem, 5vw, 2.25rem);
  /* 36px */
  --font-size-5xl: clamp(2rem, 7vw, 3rem);
  /* 48px */
  --font-size-6xl: clamp(2.5rem, 9vw, 3.75rem);
  /* 60px */

  /* 字重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* 辅助功能 */
  --focus-ring: 0 0 0 3px rgba(30, 136, 229, 0.4);

  /* ===== 间距系统 ===== */
  --spacing-1: 0.25rem;
  /* 4px */
  --spacing-2: 0.5rem;
  /* 8px */
  --spacing-3: 0.75rem;
  /* 12px */
  --spacing-4: 1rem;
  /* 16px */
  --spacing-5: 1.25rem;
  /* 20px */
  --spacing-6: 1.5rem;
  /* 24px */
  --spacing-8: 2rem;
  /* 32px */
  --spacing-10: 2.5rem;
  /* 40px */
  --spacing-12: 3rem;
  /* 48px */
  --spacing-16: 4rem;
  /* 64px */
  --spacing-20: 5rem;
  /* 80px */
  --spacing-24: 6rem;
  /* 96px */

  /* 响应式流体间距 (Mobile to Desktop) */
  --fluid-spacing-sm: clamp(1rem, 2vw, 1.5rem);
  --fluid-spacing-md: clamp(1.5rem, 4vw, 3rem);
  --fluid-spacing-lg: clamp(3rem, 8vw, 6rem);

  /* ===== 圆角 ===== */
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-2xl: 1.5rem;
  /* 24px */
  --radius-full: 9999px;

  /* ===== 阴影 ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* 现代分层阴影 (Smooth Shadows) */
  --shadow-smooth-sm: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11);
  --shadow-smooth-md: 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07);
  --shadow-smooth-lg: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.04);

  /* 卡片阴影 */
  --shadow-card: var(--shadow-smooth-sm);
  --shadow-card-hover: var(--shadow-smooth-md);
  --shadow-trust-card: 0 12px 32px rgba(10, 25, 41, 0.08);

  /* ===== 玻璃拟态 (Glassmorphism) ===== */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(10, 25, 41, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(12px);

  /* ===== 轻 Web3 / B2B 科技渐变 ===== */
  --gradient-tech-hero: linear-gradient(135deg, rgba(7, 24, 39, 0.94) 0%, rgba(10, 42, 69, 0.84) 48%, rgba(30, 136, 229, 0.58) 100%);
  --gradient-tech-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(230, 250, 255, 0.56) 100%);
  --gradient-tech-card: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%);

  /* ===== 过渡动画 ===== */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== 层级 ===== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-notification: 700;
  --z-max: 9999;

  /* ===== 布局 ===== */
  --container-max-width: 1400px;
  --header-height: 80px;
  --header-height-scrolled: 64px;
}

/* 深色模式变量（可选） */
@media (prefers-color-scheme: dark) {
  :root.dark-mode {
    --color-bg-primary: #0A1929;
    --color-bg-secondary: #0D2137;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #B0BEC5;
  }
}