/**
 * Design Tokens - Orbvop Design System
 *
 * 设计系统（Plan items 1-8）：
 * 1. 主色系统统一 - 1 主色 + 2-3 辅助色，全站复用
 * 2. 背景层级规范 - 至少 3 层（底层/中层玻璃/顶层浮层）
 * 3. 间距系统 - 4px 基准，消灭魔法数字
 * 4. 阴影层级 - 轻/中/重 3 档
 * 5. 模糊规范 - backdrop-filter 使用场景与数值
 * 6. 动效时长 - 微交互 150-200ms，页面过渡 300-400ms
 * 7. 圆角体系 - 8/12/16/24px 分层
 * 8. 设计 token 文件 - 集中管理，便于主题切换
 */

:root {
  /* ========================================
     Color System (1) - 主色 + 辅助色
     ======================================== */
  --orb-primary: #6366f1;
  --orb-primary-hover: #4f46e5;
  --orb-primary-muted: rgba(99, 102, 241, 0.12);
  --orb-secondary: #a855f7;
  --orb-accent: #ec4899;
  --orb-accent-muted: rgba(236, 72, 153, 0.1);

  /* 背景层级 (2) - 至少 3 层 */
  --orb-bg-layer-0: #020617;
  --orb-bg-layer-1: #0b1220;
  --orb-bg-layer-2: #0f172a;
  --orb-bg-layer-3: #1e293b;
  --orb-glass-panel: rgba(15, 23, 42, 0.55);
  --orb-glass-border: rgba(255, 255, 255, 0.10);
  --orb-overlay: rgba(2, 6, 23, 0.92);

  /* ========================================
     Spacing System (3) - 4px 基准
     ======================================== */
  --orb-space-1: 4px;
  --orb-space-2: 8px;
  --orb-space-3: 12px;
  --orb-space-4: 16px;
  --orb-space-5: 20px;
  --orb-space-6: 24px;
  --orb-space-8: 32px;
  --orb-space-10: 40px;
  --orb-space-12: 48px;

  /* ========================================
     Shadow System (4) - 轻/中/重 3 档
     ======================================== */
  /* 轻 - 悬浮卡片、tooltip */
  --orb-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* 中 - 面板、下拉 */
  --orb-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05);
  /* 重 - 模态框、浮层 */
  --orb-shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* 品牌光晕 - CTA、焦点 */
  --orb-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);

  /* ========================================
     Blur System (5) - 玻璃态规范
     ======================================== */
  /* 8px - 轻量装饰，小型 overlay */
  --orb-blur-sm: 8px;
  /* 14-16px - 标准玻璃面板 */
  --orb-blur-md: 16px;
  /* 20-24px - 重度毛玻璃、模态背景 */
  --orb-blur-lg: 24px;

  /* ========================================
     Animation Durations (6) - 统一节奏
     ======================================== */
  /* 微交互 - hover、focus、toggle */
  --orb-duration-fast: 150ms;
  --orb-duration-micro: 200ms;
  /* 页面/区块过渡 */
  --orb-duration-normal: 300ms;
  --orb-duration-slow: 400ms;
  /* 长时动画 - 背景、装饰 */
  --orb-duration-long: 600ms;

  --orb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --orb-ease-out: cubic-bezier(0.2, 0.9, 0.2, 1);

  /* ========================================
     Border Radius (7) - 圆角分层
     ======================================== */
  /* 8px - 小控件、badge、tag */
  --orb-radius-sm: 8px;
  /* 12px - 按钮、输入框、卡片 */
  --orb-radius-md: 12px;
  /* 16px - 大卡片、面板 */
  --orb-radius-lg: 16px;
  /* 24px - 模态、hero 区域 */
  --orb-radius-xl: 24px;
  /* 全圆 - pill、avatar */
  --orb-radius-full: 9999px;

  /* ========================================
     Semantic Colors - 状态色
     ======================================== */
  --orb-success: #10b981;
  --orb-success-muted: rgba(16, 185, 129, 0.1);
  --orb-warning: #f59e0b;
  --orb-warning-muted: rgba(245, 158, 11, 0.1);
  --orb-error: #ef4444;
  --orb-error-muted: rgba(239, 68, 68, 0.1);

  /* ========================================
     Text Hierarchy
     ======================================== */
  --orb-text-primary: #f8fafc;
  --orb-text-secondary: rgba(226, 232, 240, 0.88);
  --orb-text-muted: rgba(148, 163, 184, 0.9);

  /* ========================================
     响应式断点（供媒体查询引用）
     375 / 768 / 1024 / 1440
     ======================================== */

  /* ========================================
     Legacy Bridge - 消除 --orb-* 与 --orbvop-* 并存
     现有代码使用 --orbvop-* 时统一从 --orb-* 取值
     ======================================== */
  --orbvop-primary: var(--orb-primary);
  --orbvop-primary-hover: var(--orb-primary-hover);
  --orbvop-primary-light: var(--orb-primary-muted);
  --orbvop-secondary: var(--orb-secondary);
  --orbvop-accent: var(--orb-accent);
  --orbvop-success: var(--orb-success);
  --orbvop-success-light: var(--orb-success-muted);
  --orbvop-warning: var(--orb-warning);
  --orbvop-warning-light: var(--orb-warning-muted);
  --orbvop-error: var(--orb-error);
  --orbvop-error-light: var(--orb-error-muted);
  --orbvop-radius-sm: var(--orb-radius-sm);
  --orbvop-radius-md: var(--orb-radius-md);
  --orbvop-radius-lg: var(--orb-radius-lg);
  --orbvop-radius-xl: var(--orb-radius-xl);
  --orbvop-radius-2xl: var(--orb-radius-xl);
  --orbvop-shadow-sm: var(--orb-shadow-sm);
  --orbvop-shadow-md: var(--orb-shadow-md);
  --orbvop-shadow-lg: var(--orb-shadow-lg);
  --orbvop-shadow-glow: var(--orb-shadow-glow);
  --orbvop-transition-fast: var(--orb-duration-fast);
  --orbvop-transition-normal: var(--orb-duration-normal);
  --orbvop-transition-slow: var(--orb-duration-slow);
}

/* ========================================
   Light Theme Tokens
   body.app-theme-light overrides
   ======================================== */
body.app-theme-light {
  /* 背景层级 - 浅色 */
  --orb-bg-layer-0: #f8fafc;
  --orb-bg-layer-1: #f1f5f9;
  --orb-bg-layer-2: #ffffff;
  --orb-bg-layer-3: #f8fafc;
  --orb-glass-panel: rgba(255, 255, 255, 0.85);
  --orb-glass-border: rgba(15, 23, 42, 0.08);
  --orb-overlay: rgba(248, 250, 252, 0.92);

  /* 阴影 - 浅色适配 */
  --orb-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --orb-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --orb-shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --orb-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.12);

  /* 文字层级 */
  --orb-text-primary: #0f172a;
  --orb-text-secondary: rgba(15, 23, 42, 0.88);
  --orb-text-muted: rgba(71, 85, 105, 0.9);
}