/* ==========================================================================
   夕霧恋音 · 个人系统 — 设计令牌 (Design Tokens)
   概念：私人操作系统 / HUD 面板。深空基底 + 模组配色，
   每个板块是系统里的一个"模组"，用编号、状态点、连线语言统一起来。
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
  /* ---- 基底表面 Surfaces ---- */
  --bg-void: #0a0b10;
  --bg-void-2: #0d0f16;
  --bg-panel: #12141d;
  --bg-panel-raised: #191c28;
  --bg-glass: rgba(20, 22, 32, 0.6);

  /* ---- 线与边界 ---- */
  --line: rgba(232, 234, 243, 0.09);
  --line-strong: rgba(232, 234, 243, 0.18);

  /* ---- 文本 ---- */
  --text-1: #e9eaf3;
  --text-2: #a4a9c1;
  --text-3: #6c7086;

  /* ---- 系统信号色（贯穿全站的主信号） ---- */
  --signal-violet: #8b5cf6;
  --signal-cyan: #22d3c8;

  /* ---- 模组配色 Module Tags ----
     每个板块对应一个模组编号与专属信号色，
     仅用于徽标 / 左侧强调线 / 微光，不整页换色 */
  --mod-01: #8b5cf6; /* 形而上学 */
  --mod-02: #22d3c8; /* 麻将理论 */
  --mod-03: #f0a93c; /* 药物档案 */
  --mod-04: #f0568c; /* 小说 */
  --mod-05: #4f8cff; /* 音乐 */
  --mod-06: #e14bf5; /* 插画 */
  --mod-07: #ff8a3d; /* 游戏攻略 */

  /* ---- 字体 ---- */
  --font-display: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ---- 圆角 / 阴影 / 节奏 ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --topbar-h: 64px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg-void);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* 微弱噪点 + 渐变辉光的基底纹理，取代整片纯黑 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(139, 92, 246, 0.16), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 10%, rgba(34, 211, 200, 0.10), transparent 55%),
    var(--bg-void);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; margin: 0; }
p { margin: 0 0 1em; color: var(--text-2); }

::selection { background: var(--signal-violet); color: #fff; }

/* 键盘可见焦点态 */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--signal-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.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;
}