/* ============================================
   goBlog 自定义样式
   链接位置: templates/layouts/base.html（仅前端页面）
   注意: 此文件不参与 Tailwind 编译，勿依赖 @theme 变量
   ============================================ */

/* ---- 1. 页面背景: 点阵 + 两侧光斑 ---- */

/* 点阵: 24px 间隔、约 1px 的淡灰点，随内容平铺 */
body {
  background-color: #f9fafb; /* gray-50，与 input.css 一致 */
  background-image: radial-gradient(circle, rgba(100, 116, 139, 0.14) 1px, transparent 1.6px);
  background-size: 24px 24px;
}

/* 两侧光斑: 固定在视口的柔和低饱和渐变光晕 */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}

/* 左侧光斑（蓝色调） */
body::before {
  width: 480px;
  height: 480px;
  top: 18%;
  left: -180px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0) 70%);
}

/* 右侧光斑（紫色调） */
body::after {
  width: 560px;
  height: 560px;
  bottom: -140px;
  right: -200px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, rgba(139, 92, 246, 0) 70%);
}

/* 小屏内容占满宽度，降低光斑存在感 */
@media (max-width: 768px) {
  body::before,
  body::after {
    opacity: 0.55;
  }
}

/* ---- 2. 标签颜色（12 色，浅底深字，保证可读性） ---- */

.tag-pill {
  transition: background-color 0.15s;
}

.tag-color-0  { background-color: #ffe4e6; color: #be123c; } /* rose    */
.tag-color-0:hover  { background-color: #fecdd3; }
.tag-color-1  { background-color: #ffedd5; color: #c2410c; } /* orange  */
.tag-color-1:hover  { background-color: #fed7aa; }
.tag-color-2  { background-color: #fef3c7; color: #b45309; } /* amber   */
.tag-color-2:hover  { background-color: #fde68a; }
.tag-color-3  { background-color: #dcfce7; color: #15803d; } /* green   */
.tag-color-3:hover  { background-color: #bbf7d0; }
.tag-color-4  { background-color: #ccfbf1; color: #0f766e; } /* teal    */
.tag-color-4:hover  { background-color: #99f6e4; }
.tag-color-5  { background-color: #e0f2fe; color: #0369a1; } /* sky     */
.tag-color-5:hover  { background-color: #bae6fd; }
.tag-color-6  { background-color: #dbeafe; color: #1d4ed8; } /* blue    */
.tag-color-6:hover  { background-color: #bfdbfe; }
.tag-color-7  { background-color: #e0e7ff; color: #4338ca; } /* indigo  */
.tag-color-7:hover  { background-color: #c7d2fe; }
.tag-color-8  { background-color: #ede9fe; color: #6d28d9; } /* violet  */
.tag-color-8:hover  { background-color: #ddd6fe; }
.tag-color-9  { background-color: #fae8ff; color: #a21caf; } /* fuchsia */
.tag-color-9:hover  { background-color: #f5d0fe; }
.tag-color-10 { background-color: #fce7f3; color: #be185d; } /* pink    */
.tag-color-10:hover { background-color: #fbcfe8; }
.tag-color-11 { background-color: #f1f5f9; color: #334155; } /* slate   */
.tag-color-11:hover { background-color: #e2e8f0; }