/* 设计令牌：颜色、间距、主题（浅/深）与模糊开关的取值。
   必须最先加载：后面所有文件都只引用这里的 var()。
   从 style-modern.css 原样搬出，未改任何值。 */


/* ---------- CSS 变量 ---------- */
:root {
  /* 主色 — Sky-500 / Blue-400 */
  --primary: #38bdf8;
  --primary-hover: #0ea5e9;
  --primary-light: rgba(56, 189, 248, 0.2);
  --primary-ring: rgba(56, 189, 248, 0.3);

  --secondary: #7dd3fc;

  /* 功能色 */
  --success: #10b981;

  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: rgba(245, 158, 11, 0.12);

  --error: #ef4444;
  --error-light: rgba(239, 68, 68, 0.12);

  /* 桌面端侧栏宽度（地图区据此让位） */
  --sidebar-w: 296px;

  /* 背景渐变 */
  --bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #e0f7fa 50%, #e0f2fe 100%);

  /* 玻璃质感 */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-hover: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-border-hover: rgba(255, 255, 255, 0.8);
  --glass-blur: 12px;
  --glass-saturate: 1.5;
  --glass-shadow: 0 4px 30px rgba(56, 189, 248, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  --glass-shadow-hover: 0 8px 40px rgba(56, 189, 248, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.5);

  /* 文字色 — 次要/辅助色按 WCAG AA 小字号 4.5:1 校准（实测 5.01 / 6.18） */
  --text-primary: #0c4a6e;
  --text-secondary: rgba(12, 74, 110, 0.86);
  --text-muted: rgba(12, 74, 110, 0.78);

  /* 亮蓝渐变之上的文字（白字只有 1.67:1，深色墨 8.26:1） */
  --on-primary-ink: #0c1929;
  --focus-ring: #0369a1;
  --scroll-thumb: rgba(12, 74, 110, 0.35);

  /* 输入 */
  --input-bg: rgba(255, 255, 255, 0.5);
  --input-border: rgba(56, 189, 248, 0.2);
  --input-focus: rgba(56, 189, 248, 0.5);

  /* 特殊区域 */
  --distance-bg: rgba(56, 189, 248, 0.1);
  --distance-color: #0369a1;
  --distance-border: rgba(56, 189, 248, 0.25);

  --live-info-bg: rgba(16, 185, 129, 0.1);
  --live-info-color: #059669;
  --live-info-border: rgba(16, 185, 129, 0.25);

  /* 地图 */
  --map-bg: #e0f2fe;

  /* 过渡 */
  --transition-fast: 150ms ease-out;
  --transition-normal: 300ms ease-out;

  /* 毛玻璃合成值 — 由 blurBlur 开关控制 */
  --backdrop-glass: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
}


/* ---------- 暗色主题 CSS 变量 ---------- */
[data-theme="dark"] {
  --primary: #7dd3fc;
  --primary-hover: #38bdf8;
  --primary-light: rgba(56, 189, 248, 0.2);
  --primary-ring: rgba(125, 211, 252, 0.3);

  --secondary: #a5f3fc;

  --success: #34d399;

  --warning: #fbbf24;
  --warning-hover: #f59e0b;
  --warning-light: rgba(251, 191, 36, 0.15);

  --error: #f87171;
  --error-light: rgba(248, 113, 113, 0.15);

  --bg-gradient: linear-gradient(135deg, #0c1929 0%, #0c2d48 50%, #0c1929 100%);

  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-hover: rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --glass-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12);

  --text-primary: #e0f2fe;
  --text-secondary: rgba(224, 242, 254, 0.7);
  --text-muted: rgba(224, 242, 254, 0.5);

  /* 深色主题沿用同一套亮蓝渐变，墨色与浅色主题一致 */
  --on-primary-ink: #0c1929;
  --focus-ring: #7dd3fc;
  --scroll-thumb: rgba(255, 255, 255, 0.28);

  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.12);
  --input-focus: rgba(125, 211, 252, 0.4);

  --distance-bg: rgba(56, 189, 248, 0.15);
  --distance-color: #7dd3fc;
  --distance-border: rgba(56, 189, 248, 0.3);

  --live-info-bg: rgba(16, 185, 129, 0.12);
  --live-info-color: #6ee7b7;
  --live-info-border: rgba(16, 185, 129, 0.25);

  --map-bg: #0c1929;
}

[data-blur="off"][data-theme="dark"] {
  --glass-bg: rgba(12, 25, 41, 0.94);
  --glass-bg-hover: rgba(15, 32, 52, 1);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-hover: rgba(255, 255, 255, 0.26);
  --glass-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .sidebar {
  background: var(--glass-bg);
}

[data-theme="dark"] .export-time-input {
  color-scheme: dark;
}