/* =======================================================
 * base.css · 基础样式
 * =======================================================
 *
 * 【作用】
 *   定义全站最基础的样式：
 *     1. Reset（抹平不同浏览器的默认差异）
 *     2. html / body 的基础设定
 *     3. 星空背景
 *     4. 通用元素（链接、按钮）的默认样式
 *
 * 【加载顺序】
 *   必须在 theme.css 之后加载，
 *   因为这里用到了 theme.css 里定义的变量。
 *
 * 【修改须知】
 *   ⚠️ Reset 部分不要随意改，会影响全站
 *   ⚠️ 背景（.starfield）改动谨慎，所有页面都依赖它
 *   ⚠️ 颜色/字号必须从 theme.css 取值，不硬编码
 * ======================================================= */


/* =====================================================
 * 一、Reset（浏览器默认样式清零）
 * =====================================================
 * 不同浏览器的默认边距、盒模型都不一样。
 * 这里统一切成"零起点"，后面样式才可控。
 * --------------------------------------------------- */

* {
  /* 盒模型：width 包含 padding 和 border
   * 默认是 content-box（width 不含 padding），
   * 布局时容易算错。border-box 更符合直觉。 */
  box-sizing: border-box;

  /* 清零浏览器默认的外边距和内边距 */
  margin: 0;
  padding: 0;

  /* 移动端点击元素时的高亮方块，去掉更干净 */
  -webkit-tap-highlight-color: transparent;
}


/* =====================================================
 * 二、HTML / Body 基础
 * =====================================================
 * 定义页面的根容器。
 * --------------------------------------------------- */

/* html 和 body 都撑满，让 min-height: 100vh 生效 */
html, body {
  height: 100%;
}

body {
  /* 页面底色（最暗的一档） */
  background: var(--bg-0);

  /* 全局文字色和字体 */
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);

  /* 至少撑满整个视口，内容少时不会"半截" */
  min-height: 100vh;

  /* 防止内容横向溢出出现横向滚动条 */
  overflow-x: hidden;

  /* 让内部绝对定位元素以此为参照 */
  position: relative;
}


/* =====================================================
 * 三、星空背景
 * =====================================================
 * 全站的视觉基调。
 *
 * 分两层：
 *   .starfield            → 底色渐变 + 柔和光晕
 *   .starfield::before    → 撒星点
 *
 * 为什么用纯 CSS？
 *   1. 零图片请求，加载最快
 *   2. 分辨率无关，任何屏幕都清晰
 *   3. 改动只动代码，不用重新切图
 *
 * 为什么 fixed？
 *   固定在屏幕上，内容滚动时背景不动，有"置身太空"的感觉。
 * --------------------------------------------------- */

.starfield {
  position: fixed;

  /* inset: 0 是 top/right/bottom/left 全为 0 的简写
   * 相当于铺满整个屏幕 */
  inset: 0;

  /* 不吃点击事件。否则会挡住下面的按钮 */
  pointer-events: none;

  /* 放在最底层（其他内容 z-index >= 1） */
  z-index: 0;

  /* 三层叠加：
   *   1. 顶部金色微光（呼应品牌色）
   *   2. 底部青色微光（增加深度）
   *   3. 从上到下的深空渐变
   */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,197,66,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(78,205,196,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 45%, rgba(80,120,200,.06) 0%, transparent 70%),
    linear-gradient(180deg, #05070d 0%, #0a0f1a 100%);
}

/* 星点层：用伪元素避免额外 div */
.starfield::before {
  content: "";

  position: absolute;
  inset: 0;

  /* 每颗星是一个 1~2px 的圆点。
   * 用 radial-gradient 描述：
   *   "1px 1px at 20% 30%"  → 在容器 20% 30% 的位置画 1px 半径的圆
   *   "rgba(...) 50%"       → 圆心到 50% 处是不透明色
   *   "transparent 51%"     → 51% 之后透明（形成硬边缘）
   * 这是画"圆点"的经典技巧，比 box-shadow 更省事。
   */
  background-image:
    /* ---------- 普通的白星（1px）---------- */
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 25%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 95%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 10%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 25%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 55%, rgba(255,255,255,.4) 50%, transparent 51%),

    /* ---------- 亮星（2px，金色）---------- */
    radial-gradient(2px 2px at 25% 20%, rgba(245,197,66,.6) 50%, transparent 51%),
    radial-gradient(2px 2px at 75% 70%, rgba(245,197,66,.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 50% 45%, rgba(245,197,66,.4) 50%, transparent 51%);

  /* 整体透明度：避免星星太抢眼，影响阅读 */
  opacity: 1;
}


/* =====================================================
 * 四、通用元素默认样式
 * =====================================================
 * 链接、按钮的全局默认样式。
 * 组件内部可以覆盖，但默认要好看。
 * --------------------------------------------------- */

/* ---------- 链接 ---------- */
a {
  color: var(--gold-0);
  text-decoration: none;             /* 去掉下划线 */
}

a:hover {
  color: var(--gold-1);              /* 悬停时更亮的金色 */
}


/* ---------- 按钮 ---------- */
button {
  /* 按钮不继承 body 的字体，需要手动指定 */
  font-family: inherit;
  font-size: inherit;
  color: inherit;

  /* 去掉浏览器默认的按钮背景和边框 */
  background: none;
  border: none;

  /* 鼠标悬停显示手型，暗示可点击 */
  cursor: pointer;
}