/*
 * MatchMio 设计令牌 v1.3.5 — 2026-10-09
 * 配套标准：设计规范.md。这里只声明变量，不给归档原型注入样式。
 * 网页：在组件样式之前引入。小程序及其他平台：按语义映射。
 */
:root {
  /* 原型核心色值，必须沿用。 */
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #1a1d23;
  --ink-2: #5b6270;
  --ink-3: #9aa1af;
  --line: #e8eaee;
  --brand: #4f46e5;
  --brand-soft: #eef0fe;
  --green: #0f9d6c;
  --green-soft: #e7f6f0;
  --amber: #b45309;
  --amber-soft: #fdf3e3;
  --red: #e0455a;
  --brand-hover: #4338ca;

  /* 正式交付补充：同色系的可读文字，详见规范第 10 节。 */
  --ink-muted-readable: var(--ink-2);
  --green-ink: #087950;
  --red-ink: #c62f45;

  /* 页头及装饰封面；彩色封面不承担状态含义。 */
  --hero-gradient: linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #7c6cf0 100%);
  --cover-indigo: linear-gradient(135deg, #c7d2fe, #e0e7ff);
  --cover-pink: linear-gradient(135deg, #fbcfe8, #fce7f3);
  --cover-mint: linear-gradient(135deg, #a7f3d0, #d1fae5);
  --cover-amber: linear-gradient(135deg, #fde68a, #fef3c7);
  --cover-blue: linear-gradient(135deg, #bfdbfe, #dbeafe);
  --cover-red: linear-gradient(135deg, #fecaca, #fee2e2);
  --cover-lilac: linear-gradient(135deg, #ddd6fe, #ede9fe);
  --cover-teal: linear-gradient(135deg, #99f6e4, #ccfbf1);

  /* v1.3.3：网页运营区纯色装饰，复用既有封面的浅色端点。 */
  --operation-bg-indigo: #e0e7ff;
  --operation-bg-lilac: #ede9fe;
  --operation-bg-blue: #dbeafe;
  --operation-bg-amber: #fef3c7;
  --operation-bg-mint: #d1fae5;
  --operation-motion-orbit: 36s;
  --operation-motion-drift: 8s;
  --operation-motion-travel: 6px;

  --font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-size-badge: 11px;
  --font-size-hint: 11.5px;
  --font-size-caption: 12px;
  --font-size-card-link: 12.5px;
  --font-size-small: 13px;
  --font-size-body: 14px;
  --font-size-subtitle: 15px;
  --font-size-list-title: 15.5px;
  --font-size-card-title: 16px;
  --font-size-section-title: 18px;
  --font-size-metric: 22px;
  --font-size-hero-mobile: 24px;
  --font-size-hero: 32px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.6;

  --radius: 14px;
  --radius-tag: 6px;
  --radius-input: 10px;
  --radius-vote: 12px;
  --radius-modal: 18px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow: 0 1px 2px rgba(20,24,40,.04), 0 4px 16px rgba(20,24,40,.06);
  --overlay: rgba(20,24,40,.45);

  /* 保留原型的间距节奏，不改成另一套栅格。 */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-56: 56px;
  --space-60: 60px;
  --space-80: 80px;
  --space-96: 96px;

  /* v1.3：网页普通内容采用扁平表面；不覆盖小程序与浮层令牌。 */
  /* v1.3.2：网页整页纯白；--bg 继续用于控件反馈与小程序页面。 */
  --web-page-bg: var(--card);
  --web-surface-shadow: none;
  /* v1.3.4：三端同类卡片14px；连续列表内部行保持直边衔接。 */
  --web-surface-radius: var(--radius);
  --web-row-radius: 0px;
  /* v1.3.5：应用信息流条目采用独立圆角表面，不与其他连续列表混用。 */
  --web-feed-row-radius: var(--radius);
  --web-row-padding: var(--space-20);
  --web-sidebar-padding: var(--space-24);

  /* v1.1：按用户要求加宽网页容器，网格最多三列。 */
  --container-max: 1320px;
  --page-gutter: 24px;
  --nav-overlap: 56px;
  --grid-card-min: 300px;
  --grid-columns-max: 3;
  --grid-gap: 18px;
  --detail-sidebar-max: 360px;
  /* v1.2：顶部统一导航和内容优先的发现页双栏。 */
  --topbar-search-width: 150px;
  --discovery-sidebar-width: 300px;
  --discovery-column-gap: 36px;
  --list-gap: 14px;
  --search-width: 200px;
  --cover-height: 120px;
  --cover-symbol-size: 52px;
  --vote-width: 56px;
  --vote-number-size: 17px;
  /* v1.2.1：用户指定的评论／推荐计数方块，网页各列表共用。 */
  --count-control-size: var(--vote-width);
  --count-control-radius: var(--radius-vote);
  --count-control-border: var(--space-2);
  --count-control-gap: var(--space-18);
  --count-control-icon-size: var(--space-16);
  /* v1.3.1：评论／推荐数字与列表辅助文字协调。 */
  --count-control-number-size: var(--font-size-small);
  --modal-width: 520px;
  --modal-max-height: 88dvh;
  --overlay-gutter: 20px;
  --touch-target-min: 44px;

  --motion-duration: 150ms;
  --motion-easing: ease;
  --card-hover-offset: -3px;
  --press-offset: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --z-nav: 2;
  --z-modal: 10;
  --z-feedback: 20;
}