/* web/styles/tokens.css
   修修鸭网页设计变量 —— 数值逐项取自小程序 app.wxss / design.md / pages/index/index.wxss
   rpx 换算：小程序 750rpx 设计稿，网页按 1px = 2rpx 取值 */

:root {
  color-scheme: light dark;

  /* 画布 (app.wxss: --theme-canvas-light / --theme-canvas-dark) */
  --canvas: #D6D6D6;
  --canvas-mid: #848892;

  /* 文字 */
  --text: #1C1C1E;
  --text-strong: #000000;
  --text-sub: #525257;
  --text-on-image: #FFFFFF;

  /* Liquid Glass 卡片 (.glass-card) */
  --glass-bg: rgba(255, 255, 255, 0.84);
  --glass-bg-pressed: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-border-top: rgba(255, 255, 255, 0.95);
  --glass-border-bottom: rgba(60, 60, 67, 0.08);
  --glass-blur: blur(28px) saturate(190%);
  --glass-shadow: 0 6px 18px -3px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.02);

  /* Inset Grouped Table (.inset-group) */
  --group-bg: rgba(255, 255, 255, 0.85);
  --group-divider: rgba(60, 60, 67, 0.08);
  --cell-pressed: rgba(0, 0, 0, 0.04);

  /* 次级按钮 / 胶囊 (.btn-secondary / .badge-tag) */
  --fill-secondary: rgba(120, 120, 128, 0.12);
  --fill-secondary-pressed: rgba(120, 120, 128, 0.22);
  --chip-bg: rgba(0, 0, 0, 0.06);
  --chip-text: rgba(24, 26, 30, 0.78);

  /* iOS 系统色 (design.md 第 4 节) */
  --blue: #007AFF;
  --blue-deep: #0066D6;
  --blue-pressed: #0062CC;
  --indigo: #5856D6;
  --purple: #AF52DE;
  --green: #34C759;
  --orange: #FF9500;
  --teal: #30B0C7;
  --mint: #00C7BE;
  --pink: #FF2D55;
  --red: #FF3B30;

  /* 主按钮 (.btn-primary) */
  --btn-primary-bg: linear-gradient(180deg, #007AFF 0%, #0066D6 100%);
  --btn-primary-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 4px 12px -2px rgba(0, 122, 255, 0.42);

  /* 圆角 (32rpx / 28rpx / 44rpx) */
  --radius-card: 16px;
  --radius-group: 14px;
  --radius-icon: 7px;
  --radius-pill: 999px;

  /* 动效 (120ms cubic-bezier(.25,1,.5,1)) */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --dur: 120ms;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

/* 深色 (app.wxss: .container.theme-dark + .theme-dark .glass-card) */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #31394D;
    --text: #F5F5F7;
    --text-strong: #FFFFFF;
    --text-sub: #A1A1A6;

    --glass-bg: rgba(28, 28, 30, 0.78);
    --glass-bg-pressed: rgba(44, 44, 46, 0.9);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-top: rgba(255, 255, 255, 0.25);
    --glass-border-bottom: rgba(0, 0, 0, 0.4);
    --glass-shadow: 0 5px 18px -2px rgba(0, 0, 0, 0.6);

    --group-bg: rgba(28, 28, 30, 0.85);
    --group-divider: rgba(255, 255, 255, 0.08);
    --cell-pressed: rgba(255, 255, 255, 0.06);

    --fill-secondary: rgba(255, 255, 255, 0.12);
    --fill-secondary-pressed: rgba(255, 255, 255, 0.2);
    --chip-bg: rgba(255, 255, 255, 0.12);
    --chip-text: rgba(245, 245, 247, 0.82);
  }
}