/* static/css/components/region-globe-vars.css */
/* 3D 地球组件专用 CSS 变量 */
/* 目的：模块化地球组件样式，消除重复选择器，便于主题扩展 */
/* 相关：region-globe.css, static/js/globe/region-globe.js */

:root {
  /* ========== Globe 容器 ========== */
  --globe-container-bg: transparent;
  --globe-container-min-height: 600px;
  --globe-container-mobile-min-height: 400px;
  --globe-wrapper-height: 600px;
  --globe-wrapper-mobile-height: 60vh;
  --globe-wrapper-mobile-min: 350px;
  --globe-wrapper-mobile-max: 500px;
  --globe-wrapper-tablet-height: 500px;

  /* ========== Globe 控制面板 ========== */
  --globe-controls-bg: rgba(255, 255, 255, 0.9);
  --globe-controls-bg-mobile: rgba(255, 255, 255, 0.92);
  --globe-controls-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --globe-controls-shadow-mobile: 0 2px 10px rgba(0, 0, 0, 0.1);
  --globe-controls-border: rgba(99, 102, 241, 0.1);
  --globe-controls-radius: 0.75rem;
  --globe-controls-radius-mobile: 0.5rem;
  --globe-controls-padding: 0.5rem;
  --globe-controls-padding-mobile: 0.375rem;

  /* ========== Globe 按钮 ========== */
  --globe-btn-bg: rgba(99, 102, 241, 0.1);
  --globe-btn-bg-hover: rgba(99, 102, 241, 0.2);
  --globe-btn-bg-active: rgba(99, 102, 241, 0.3);
  --globe-btn-color: #6366f1;
  --globe-btn-color-hover: #4f46e5;
  --globe-btn-color-active: #4338ca;
  --globe-btn-radius: 0.375rem;
  --globe-btn-padding: 0.5rem 1rem;
  --globe-btn-padding-mobile: 0.375rem 0.5rem;
  --globe-btn-font-size: 0.875rem;
  --globe-btn-font-size-mobile: 0.7rem;

  /* ========== Globe Toggle 按钮 ========== */
  --globe-toggle-bg: rgba(99, 102, 241, 0.15);
  --globe-toggle-bg-hover: rgba(99, 102, 241, 0.25);
  --globe-toggle-color: #6366f1;
  --globe-toggle-color-hover: #4f46e5;
  --globe-toggle-size: 2.5rem;
  --globe-toggle-size-mobile: 2rem;
  --globe-toggle-radius: 0.5rem;

  /* ========== Globe 加载状态 ========== */
  --globe-loading-bg: rgba(255, 255, 255, 0.95);
  --globe-loading-color: #6366f1;
  --globe-loading-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --globe-loading-radius: 0.75rem;
  --globe-loading-padding: 1.5rem 2rem;
  --globe-loading-icon-size: 2rem;

  /* ========== Globe 进度条 ========== */
  --globe-progress-width: 280px;
  --globe-progress-height: 6px;
  --globe-progress-bg: rgba(148, 163, 184, 0.2);
  --globe-progress-fill: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
  --globe-progress-glow: 0 0 12px rgba(59, 130, 246, 0.6);
  --globe-progress-radius: 3px;

  /* ========== Globe Tooltip ========== */
  --globe-tooltip-bg: rgba(255, 255, 255, 0.95);
  --globe-tooltip-color: var(--text-color);
  --globe-tooltip-border: rgba(99, 102, 241, 0.3);
  --globe-tooltip-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --globe-tooltip-radius: 0.375rem;
  --globe-tooltip-padding: 0.5rem 0.75rem;
  --globe-tooltip-font-size: 0.75rem;

  /* ========== Globe 性能指示器 ========== */
  --globe-perf-bg: rgba(255, 255, 255, 0.9);
  --globe-perf-color: var(--secondary-text-color);
  --globe-perf-font-size: 0.75rem;
  --globe-perf-padding: 0.25rem 0.5rem;
  --globe-perf-radius: 0.25rem;

  /* ========== Globe 降级方案 ========== */
  --globe-fallback-min-height: 400px;

  /* ========== Globe 国旗样式 ========== */
  --globe-flag-width: var(--flag-globe-width);
  --globe-flag-height: var(--flag-globe-height);
  --globe-flag-width-2x: 14px;
  --globe-flag-height-2x: 10px;
  --globe-flag-width-3x: 16px;
  --globe-flag-height-3x: 11px;
  --globe-flag-radius: var(--flag-globe-radius);
  --globe-flag-shadow: var(--flag-globe-shadow);
  --globe-flag-emoji-size: 13px;
  --globe-flag-emoji-size-2x: 14px;
  --globe-flag-emoji-size-3x: 16px;

  /* ========== Globe 强调色（indigo 系） ========== */
  --globe-accent: #6366f1;
  --globe-accent-rgb: 99, 102, 241;
  --globe-accent-light: #a5b4fc;
  --globe-accent-lighter: #c7d2fe;
  --globe-accent-lightest: #e0e7ff;
  --globe-accent-dark: #4f46e5;
  --globe-accent-darker: #4338ca;

  /* ========== Globe 动画配置 ========== */
  --globe-transition-speed: 0.2s;
  --globe-transition-timing: ease;
  --globe-transition-cubic: cubic-bezier(0.4, 0, 0.2, 1);
  --globe-animation-spin: 1s linear infinite;
  --globe-animation-fade: 0.5s ease;
  --globe-animation-pulse: 2s ease-in-out infinite;
  --globe-animation-highlight: 3s ease-in-out infinite;
  --globe-animation-achievement: 1.5s ease-out;
  --globe-animation-ripple: 1.5s ease-out;
}

/* ========== 暗色模式变量覆盖 ========== */
.dark {
  /* 容器 */
  --globe-container-bg: linear-gradient(180deg, #000 0%, #0a0a0a 100%);

  /* 控制面板 */
  --globe-controls-bg: rgba(15, 23, 42, 0.9);
  --globe-controls-bg-mobile: rgba(15, 23, 42, 0.92);
  --globe-controls-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --globe-controls-shadow-mobile: 0 2px 10px rgba(0, 0, 0, 0.2);

  /* 按钮 */
  --globe-btn-bg: rgba(99, 102, 241, 0.1);
  --globe-btn-bg-hover: rgba(99, 102, 241, 0.2);
  --globe-btn-bg-active: rgba(99, 102, 241, 0.3);
  --globe-btn-color: #a5b4fc;
  --globe-btn-color-hover: #c7d2fe;
  --globe-btn-color-active: #e0e7ff;

  /* Toggle 按钮 */
  --globe-toggle-bg: rgba(99, 102, 241, 0.2);
  --globe-toggle-bg-hover: rgba(99, 102, 241, 0.3);
  --globe-toggle-color: #a5b4fc;
  --globe-toggle-color-hover: #c7d2fe;

  /* 加载状态 */
  --globe-loading-bg: rgba(15, 23, 42, 0.95);
  --globe-loading-color: #a5b4fc;
  --globe-loading-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* 进度条 */
  --globe-progress-bg: rgba(var(--dark-border-color-rgb), 0.3);

  /* Tooltip */
  --globe-tooltip-bg: rgba(15, 23, 42, 0.95);
  --globe-tooltip-border: rgba(99, 102, 241, 0.2);

  /* 性能指示器 */
  --globe-perf-bg: rgba(15, 23, 42, 0.8);
}