/* ==========================================================================
 * Tooyi途易 · theme.css
 * 设计变量 + 全局基础样式
 *
 * 视觉方向：交通时刻表美学（Transit Timetable）—— 工业实用 + 极致克制
 * 两个记忆点（务必保住）：
 *   ① 班次卡左侧的「路线竖轴 + 节点圆点」，像地铁线路图的时间轴
 *   ② 所有时间数字使用等宽数字 font-variant-numeric: tabular-nums
 *
 * 约束：file:// 直接打开，禁止 CDN / 外部字体，字体一律使用本地系统栈。
 * ========================================================================== */

:root {
  /* —— 底色与表面（暖调近白） —— */
  --color-bg: #FAF9F7;
  --color-bg-sunken: #F2EFEA;
  --color-surface: #FFFFFF;
  --color-surface-2: #FCFBFA;

  /* —— 文字（近黑 / 次级灰） —— */
  --color-text: #16181D;
  --color-text-2: #3D424B;
  --color-muted: #6B7280;
  --color-faint: #9AA1AB;

  /* —— 强调色：全站仅一个（信号橙），单屏内只用于关键 CTA —— */
  --color-accent: #FF6B2C;
  --color-accent-hover: #F05A18;
  --color-accent-press: #D94E10;
  --color-accent-soft: #FFF1E8;
  --color-accent-line: #FFD5BF;

  /* —— 状态色 —— */
  --color-warn: #BA7517;      /* 待确认黄 */
  --color-warn-soft: #FCF4E4;
  --color-danger: #A32D2D;    /* 阻断红 */
  --color-danger-soft: #FBEBEB;
  --color-ok: #0F6E56;        /* 成功绿 */
  --color-ok-soft: #E8F4F1;
  --color-info: #185FA5;      /* 信息蓝 */
  --color-info-soft: #EAF1F9;

  /* 兼容架构文档中列出的旧变量名，避免迁移时两套命名打架 */
  --brand: var(--color-accent);
  --warn: var(--color-warn);
  --danger: var(--color-danger);
  --ok: var(--color-ok);

  /* —— 发丝边框（1px） —— */
  --line: rgba(0, 0, 0, .08);
  --line-strong: rgba(0, 0, 0, .14);

  /* —— 圆角：小圆角 4–10px —— */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* —— 间距 —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* —— 阴影三级（Y 偏移 2 / 8 / 24px） —— */
  --shadow-1: 0 2px 6px rgba(20, 22, 28, .05);
  --shadow-2: 0 8px 20px rgba(20, 22, 28, .08);
  --shadow-3: 0 24px 48px rgba(20, 22, 28, .14);

  /* —— 字体：本地中文系统栈 —— */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    "Source Han Sans SC", "Noto Sans CJK SC", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* —— 字号 —— */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-34: 34px;

  /* —— 动效 —— */
  --dur-fast: 160ms;   /* 微交互 150–200ms */
  --dur-base: 320ms;   /* 常规 300–400ms */
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* —— 壳层尺寸 —— */
  --statusbar-h: 44px;
  --navbar-h: 44px;
  --tabbar-h: 56px;
  --phone-w: 375px;
  --phone-h: 812px;
  --admin-sidebar-w: 220px;
  --admin-topbar-h: 56px;
}

/* ---------------------------------------------------------------- 重置 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-sunken);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

a {
  color: var(--color-info);
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* -------------------------------------------------- 排版层级（靠字重/字距） */

.pdd-h1 {
  font-size: var(--fs-24);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.pdd-h2 {
  font-size: var(--fs-20);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.pdd-h3 {
  font-size: var(--fs-17);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.pdd-title {
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: -.01em;
}

.pdd-sub {
  font-size: var(--fs-13);
  color: var(--color-muted);
}

.pdd-meta {
  font-size: var(--fs-12);
  color: var(--color-muted);
}

.pdd-caption {
  font-size: var(--fs-11);
  color: var(--color-faint);
}

/* 等宽数字：所有时间 / 分数 / 金额类数字都必须挂这个类 */
.pdd-num,
.pdd-route-time,
.pdd-clock,
time,
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.pdd-strong {
  font-weight: 600;
}

.pdd-right {
  text-align: right;
}

.pdd-center {
  text-align: center;
}

.pdd-mono-strong {
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---------------------------------------------------------- 可访问性 */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.pdd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- 工具类 */

.pdd-divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: var(--sp-3) 0;
}

.pdd-gap {
  height: var(--sp-2);
}

.pdd-spacer {
  flex: 1 1 auto;
}

.pdd-row-flex {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.pdd-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.pdd-wrap {
  flex-wrap: wrap;
}

.pdd-mt-1 { margin-top: var(--sp-1); }
.pdd-mt-2 { margin-top: var(--sp-2); }
.pdd-mt-3 { margin-top: var(--sp-3); }
.pdd-mt-4 { margin-top: var(--sp-4); }
.pdd-mt-6 { margin-top: var(--sp-6); }
.pdd-mb-2 { margin-bottom: var(--sp-2); }
.pdd-mb-3 { margin-bottom: var(--sp-3); }

/* ------------------------------------------- 入场动效（错峰序列 3–6 组） */
/* 默认关闭；仅在用户未要求减弱动效时启用 */

.pdd-anim {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pdd-rise {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes pdd-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes pdd-pop {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes pdd-spin {
    to { transform: rotate(360deg); }
  }

  .pdd-anim {
    animation: pdd-rise var(--dur-slow) var(--ease) both;
  }

  .pdd-anim[data-seq="1"] { animation-delay: 60ms; }
  .pdd-anim[data-seq="2"] { animation-delay: 120ms; }
  .pdd-anim[data-seq="3"] { animation-delay: 180ms; }
  .pdd-anim[data-seq="4"] { animation-delay: 260ms; }
  .pdd-anim[data-seq="5"] { animation-delay: 340ms; }
  .pdd-anim[data-seq="6"] { animation-delay: 420ms; }

  .pdd-anim-fade { animation: pdd-fade var(--dur-base) var(--ease) both; }
  .pdd-anim-pop { animation: pdd-pop var(--dur-base) var(--ease) both; }
}