/* ============================================================================
   植迹落地页 · 设计令牌（唯一来源）

   对齐 plants/lib/core/design/tokens.dart 与 lib/core/constants/colors.dart。
   页面里不要再写死色值 / 圆角 / 间距，一律走这里的变量。

   深色模式用 CSS 的 light-dark()：一份声明同时描述浅色与深色，
   由 color-scheme 决定取哪一支。[data-theme] 只切 color-scheme，不重复写颜色。
   light-dark() 不支持的浏览器（Safari < 17.5）会退化为纯浅色页面 —— 见下面的 @supports。
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ── 品牌绿（AppColors.mainColor 及其配套档位）────────────────────────── */
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-500: #22c55e; /* AppColors.mainColor */
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-900: #0b3b22;
  --ink-green: #0b1a12; /* 「2.0」深色区块底色 */

  /* ── 语义色（浅色档；深色档在 @supports 里覆盖）──────────────────────── */
  --bg: #ffffff; /* 页面底 */
  --bg-tint: #f5f7f5; /* 交替区块底（colors.dart softBackground） */
  --surface: #ffffff; /* 卡片 */
  --surface-soft: #f5f7f5; /* 卡片内再深一档的容器 */
  --line: #e3e7e3; /* 分割线（colors.dart divider） */
  --text: #111827;
  --text-2: #6b7280; /* subtitleColor */
  --text-3: #9ca3af;
  --accent: var(--green-500);
  --accent-strong: var(--green-600);
  --accent-soft: var(--green-50);
  --accent-text: var(--green-700);
  --on-accent: #ffffff;
  --shadow-tint: rgba(17, 24, 39, 0.08);

  /* ── 圆角：全站只有 4 档（同 AppRadius）──────────────────────────────── */
  --r-control: 12px;
  --r-card: 16px;
  --r-sheet: 24px;
  --r-pill: 999px;

  /* ── 间距：4 的倍数（同 AppSpacing）──────────────────────────────────── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ── 版心 ─────────────────────────────────────────────────────────────── */
  --container: 1120px;
  --page-x: 20px;
  --section-y: 72px;

  /* ── 字形 ─────────────────────────────────────────────────────────────── */
  /* 标题用宋体类衬线：macOS/iOS 的宋体、Windows 的 SimSun、Android 的思源宋体。
     不自托管 3.2MB 的中文字库 —— 首屏代价不值当。 */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
    "SimSun", "Noto Serif CJK SC", serif;
  /* 正文用系统黑体。想跟 App 现在的「全站宋体」一致，把这一行换成 var(--font-display) 即可。 */
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* 被强调的大数字：与 App 的 PlayfairDisplay 同一个字形（本地 46KB） */
  --font-num: "Playfair Display", "Songti SC", Georgia, serif;
  --font-icon: "Phosphor";

  /* ── 投影：2.0 靠底色分层，不用重投影 ─────────────────────────────────── */
  --shadow-card: 0 1px 2px var(--shadow-tint);
  --shadow-lift: 0 1px 2px var(--shadow-tint), 0 16px 40px -24px rgba(17, 24, 39, 0.28);
  --shadow-float: 0 24px 64px -28px rgba(11, 26, 18, 0.42);

  /* ── 交互 ─────────────────────────────────────────────────────────────── */
  --tap: 44px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
}

/* light-dark() 可用时，把语义色升级成「一套声明、两种模式」 */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --bg: light-dark(#ffffff, #111827);
    --bg-tint: light-dark(#f5f7f5, #182233);
    --surface: light-dark(#ffffff, #243040);
    --surface-soft: light-dark(#f5f7f5, #2e3a4c);
    --line: light-dark(#e3e7e3, #374151);
    --text: light-dark(#111827, #ffffff);
    --text-2: light-dark(#6b7280, #9ca3af);
    --text-3: light-dark(#9ca3af, #6b7280);
    --accent: light-dark(#22c55e, #22c55e);
    --accent-strong: light-dark(#16a34a, #16a34a);
    --accent-soft: light-dark(#f0fdf4, rgba(34, 197, 94, 0.16));
    --accent-text: light-dark(#15803d, #4ade80);
    --shadow-tint: light-dark(rgba(17, 24, 39, 0.08), rgba(0, 0, 0, 0.5));
    --shadow-lift: 0 1px 2px var(--shadow-tint),
      0 16px 40px -24px light-dark(rgba(17, 24, 39, 0.28), rgba(0, 0, 0, 0.7));
  }
}

/* 手动切换：只动 color-scheme，颜色由上面那套自动跟随 */
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --page-x: 32px;
    --section-y: 96px;
  }
}

@media (min-width: 1120px) {
  :root {
    --page-x: 40px;
    --section-y: 112px;
  }
}