/* ============================================================
   FPV Tools 设计令牌（Design Tokens）
   风格：国内大厂扁平 —— 中性灰白 + 品牌蓝 + 卡片化 + 细边框
   日/夜双主题：通过 [data-theme] 属性切换
   ============================================================ */

:root {
  /* ---------- 品牌色 ---------- */
  --brand-50:  #eef4ff;
  --brand-100: #dbe7fe;
  --brand-200: #bfd4fe;
  --brand-300: #93b4fd;
  --brand-400: #6090fa;
  --brand-500: #3b6ef6;
  --brand-600: #2557e8;   /* 主操作色 */
  --brand-700: #1d45c4;
  --brand-800: #1d3b9c;
  --brand-900: #1c357a;

  /* ---------- 功能色 ---------- */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #dc2626;
  --info:    #0ea5e9;

  /* ---------- 中性色（日间） ---------- */
  --gray-50:  #f7f8fa;
  --gray-100: #f1f2f5;
  --gray-200: #e6e8ec;
  --gray-300: #d5d8de;
  --gray-400: #9aa0ab;
  --gray-500: #6b7280;
  --gray-600: #4b515b;
  --gray-700: #353a43;
  --gray-800: #22262e;
  --gray-900: #14171d;

  /* ---------- 语义映射（日间主题） ---------- */
  --bg-page:      #ffffff;   /* 页面底色 */
  --bg-surface:   #ffffff;   /* 卡片/表面 */
  --bg-subtle:    var(--gray-50);
  --bg-hover:     var(--gray-100);
  --bg-inverse:   var(--gray-900);
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-400);
  --text-inverse:   #ffffff;
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  /* ---------- 字体 ---------- */
  --font-sans: "HarmonyOS Sans SC", "MiSans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas,
               "Liberation Mono", Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* ---------- 间距 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- 圆角 ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---------- 阴影（扁平克制） ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 23, 29, 0.05);
  --shadow-md: 0 2px 8px rgba(20, 23, 29, 0.08);
  --shadow-lg: 0 8px 24px rgba(20, 23, 29, 0.12);
  --shadow-brand: 0 4px 16px rgba(37, 87, 232, 0.25);

  /* ---------- 布局 ---------- */
  --container-max: 1200px;
  --header-height: 64px;

  /* ---------- 动效 ---------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   夜间主题
   ============================================================ */
[data-theme="dark"] {
  --bg-page:      #0f1218;
  --bg-surface:   #171b23;
  --bg-subtle:    #1d222c;
  --bg-hover:     #232936;
  --bg-inverse:   #f1f2f5;
  --text-primary:   #f2f4f8;
  --text-secondary: #a8b0bd;
  --text-tertiary:  #6b7280;
  --text-inverse:   #14171d;
  --border:        #2a303c;
  --border-strong: #3a4150;

  --gray-50:  #1d222c;
  --gray-100: #232936;
  --gray-200: #2a303c;

  /* 品牌色 ramp 在 dark 下需重新映射（否则 light #eef4ff 等极浅色在深色背景上变成"白底"）
     修复：
       - brand-50  → 用于 chart fill / tag 浅底 / nav active 浅底 → 用半透明品牌蓝
       - brand-100 → 用于 hover/focus 浅底 → 稍深一点透明
       - brand-200 → 用于 tag border 等 → 更深的透明
       - brand-500/600/700 保持不变（主色一致，跨主题视觉锚点） */
  --brand-50:  rgba(96, 144, 250, 0.18);
  --brand-100: rgba(96, 144, 250, 0.28);
  --brand-200: rgba(96, 144, 250, 0.42);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0 4px 16px rgba(59, 110, 246, 0.35);
}

/* 平滑过渡主题切换（仅颜色属性） */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, fill 0.3s ease !important;
}

/* 无障碍：跟随系统减少动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}