/*
# variables.css
# Written by: 广州羲驭科技有限公司
# Description: Defines global CSS variables, color system, and design tokens.
# Copyright: © 2024-2025 广州羲驭科技有限公司. All rights reserved. | 粤ICP备2025458335号
*/

/* ===== Vista Geometric Glass 设计系统 ===== */

:root {
  /* ===== Vista 毛玻璃色彩系统 ===== */
  /* Vista 经典色彩 */
  --vista-glass-blue: #3B8BC7;
  --vista-glass-teal: #00D9C7;
  --vista-deep-space: #0D2B50;
  --vista-dark-blue: #1A365D;
  --vista-accent-green: #3FAE2A;
  --vista-accent-orange: #FF6B00;

  /* 现代渐变色彩 */
  --glass-primary: linear-gradient(135deg, #3B8BC7 0%, #00D9C7 100%);
  --glass-secondary: linear-gradient(225deg, #0D2B50 0%, #1A365D 100%);
  --glass-accent: linear-gradient(45deg, #3FAE2A 0%, #FF6B00 100%);

  /* ===== 玻璃透明度层级系统 ===== */
  /* 5层透明度系统，创造景深效果 */
  --glass-layer-1: rgba(255, 255, 255, 0.08);   /* 最深层 */
  --glass-layer-2: rgba(255, 255, 255, 0.15);   /* 深层 */
  --glass-layer-3: rgba(255, 255, 255, 0.25);   /* 中层 */
  --glass-layer-4: rgba(255, 255, 255, 0.35);   /* 浅层 */
  --glass-layer-5: rgba(255, 255, 255, 0.45);   /* 最浅层 */

  /* 交互状态透明度 */
  --glass-hover: rgba(255, 255, 255, 0.55);
  --glass-active: rgba(255, 255, 255, 0.65);
  --glass-focus: rgba(255, 255, 255, 0.75);

  /* ===== 玻璃边框系统 ===== */
  --glass-border-light: rgba(255, 255, 255, 0.18);
  --glass-border-medium: rgba(255, 255, 255, 0.25);
  --glass-border-strong: rgba(255, 255, 255, 0.35);

  /* 彩色边框 */
  --glass-border-teal: rgba(0, 217, 199, 0.4);
  --glass-border-blue: rgba(59, 139, 199, 0.5);
  --glass-border-accent: rgba(63, 174, 42, 0.6);

  /* ===== 玻璃光影效果系统 ===== */
  /* Vista 经典光效 */
  --vista-glow-blue: 0 0 30px rgba(59, 139, 199, 0.4);
  --vista-glow-teal: 0 0 25px rgba(0, 217, 199, 0.5);
  --vista-glow-accent: 0 0 20px rgba(63, 174, 42, 0.6);

  /* 内阴影效果 */
  --glass-inset-subtle: inset 0 0 15px rgba(255, 255, 255, 0.1);
  --glass-inset-medium: inset 0 0 25px rgba(255, 255, 255, 0.15);
  --glass-inset-strong: inset 0 0 35px rgba(255, 255, 255, 0.2);

  /* 外阴影系统 */
  --glass-shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.1);
  --glass-shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.15);
  --glass-shadow-strong: 0 16px 64px rgba(0, 0, 0, 0.25);
  --glass-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* ===== 毛玻璃模糊效果 ===== */
  --glass-blur-light: blur(8px);
  --glass-blur-medium: blur(16px);
  --glass-blur-heavy: blur(24px);
  --glass-blur-max: blur(32px);

  /* ===== 几何设计系统 ===== */
  /* 几何形状颜色 */
  --geo-primary: rgba(59, 139, 199, 0.8);
  --geo-secondary: rgba(0, 217, 199, 0.7);
  --geo-accent: rgba(63, 174, 42, 0.6);
  --geo-highlight: rgba(255, 107, 0, 0.7);

  /* 几何渐变 */
  --geo-gradient-1: linear-gradient(45deg, var(--geo-primary), var(--geo-secondary));
  --geo-gradient-2: linear-gradient(135deg, var(--geo-secondary), var(--geo-accent));
  --geo-gradient-3: linear-gradient(225deg, var(--geo-accent), var(--geo-highlight));

  /* 几何尺寸系统 */
  --geo-size-xs: 20px;
  --geo-size-sm: 40px;
  --geo-size-md: 80px;
  --geo-size-lg: 120px;
  --geo-size-xl: 200px;
  --geo-size-xxl: 300px;

  /* ===== 动画系统变量 ===== */
  /* 动画时长 */
  --animation-fast: 0.2s;
  --animation-medium: 0.4s;
  --animation-slow: 0.8s;
  --animation-ultra-slow: 1.5s;

  /* 动画缓动函数 */
  --ease-out-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ===== 背景渐变系统 ===== */
  /* 主背景渐变 */
  --bg-primary: linear-gradient(135deg, #0D2B50 0%, #1A365D 50%, #0a1929 100%);
  --bg-secondary: linear-gradient(225deg, #0a1528 0%, #1a1f36 100%);
  --bg-hero: linear-gradient(135deg, rgba(13, 43, 80, 0.95) 0%, rgba(26, 54, 93, 0.9) 50%, rgba(59, 139, 199, 0.85) 100%);

  /* ===== 字体系统 ===== */
  /* 字体族 */
  --font-primary: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 字体大小 */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */

  /* 字体粗细 */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

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

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

  /* ===== 圆角系统 ===== */
  --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-3xl: 2rem;     /* 32px */
  --radius-full: 9999px;

  /* ===== 网格系统 ===== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* ===== 断点系统 ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ===== 特殊效果变量 ===== */
  /* 鼠标跟随效果 */
  --mouse-glow-size: 400px;
  --mouse-glow-blur: 60px;

  /* 粒子系统 */
  --particle-count: 50;
  --particle-size: 4px;
  --particle-opacity: 0.6;

  /* 3D变换 */
  --perspective: 1000px;
  --transform-depth: 50px;
}

/* ===== 暗色主题变量 ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* 暗色主题下的调整 */
    --glass-layer-1: rgba(255, 255, 255, 0.05);
    --glass-layer-2: rgba(255, 255, 255, 0.12);
    --glass-layer-3: rgba(255, 255, 255, 0.18);
    --glass-layer-4: rgba(255, 255, 255, 0.25);
    --glass-layer-5: rgba(255, 255, 255, 0.35);
  }
}

/* ===== 减少动画偏好设置 ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-fast: 0s;
    --animation-medium: 0s;
    --animation-slow: 0s;
    --animation-ultra-slow: 0s;
  }
}