/* Luwi 官网 — 站点外框 (下载页与宣传页共用)
 *
 * 顶栏 / 品牌 / 主 CTA / 页脚 / 浪花: 两个页面是同一套外壳, 抄两份迟早漂移
 * (哪一页多一个仓库链接、哪一页忘了 aria-current), 所以单独抽一层。
 *
 * 分层: base.css 管重置与排版 -> 本文件管站点外壳 -> download.css / promo.css 管各自的版面。
 * 颜色/尺寸/时长一律走 token。 */

/* ---------- 满屏页面 ---------- */

/* base.css 的 body 是给配色对照页用的 (浅色底 + 四周内边距), 海洋这两页改回满屏。
   具体那片海由 download.css / promo.css 各自铺, 这里只立共同的那几条。 */
body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  color: var(--color-text-on-ocean);
}

/* ---------- 顶栏 ---------- */

.topbar {
  position: relative;
  z-index: 1;
  background: var(--color-surface-card);
  border-block-end: 1px solid var(--color-border-default);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 80rem;
  margin-inline: auto;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.brand__mark {
  display: block;
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  object-fit: contain;
}
.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.topnav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition-property: color, background-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
.topnav a:hover { background: var(--color-action-secondary-hover); color: var(--color-text-primary); }
.brand:hover { color: var(--color-text-primary); }
.topnav a[aria-current="page"] { color: var(--color-text-link); }
.topnav__ext { font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* 手机上顶栏放不下五个入口: 两个仓库在底部渠道排 / 页脚里各有一份, 这里先收起,
   等宽到 48rem 再放出来 —— 否则 390px 下导航会折成两行, 把首屏往下压。 */
.topnav .topnav__repo { display: none; }
@media (min-width: 48rem) {
  .topnav .topnav__repo { display: inline-flex; }
}

/* ---------- 主 CTA (浅色胶囊) ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-control-xl);
  padding-block: var(--space-3);
  padding-inline: var(--space-8);
  background: var(--color-hero-cta-bg);
  border: 1px solid var(--color-hero-cta-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  color: var(--color-hero-cta-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition-property: background-color, box-shadow, transform;
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-out);
}
.cta:hover {
  background: var(--color-hero-cta-bg-hover);
  color: var(--color-hero-cta-text);
  box-shadow: var(--shadow-xl);
  transform: translateY(-1px);
}
.cta:active { transform: translateY(0); }
.cta__icon { width: var(--size-icon-lg); height: var(--size-icon-lg); }

.cta--ghost {
  background: transparent;
  border-color: var(--color-surface-ocean-foam-soft);
  box-shadow: none;
  color: var(--color-text-on-ocean);
  font-weight: var(--weight-medium);
}
/* 悬停必须显式写 color: base.css 里 `a:hover`(0,1,1) 比 `.cta--ghost`(0,1,0) 特指度高,
   不写就会被改成 --color-text-link-hover —— 上一轮实测过前景=背景 1.00:1 那一次 */
.cta--ghost:hover {
  background: var(--color-surface-ocean-hover);
  color: var(--color-text-on-ocean);
  box-shadow: none;
}

/* ---------- 浪花与页脚 ---------- */

.sea__waves {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 0;
  width: 100%;
  height: var(--space-24);
  pointer-events: none;
}
.sea__foot {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
  color: var(--color-text-on-ocean-muted);
  font-size: var(--text-sm);
}
.sea__foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: 80rem;
  margin-inline: auto;
}
.sea__foot a { color: var(--color-text-on-ocean); }

@media (min-width: 768px) {
  .topbar__inner { padding-inline: var(--space-8); }
  .sea__waves { height: var(--space-24); }
}

/* ---------- 二维码弹层 (下载页 / 宣传页共用) ---------- */

/* 二维码弹层: 悬停(或键盘聚焦)到按钮上时, 在该按钮正下方弹出对应的二维码。
   为什么向下而不是向上: 向上正好盖住 h1 大标题与副标题 —— 弹层遮住自己的产品名很难看;
   向下只压住版本号 / 校验值那几行小字, 而且是瞬时的。
   纯 CSS, 不靠脚本; 二维码是内联 SVG, 用 currentColor 取色, 不留字面量。 */
.cta-wrap { position: relative; display: inline-flex; }
.qr {
  position: absolute;
  inset-block-start: calc(100% + var(--space-3));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-3);          /* 这圈留白就是二维码的静默区 (>= 4 个模块宽) */
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary); /* 二维码的模块色 */
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
.qr__code { display: block; }
.qr__svg { display: block; width: var(--size-qr); height: var(--size-qr); }
.qr__cap { font-size: var(--text-xs); color: var(--color-text-secondary); }

/* 只在真有悬停能力的设备上弹: 否则触屏上第一下点按会先触发 hover, 变成"要点两次才下载" */
@media (hover: hover) {
  .cta-wrap:hover .qr,
  .cta-wrap:focus-within .qr { opacity: 1; visibility: visible; }
}