/* ============================================================
   个人主页 · 样式
   风格：微软直角扁平（Metro），茉莉深绿 + 白
   除图标圆环外，页面任何位置都不出现圆角
   ============================================================ */

/* ============================================================
   1. 配色
   想换颜色，只改「亮色」那一段就够了；暗色用同一批变量名重新赋一遍值。
   顶栏用的是 --accent / --on-accent。
   ============================================================ */

/* ---------- 亮色（默认） ---------- */
:root {
  --bg:        #ffffff;  /* 页面底色 */
  --fg:        #1b4332;  /* 正文文字 */
  --icon:      #000000;  /* 图标图案，悬停时也用作圆环填充色 */
  --on-icon:   #ffffff;  /* 悬停反相后的图案色 */
  --line:      #d8e3dd;  /* 圆环描边、分隔线 */
  --muted:     #52796f;  /* 爱好小字、页脚 */
  --accent:    #1b4332;  /* 顶栏底色（重点色） */
  --on-accent: #ffffff;  /* 顶栏文字 */
  --btn-line:  rgba(255, 255, 255, 0.45); /* 切换器未选中按钮的描边 */

  --tile: 72px;          /* 图标圆环直径 */

  color-scheme: light;
}

/* ---------- 暗色：跟随系统（用户没手动选亮色时生效） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #000000;  /* 纯黑底 */
    --fg:        #ffffff;
    --icon:      #ffffff;
    --on-icon:   #000000;
    --line:      #2d6a4f;
    --muted:     #a9c4b8;
    --accent:    #1b4332;  /* 顶栏保持茉莉深绿，在纯黑上是一条清楚的绿带 */
    --on-accent: #ffffff;

    color-scheme: dark;
  }
}

/* ---------- 暗色：用户手动选了「暗色」，无视系统设置 ---------- */
:root[data-theme="dark"] {
  --bg:        #000000;
  --fg:        #ffffff;
  --icon:      #ffffff;
  --on-icon:   #000000;
  --line:      #2d6a4f;
  --muted:     #a9c4b8;
  --accent:    #1b4332;
  --on-accent: #ffffff;

  color-scheme: dark;
}

/* ============================================================
   2. 基础重置
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0; /* 直角扁平：唯一的圆角例外是下面 .tile 的圆环 */
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC",
               system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 选中文字时反相 */
::selection {
  background: var(--fg);
  color: var(--bg);
}

/* ============================================================
   3. 顶栏：整块重点色
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 18px 32px;
  background: var(--accent);
  color: var(--on-accent);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
    letter-spacing: 0.14em;
}
.brand-main {
  font-size: 19px; 
  font-weight: 700; 
}

.brand-sub {
  font-size: 0.7rem;
  opacity: 0.7;
  transform: translateY(3px);
}

/* ---------- 右上角：颜色模式切换器（图标按钮） ---------- */
.theme-switch {
  display: flex;
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--btn-line);
  border-radius: 50%;
  background: transparent;
  color: var(--on-accent);
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease;
}

.theme-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.08);
}

/* 当前主题按钮：填充反色 */
.theme-btn[aria-pressed="true"] {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--accent);
}

.theme-btn:focus-visible {
  outline: 2px solid var(--on-accent);
  outline-offset: 2px;
}

/* 太阳 / 月亮 / 显示器，按点击顺序循环 */
.theme-icon {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ============================================================
   4. 主区：图标与爱好居中
   ============================================================ */
.content {
  flex: 1; /* 撑开剩余高度，把页脚压到底部 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 48px 24px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* ---------- 图标圆环 ---------- */
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  border: 2px solid var(--line);
  border-radius: 50%; /* 唯一的圆角例外：外轮廓是正圆 */
  background: transparent;
  color: var(--icon);
  text-decoration: none;
  /* 刻意不加 transition：悬停是硬切，最贴近 Metro */
}

/* 悬停 / 按下：圆环填充反相（黑圆白图 ↔ 白圆黑图） */
.tile:hover,
.tile:active {
  background: var(--icon);
  border-color: var(--icon);
  color: var(--on-icon);
}

/* 键盘 Tab 聚焦 */
.tile:focus-visible {
  outline: 2px solid var(--icon);
  outline-offset: 3px;
}

.tile-icon {
  display: block;
  width: 32px;
  height: 32px;
  fill: currentColor; /* 颜色跟随 .tile，反相自动生效 */
}

/* ---------- 爱好小字 ---------- */
.hobbies {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-align: center;
}

/* ============================================================
   5. 页脚
   ============================================================ */
.site-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.site-footer p {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ============================================================
   6. 窄屏适配
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --tile: 60px;
  }

  .site-header {
    padding: 14px 20px;
  }

  .brand {
    font-size: 15px;
  }

  .theme-btn {
    width: 32px;
    height: 28px;
  }

  .theme-icon {
    width: 14px;
    height: 14px;
  }

  .content {
    gap: 36px;
    padding: 40px 20px;
  }

  .links {
    gap: 14px;
  }

  .tile-icon {
    width: 26px;
    height: 26px;
  }

  .hobbies {
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .site-footer {
    padding: 16px 20px;
  }
}