/* ==========================================================================
   Feetrip 设计 Token
   权威值移植自 App 仓库 feetrip_app/lib/theme/ft_tokens.dart 与 ft_type.dart。
   设计为 light-first（浅色默认）+ 深色可切换，与 App 保持一致。
   ========================================================================== */

:root {
  /* ── 品牌色（不随明暗变化）── */
  --primary: #1F8FFF;
  --accent: #FF7A59;
  --success: #25B07A;
  --danger: #FF4D5E;

  /* 主渐变：主色 → 强调色，CTA / FAB / 字标通用 */
  --brand-gradient: linear-gradient(140deg, var(--primary), var(--accent));

  /* ── 浅色调色板（默认）── */
  --primary-soft: rgba(31, 143, 255, 0.10);
  --primary-ghost: rgba(31, 143, 255, 0.06);
  --accent-soft: rgba(255, 122, 89, 0.12);
  --bg: #F3F7FC;
  --surface: #FFFFFF;
  --surface-2: #EEF4FB;
  --text: #13233B;
  --text-soft: #5B6B82;
  --text-faint: #9AA9BD;
  --border: rgba(20, 40, 70, 0.08);
  --border-2: rgba(20, 40, 70, 0.13);

  /* ── 阴影（FtShadows）── */
  --shadow: 0 8px 26px rgba(31, 90, 160, 0.10);
  --shadow-sm: 0 2px 10px rgba(31, 90, 160, 0.07);

  /* ── 圆角（FtRadiiScheme.rounded，设计默认档）── */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ── 间距（FtSpacing）── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 28px;

  /* ── 字号（FtType，紧凑字号：提高单屏信息密度）── */
  --fs-title-lg: 18px;
  --fs-title-md: 17px;
  --fs-title-sm: 16px;
  --fs-body-lg: 15px;
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-secondary: 12.5px;
  --fs-caption: 11.5px;
  --fs-hint: 11px;
  --fs-chip: 13.5px;

  /* Web 端排版比 App 更放松：区块/页面级标题在 token 之上另设一档，
     用 clamp 让移动端回落到接近 App 的紧凑值。 */
  --fs-display: clamp(30px, 6vw, 52px);
  --fs-h2: clamp(22px, 3.4vw, 32px);
  --fs-h3: clamp(17px, 2vw, 20px);
  --fs-lead: clamp(15px, 1.7vw, 18px);

  /* ── 布局 ── */
  --content-max: 1200px;
  --content-narrow: 820px;
  --header-h: 68px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    Arial, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.25s var(--ease);

  color-scheme: light dark;
}

/* ── 深色调色板 ──
   跟随系统偏好；用户通过 data-theme 显式选择时以其为准。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-soft: rgba(31, 143, 255, 0.20);
    --primary-ghost: rgba(31, 143, 255, 0.12);
    --accent-soft: rgba(255, 122, 89, 0.22);
    --bg: #0D1320;
    --surface: #161E2E;
    --surface-2: #1E2840;
    --text: #EEF3FB;
    --text-soft: #9FB0C8;
    --text-faint: #64758C;
    --border: rgba(255, 255, 255, 0.09);
    --border-2: rgba(255, 255, 255, 0.14);
    --shadow: 0 8px 26px rgba(0, 0, 0, 0.50);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.40);
  }
}

:root[data-theme="dark"] {
  --primary-soft: rgba(31, 143, 255, 0.20);
  --primary-ghost: rgba(31, 143, 255, 0.12);
  --accent-soft: rgba(255, 122, 89, 0.22);
  --bg: #0D1320;
  --surface: #161E2E;
  --surface-2: #1E2840;
  --text: #EEF3FB;
  --text-soft: #9FB0C8;
  --text-faint: #64758C;
  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.14);
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.50);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.40);
}