/* 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: color-mix(in srgb, var(--card-bg-color) 90%, transparent);
  --globe-controls-bg-mobile: color-mix(in srgb, var(--card-bg-color) 92%, transparent);
  --globe-controls-shadow: var(--shadow-md);
  --globe-controls-shadow-mobile: var(--shadow-sm);
  --globe-controls-border: color-mix(in srgb, var(--accent-color) 12%, transparent);
  --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: color-mix(in srgb, var(--accent-color) 10%, transparent);
  --globe-btn-bg-hover: color-mix(in srgb, var(--accent-color) 20%, transparent);
  --globe-btn-bg-active: color-mix(in srgb, var(--accent-color) 30%, transparent);
  --globe-btn-color: var(--accent-color);
  --globe-btn-color-hover: var(--accent-hover-color);
  --globe-btn-color-active: color-mix(in srgb, var(--accent-color) 70%, black 30%);
  --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: color-mix(in srgb, var(--accent-color) 15%, transparent);
  --globe-toggle-bg-hover: color-mix(in srgb, var(--accent-color) 25%, transparent);
  --globe-toggle-color: var(--accent-color);
  --globe-toggle-color-hover: var(--accent-hover-color);
  --globe-toggle-size: 2.5rem;
  --globe-toggle-size-mobile: 2rem;
  --globe-toggle-radius: 0.5rem;

  /* ========== Globe 加载状态 ========== */
  --globe-loading-bg: color-mix(in srgb, var(--card-bg-color) 95%, transparent);
  --globe-loading-color: var(--accent-color);
  --globe-loading-shadow: var(--shadow-lg);
  --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: color-mix(in srgb, var(--border-color) 28%, transparent);
  --globe-progress-fill: linear-gradient(90deg, var(--info-color) 0%, var(--accent-color) 50%, var(--warning-color) 100%);
  --globe-progress-glow: 0 0 12px color-mix(in srgb, var(--info-color) 60%, transparent);
  --globe-progress-radius: 3px;

  /* ========== Globe Tooltip ========== */
  --globe-tooltip-bg: color-mix(in srgb, var(--card-bg-color) 95%, transparent);
  --globe-tooltip-color: var(--text-color);
  --globe-tooltip-border: color-mix(in srgb, var(--accent-color) 30%, transparent);
  --globe-tooltip-shadow: var(--shadow-md);
  --globe-tooltip-radius: 0.375rem;
  --globe-tooltip-padding: 0.5rem 0.75rem;
  --globe-tooltip-font-size: 0.75rem;

  /* ========== Globe 性能指示器 ========== */
  --globe-perf-bg: color-mix(in srgb, var(--card-bg-color) 90%, transparent);
  --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: var(--accent-color);
  --globe-accent-rgb: 99, 102, 241;
  --globe-accent-light: color-mix(in srgb, var(--accent-color) 65%, white);
  --globe-accent-lighter: color-mix(in srgb, var(--accent-color) 45%, white);
  --globe-accent-lightest: color-mix(in srgb, var(--accent-color) 30%, white);
  --globe-accent-dark: color-mix(in srgb, var(--accent-color) 75%, black);
  --globe-accent-darker: color-mix(in srgb, var(--accent-color) 60%, black);

  /* ========== 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, color-mix(in srgb, var(--bg-color) 90%, black 10%) 0%, color-mix(in srgb, var(--bg-color) 72%, black 28%) 100%);

  /* 控制面板 */
  --globe-controls-bg: color-mix(in srgb, var(--card-bg-color) 90%, transparent);
  --globe-controls-bg-mobile: color-mix(in srgb, var(--card-bg-color) 92%, transparent);
  --globe-controls-shadow: var(--shadow-md);
  --globe-controls-shadow-mobile: var(--shadow-sm);

  /* 按钮 */
  --globe-btn-bg: color-mix(in srgb, var(--accent-color) 14%, transparent);
  --globe-btn-bg-hover: color-mix(in srgb, var(--accent-color) 24%, transparent);
  --globe-btn-bg-active: color-mix(in srgb, var(--accent-color) 34%, transparent);
  --globe-btn-color: color-mix(in srgb, var(--accent-color) 65%, white);
  --globe-btn-color-hover: color-mix(in srgb, var(--accent-color) 48%, white);
  --globe-btn-color-active: color-mix(in srgb, var(--accent-color) 35%, white);

  /* Toggle 按钮 */
  --globe-toggle-bg: color-mix(in srgb, var(--accent-color) 20%, transparent);
  --globe-toggle-bg-hover: color-mix(in srgb, var(--accent-color) 30%, transparent);
  --globe-toggle-color: color-mix(in srgb, var(--accent-color) 65%, white);
  --globe-toggle-color-hover: color-mix(in srgb, var(--accent-color) 48%, white);

  /* 加载状态 */
  --globe-loading-bg: color-mix(in srgb, var(--card-bg-color) 95%, transparent);
  --globe-loading-color: color-mix(in srgb, var(--accent-color) 65%, white);
  --globe-loading-shadow: var(--shadow-lg);

  /* 进度条 */
  --globe-progress-bg: color-mix(in srgb, var(--border-color) 35%, transparent);

  /* Tooltip */
  --globe-tooltip-bg: color-mix(in srgb, var(--card-bg-color) 95%, transparent);
  --globe-tooltip-border: color-mix(in srgb, var(--accent-color) 25%, transparent);

  /* 性能指示器 */
  --globe-perf-bg: color-mix(in srgb, var(--card-bg-color) 80%, transparent);
}