/* ==========================================================================
   拼车信息撮合平台 / Design Tokens（唯一真相源 source of truth）
   版本 v1.3 | 2026-11-09 | 设计师 颜好看 | 团队 mvp-dev-project
   寄存器 Product | 平台轴 web（微信 H5 移动优先 + 桌面管理后台）
   三轴刻度 Variance=3 / Motion=2 / Density=5

   [硬约束 / The Token Rule]
   1. 本文件与 design-tokens.json 是唯二允许出现裸色值的位置。
      任何组件样式、页面样式、内联样式一律使用 CSS 变量引用。
   2. 四层架构：A1-identity / A1-structure / A2 / B-slot / C-extension。
      Primitive 只在 A1 与 B 声明一次；A2 与 C 一律引用上层 token。
   3. 禁止装饰性渐变、发光边框、毛玻璃、紫色到粉色渐变。
   4. 禁止弹跳缓动；prefers-reduced-motion 下全部动效降为 0.01ms。
   5. 卡片圆角上限 --radius-lg (12px)，禁止 >=24px 圆角。
   6. 禁止 border-left / border-right 超过 1px 的彩色强调条。
   7. [静态运行 / Static Preview] 纯 CSS 自定义属性，零构建 / 无预处理 / 无打包器注入 / 无远程 @import。
      静态 HTML 直开时用相对路径引入：<link rel="stylesheet" href="./tokens/design-tokens.css">
      配套 design-tokens.json 不参与运行时，禁止在页面里 fetch 或 import 它。
      外链字体不可用时由 --font-* 内置的系统中文栈兜底。
   ========================================================================== */

:root {
  /* ========== A1-identity 品牌核心（不可省略） ========== */
  --bg: #F4F7F7;              /* 页面底色：冷白偏青，避开奶油/米色带 */
  --surface: #FFFFFF;         /* 卡片 / 容器 / 弹层 */
  --surface-sunk: #E9F0EF;    /* 分区色块：用色块与分界线区分区块 */
  --fg: #122B30;              /* 主文本：深青墨，非纯黑 */
  --muted: #5E787C;           /* 副文本 / 说明 */
  --accent: #0F6E78;          /* 品牌主色：CTA / 选中 / 关键数值 */
  --border: #D7E2E1;          /* 默认边框 */

  --font-display: "Manrope", "Inter", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Manrope", "Inter", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-numeric: "Manrope", "Inter", ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
  /* Inter 仅作拉丁二级 fallback，不承担展示字体角色，避免模板化 monoculture */

  /* ========== A1-structure 布局与字阶 ========== */
  --text-xs: 0.75rem;         /* 12px 标签 / 徽章 */
  --text-sm: 0.875rem;        /* 14px 辅助信息 / 时间戳 */
  --text-base: 1rem;          /* 16px 正文基准 */
  --text-lg: 1.125rem;        /* 18px 强调正文 / 小标题 */
  --text-xl: 1.25rem;         /* 20px 卡片标题 / 区块标题 */
  --text-2xl: 1.5rem;         /* 24px 页标题 */
  --text-3xl: 2rem;           /* 32px 后台数据标题 */
  --text-4xl: 2.5rem;         /* 40px 后台指标数字 */

  --leading-body: 1.6;
  --leading-heading: 1.3;
  --leading-tight: 1.25;
  --tracking-body: 0;
  --tracking-caps: 0.08em;    /* ALL CAPS 最小 0.06em */
  --tracking-display: -0.02em;
  --weight-read: 400;
  --weight-emphasize: 510;    /* 静态字重回退 500 */
  --weight-announce: 590;     /* 静态字重回退 700 */

  --container-h5: 480px;      /* 微信 H5 内容最大宽，超宽居中 */
  --container-admin: 1280px;  /* 桌面管理后台 */
  --gutter-h5: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
  --section-y-phone: 24px;
  --section-y-tablet: 32px;
  --section-y-desktop: 48px;
  --tap-min: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ========== A2 语义与状态（有默认值，全部引用上层 token） ========== */
  --accent-on: #FFFFFF;
  --accent-hover: #0B5861;
  --accent-active: #08464E;
  --accent-rgb: 15, 110, 120;

  --success: #16794F;
  --success-soft: #E4F2EA;
  --warn: #A96A08;
  --warn-soft: #FAEEDA;
  --danger: #C23B34;
  --danger-soft: #FAE8E6;
  --info: #2A648F;
  --info-soft: #E6EFF6;

  --disabled: #93A8AA;
  --disabled-bg: #EDF2F1;
  --disabled-border: #DFE8E7;

  --shadow-ink-rgb: 18, 43, 48;   /* 由 --fg 派生的 RGB 通道，供 rgba() 引用 */

  --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;

  --radius-sm: 4px;           /* 标签 / 徽章 */
  --radius-md: 8px;           /* 按钮 / 输入框 */
  --radius-lg: 12px;          /* 卡片圆角上限 */
  --radius-xl: 16px;          /* BottomSheet / Modal */
  --radius-pill: 9999px;      /* 头像 / 胶囊 / 搜索框 */

  --border-w: 1px;
  --border-hairline: 1px solid var(--border);
  --border-divider: 1px solid var(--border-soft);
  --border-block: 1px solid var(--border-strong);

  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 2px 8px rgba(var(--shadow-ink-rgb), 0.06);
  --elev-overlay: 0 8px 24px rgba(var(--shadow-ink-rgb), 0.12);
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.28);
  --overlay-scrim: rgba(var(--shadow-ink-rgb), 0.44);

  --motion-instant: 80ms;     /* 按钮按下 / 开关 */
  --motion-fast: 150ms;       /* hover / 选中，收敛值 */
  --motion-base: 200ms;       /* 下拉 / Tab / Toast 进入 */
  --motion-slow: 300ms;       /* BottomSheet / 页面转场 */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 1200;
  --z-toast: 1300;

  /* ========== B-slot 别名（品牌必须声明） ========== */
  --fg-2: #35555A;            /* 次级文本 */
  --meta: #8CA1A3;            /* 三级前景 / 时间戳 / 浏览量 */
  --surface-warm: #FBF5E9;    /* 暖砂：仅用于积分墙 / 置顶区块，全屏占比 <10% */
  --border-soft: #ECF2F1;     /* 列表行分隔符 */
  --border-strong: #BFD1CF;   /* 区块分界线 */
  --accent-soft: #E2F0F1;     /* 浅青底：选中标签 / 次级按钮 */
  --accent-ink: #0A4B52;      /* 浅青底上的深色文字 */
  --amber: #B25E12;           /* 辅助强调：专线 / 置顶 / 积分，每屏 <=1 处 */
  --amber-soft: #FBEFDC;
  --amber-ink: #7A3D08;

  /* ========== C-extension 族一：信息类型标签（三类，必须带文字） ========== */
  --tag-type-driver-bg: var(--accent-soft);
  --tag-type-driver-fg: var(--accent-ink);
  --tag-type-driver-border: var(--accent);
  --tag-type-passenger-bg: var(--amber-soft);
  --tag-type-passenger-fg: var(--amber-ink);
  --tag-type-passenger-border: var(--amber);
  --tag-type-line-bg: var(--info-soft);
  --tag-type-line-fg: var(--info);
  --tag-type-line-border: var(--info);

  /* ========== C-extension 族二：信息状态标签（六态） ========== */
  --tag-status-active-bg: var(--success-soft);
  --tag-status-active-fg: var(--success);
  --tag-status-done-bg: var(--disabled-bg);
  --tag-status-done-fg: var(--fg-2);
  --tag-status-expired-bg: var(--surface-sunk);
  --tag-status-expired-fg: var(--disabled);
  --tag-status-pinned-bg: var(--amber-soft);
  --tag-status-pinned-fg: var(--amber-ink);
  --tag-status-review-bg: var(--warn-soft);
  --tag-status-review-fg: var(--warn);
  --tag-status-rejected-bg: var(--danger-soft);
  --tag-status-rejected-fg: var(--danger);

  /* ========== C-extension 组件专用槽位 ========== */
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-on);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-bg-active: var(--accent-active);
  --btn-secondary-bg: var(--surface);
  --btn-secondary-fg: var(--accent-ink);
  --btn-secondary-border: var(--accent);
  --btn-ghost-bg: transparent;
  --btn-ghost-fg: var(--fg-2);
  --btn-danger-bg: var(--danger);
  --btn-danger-fg: var(--accent-on);
  --btn-disabled-bg: var(--disabled-bg);
  --btn-disabled-fg: var(--disabled);
  --btn-disabled-border: var(--disabled-border);

  --input-bg: var(--surface);
  --input-fg: var(--fg);
  --input-border: var(--border);
  --input-border-focus: var(--accent);
  --input-border-error: var(--danger);
  --input-bg-disabled: var(--disabled-bg);
  --input-fg-disabled: var(--disabled);
  --input-placeholder: var(--meta);

  --card-bg: var(--surface);
  --card-fg: var(--fg);
  --card-border: var(--border);
  --card-border-hover: var(--accent);

  --tab-active-fg: var(--accent-ink);
  --tab-active-indicator: var(--accent);
  --tab-inactive-fg: var(--muted);

  --toast-bg: var(--fg);
  --toast-fg: var(--surface);
  --empty-fg: var(--muted);
  --skeleton-bg: var(--surface-sunk);
}

/* ========== 可选基础层（引入本文件即生效） ========== */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0.01ms;
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}