/* ============================================================
   CarMate Design Tokens
   所有颜色 / 尺寸 / 动效的唯一来源。页面样式不得硬编码颜色。
   ============================================================ */
:root {
  color-scheme: light;

  /* 系统字体栈：优先 Apple 系统字体，不下载、不分发任何字体文件 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
    "Helvetica Neue", Arial, sans-serif;

  /* ---------- 浅色 ---------- */
  --bg: #F5F5F7;
  --card: #FFFFFF;
  --card-muted: #F2F2F7;
  --card-inset: #F7F7F9;
  --text: #1C1C1E;
  --text-secondary: #6E6E73;
  --text-tertiary: #8E8E93;
  --accent: #007AFF;
  --accent-press: #0062CC;
  --accent-soft: rgba(0, 122, 255, 0.10);
  --danger: #FF3B30;
  --danger-soft: rgba(255, 59, 48, 0.10);
  --success: #34C759;
  --success-soft: rgba(52, 199, 89, 0.12);
  --warning: #FF9F0A;
  --warning-soft: rgba(255, 159, 10, 0.13);
  --separator: rgba(60, 60, 67, 0.12);
  --separator-strong: rgba(60, 60, 67, 0.22);
  --fill-soft: rgba(118, 118, 128, 0.12);
  --fill-softer: rgba(118, 118, 128, 0.075);
  --nav-bg: rgba(250, 250, 252, 0.76);
  --top-bg: rgba(245, 245, 247, 0.78);
  --sheet-bg: rgba(255, 255, 255, 0.95);
  --glass-stroke: rgba(255, 255, 255, 0.72);
  --on-accent: #FFFFFF;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.035), 0 8px 24px rgba(16, 24, 40, 0.045);
  --shadow-float: 0 10px 34px rgba(16, 24, 40, 0.14), 0 1px 3px rgba(16, 24, 40, 0.07);
  --shadow-hero: 0 14px 38px rgba(16, 24, 40, 0.11);
  --hero-tint: linear-gradient(160deg, #FFFFFF 0%, #F7F8FB 58%, #EEF2F8 100%);
  --hero-ink: #1C1C1E;
  --hairline-highlight: rgba(255, 255, 255, 0.85);
  --scrim: rgba(0, 0, 0, 0.32);

  /* 图表色板：克制的 iOS 系统色，不用于大面积渐变 */
  --chart-1: #007AFF; --chart-2: #34C759; --chart-3: #FF9F0A;
  --chart-4: #FF3B30; --chart-5: #5E5CE6; --chart-6: #30B0C7;
  --chart-7: #FF2D55; --chart-8: #A2845E; --chart-9: #8E8E93;

  /* ---------- 尺寸 ---------- */
  --radius-card: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --tap-min: 44px;
  --btn-h: 50px;
  --page-x: 20px;
  --topbar-h: 52px;
  --tabbar-h: 60px;
  --tabbar-gap: 12px;
  --content-max: 560px;

  /* ---------- 安全区（刘海 / 灵动岛 / Home Indicator） ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- 动效 ---------- */
  --dur-fast: 180ms;
  --dur: 220ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================================================
   深色：跟随 iPhone 系统外观，或由用户在「我的」里手动指定
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --card: #1C1C1E;
  --card-muted: #2C2C2E;
  --card-inset: #232325;
  --text: #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-tertiary: #8E8E93;
  --accent: #0A84FF;
  --accent-press: #409CFF;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --danger: #FF453A;
  --danger-soft: rgba(255, 69, 58, 0.16);
  --success: #30D158;
  --success-soft: rgba(48, 209, 88, 0.16);
  --warning: #FF9F0A;
  --warning-soft: rgba(255, 159, 10, 0.18);
  --separator: rgba(84, 84, 88, 0.60);
  --separator-strong: rgba(84, 84, 88, 0.85);
  --fill-soft: rgba(118, 118, 128, 0.24);
  --fill-softer: rgba(118, 118, 128, 0.16);
  --nav-bg: rgba(30, 30, 32, 0.78);
  --top-bg: rgba(10, 10, 11, 0.78);
  --sheet-bg: rgba(28, 28, 30, 0.96);
  --glass-stroke: rgba(255, 255, 255, 0.10);
  --on-accent: #FFFFFF;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.34);
  --shadow-float: 0 10px 34px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-hero: 0 14px 38px rgba(0, 0, 0, 0.55);
  --hero-tint: linear-gradient(160deg, #232326 0%, #1C1C21 55%, #15171C 100%);
  --hero-ink: #F5F5F7;
  --hairline-highlight: rgba(255, 255, 255, 0.06);
  --scrim: rgba(0, 0, 0, 0.58);
  --chart-1: #0A84FF; --chart-2: #30D158; --chart-3: #FF9F0A;
  --chart-4: #FF453A; --chart-5: #5E5CE6; --chart-6: #40C8E0;
  --chart-7: #FF375F; --chart-8: #AC8E68; --chart-9: #8E8E93;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --card: #1C1C1E;
    --card-muted: #2C2C2E;
    --card-inset: #232325;
    --text: #F5F5F7;
    --text-secondary: #A1A1A6;
    --text-tertiary: #8E8E93;
    --accent: #0A84FF;
    --accent-press: #409CFF;
    --accent-soft: rgba(10, 132, 255, 0.16);
    --danger: #FF453A;
    --danger-soft: rgba(255, 69, 58, 0.16);
    --success: #30D158;
    --success-soft: rgba(48, 209, 88, 0.16);
    --warning: #FF9F0A;
    --warning-soft: rgba(255, 159, 10, 0.18);
    --separator: rgba(84, 84, 88, 0.60);
    --separator-strong: rgba(84, 84, 88, 0.85);
    --fill-soft: rgba(118, 118, 128, 0.24);
    --fill-softer: rgba(118, 118, 128, 0.16);
    --nav-bg: rgba(30, 30, 32, 0.78);
    --top-bg: rgba(10, 10, 11, 0.78);
    --sheet-bg: rgba(28, 28, 30, 0.96);
    --glass-stroke: rgba(255, 255, 255, 0.10);
    --on-accent: #FFFFFF;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.34);
    --shadow-float: 0 10px 34px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-hero: 0 14px 38px rgba(0, 0, 0, 0.55);
    --hero-tint: linear-gradient(160deg, #232326 0%, #1C1C21 55%, #15171C 100%);
    --hero-ink: #F5F5F7;
    --hairline-highlight: rgba(255, 255, 255, 0.06);
    --scrim: rgba(0, 0, 0, 0.58);
  --chart-1: #0A84FF; --chart-2: #30D158; --chart-3: #FF9F0A;
  --chart-4: #FF453A; --chart-5: #5E5CE6; --chart-6: #40C8E0;
  --chart-7: #FF375F; --chart-8: #AC8E68; --chart-9: #8E8E93;
  }
}

/* 不支持毛玻璃的环境：自动回退为完全不透明、保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --nav-bg: #FBFBFD;
    --top-bg: #F5F5F7;
    --sheet-bg: #FFFFFF;
  }
  :root[data-theme="dark"] {
    --nav-bg: #1E1E20;
    --top-bg: #0A0A0B;
    --sheet-bg: #1C1C1E;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --nav-bg: #1E1E20;
      --top-bg: #0A0A0B;
      --sheet-bg: #1C1C1E;
    }
  }
}