@import "tailwindcss";
@plugin "@tailwindcss/typography";
@source "hugo_stats.json";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant reader-light (&:where(.reader-theme-light, .reader-theme-light *));
@custom-variant reader-sepia (&:where(.reader-theme-sepia, .reader-theme-sepia *));
@custom-variant reader-dark (&:where(.reader-theme-dark, .reader-theme-dark *));

/* Hamburger Menu Styles */
.spmenu {
  float: left;
  display: block;
  background: rgba(255, 255, 255, 0);
  position: relative;
  z-index: 1000;
}

.spmenu span {
  transition: all 0.3s;
  transform: rotate(0deg);
  width: 40px;
  height: 2px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
}

.spmenu .top {
  transform: translateY(-14px);
}

.spmenu .bottom {
  transform: translateY(14px);
}

.spmenu.is-open .middle {
  background: rgba(255, 255, 255, 0);
}

.spmenu.is-open .top {
  transform: rotate(-45deg) translateY(0px);
}

.spmenu.is-open .bottom {
  transform: rotate(45deg) translateY(0px);
}

/* Reader Theme: Sepia */
.reader-theme-sepia {
    background-color: #fcf6e6 !important;
    color: #433422 !important;
    border-color: #e6dec3 !important;
}

/* Sepia - Typography Overrides */
.prose.reader-theme-sepia-content {
    --tw-prose-body: #433422;
    --tw-prose-headings: #2c2216;
    --tw-prose-links: #2c2216;
    --tw-prose-bold: #2c2216;
    --tw-prose-counters: #433422;
    --tw-prose-bullets: #433422;
    --tw-prose-hr: #e6dec3;
    --tw-prose-quotes: #433422;
    --tw-prose-quote-borders: #e6dec3;
    --tw-prose-captions: #433422;
    --tw-prose-code: #433422;
    --tw-prose-pre-code: #433422;
    --tw-prose-pre-bg: #e6dec3;
    --tw-prose-th-borders: #e6dec3;
    --tw-prose-td-borders: #e6dec3;
    color: #433422 !important;
}

/* Sepia - Settings Panel */
.reader-theme-sepia #settings-panel {
    background-color: #f4ecd8 !important;
    border-color: #e6dec3 !important;
}
.reader-theme-sepia #settings-panel .text-gray-700,
.reader-theme-sepia #settings-panel .dark\:text-gray-300 {
    color: #433422 !important;
}
.reader-theme-sepia #settings-panel button {
    border-color: #e6dec3 !important;
}

/* Reader Theme: Light */
.reader-theme-light {
    background-color: #ffffff !important;
    color: #1a202c !important;
    border-color: #e5e7eb !important;
}

.reader-theme-light #settings-panel {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
}
.reader-theme-light #settings-panel .text-gray-700,
.reader-theme-light #settings-panel .dark\:text-gray-300 {
    color: #374151 !important;
}

/* Reader Theme: Dark */
.reader-theme-dark {
    background-color: #262626 !important;
    color: #ffffff !important;
    border-color: #404040 !important;
}

.reader-theme-dark #settings-panel {
    background-color: #171717 !important;
    border-color: #404040 !important;
}
.reader-theme-dark #settings-panel .text-gray-700,
.reader-theme-dark #settings-panel .dark\:text-gray-300 {
    color: #d1d5db !important;
}

/* Reader Fonts */
.reader-font-serif {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

.reader-font-sans {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Reader Font Sizes */
.reader-font-size-small {
    font-size: 0.875rem !important;
}
.reader-font-size-small p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

.reader-font-size-medium {
    font-size: 1rem !important;
}
.reader-font-size-medium p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
}

.reader-font-size-large {
    font-size: 1.25rem !important;
}
.reader-font-size-large p {
    font-size: 1.25rem !important;
    line-height: 1.8 !important;
}

/* Scroll to Top Button */
#scroll-to-top.show {
    opacity: 1;
    translate: 0;
    pointer-events: auto;
}
#scroll-to-top {
    pointer-events: none;
}

/* ==========================================
   Custom Colors
   ========================================== */

/* 1. 网站名称：浅色模式黑色 */
header nav > div:first-child > a {
    color: #000000 !important;
}

/* 2. 桌面导航栏：主页、标签均为黑色 */
#mobileMenu a {
    color: #000000 !important;
}

/* 3. 移动端抽屉菜单：保持黑色 */
#menu-drawer a {
    color: #000000 !important;
}

/* 4. 文章标题：浅色模式黑色 */
a[href*="/post/"] {
    color: #000000 !important;
}

/* 5. 正文中的标签：浅色模式青绿色 */
a[href*="/tags/"] {
    color: #72B8BD !important;
}

/* ==========================================
   Dark Mode
   ========================================== */

/* 网站名称 */
.dark header nav > div:first-child > a {
    color: #ffffff !important;
}

/* 桌面导航栏 */
.dark #mobileMenu a {
    color: #ffffff !important;
}

/* 移动端抽屉菜单 */
.dark #menu-drawer a {
    color: #ffffff !important;
}

/* 文章标题 */
.dark a[href*="/post/"] {
    color: #ffffff !important;
}

/* 正文中的标签 */
.dark a[href*="/tags/"] {
    color: #C92C6D !important;
}



/* ==========================
   Typography — Literary Style
   ========================== */

@import url("https://fonts.googleapis.com/css2?family=GFS+Didot&family=Zen+Old+Mincho&family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Serif+HK:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@400;500;600;700&display=swap");

/* 全站基础字体 */
html,
body {
  font-family:
    "GFS Didot",
    "Zen Old Mincho",
    "Noto Serif SC",
    "Noto Serif HK",
    serif;
}

/* 正文 */
#article-content,
#article-content p,
#article-content li,
.prose {
  font-family:
    "GFS Didot",
    "Zen Old Mincho",
    "Noto Serif SC",
    "Noto Serif HK",
    serif;
}

/* 文章标题 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    "GFS Didot",
    "Zen Old Mincho",
    "Noto Serif SC",
    "Noto Serif HK",
    serif;
}

/* 站点名称与导航栏：统一使用文学衬线字体 */
header,
header a,
header nav,
header nav a,
nav,
nav a {
  font-family:
    "GFS Didot",
    "Zen Old Mincho",
    "Noto Serif SC",
    "Noto Serif HK",
    serif;
  font-weight: 800;
}

/* 按钮、表单 */
button,
input,
select,
textarea {
  font-family:
    "Noto Sans SC",
    sans-serif;
}

/* 正文字重加粗 */
#article-content,
#article-content p,
#article-content li,
.prose {
  font-weight: 550;
}

/* 深色模式保持相同字重 */
.dark #article-content,
.dark #article-content p,
.dark #article-content li,
.dark .prose {
  font-weight: 550;
}


/* =================================
   AO3 风格文学封面 · Literary Archive
   Warm Ivory & Burgundy
   ================================= */

/* 封面主体：暖调纸白 */
.literary-cover {
  width: 8rem;
  height: 11rem;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  background: #F7F3F0;
  color: #990000;
  border: 1px solid #DCCBC5;
  overflow: hidden;
}

/* 内层边框 */
.literary-cover-inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(153, 0, 0, 0.18);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 顶部刊头 */
.literary-cover-label {
  font-family: "GFS Didot", "Zen Old Mincho",
    "Noto Serif SC", "Noto Serif HK", serif;
  font-size: 6px;
  line-height: 2.6;
  letter-spacing: 1px;
  font-weight: 400;
  color: #B97878;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 中央状态标题 */
.literary-cover-title {
  font-family: "GFS Didot", "Zen Old Mincho",
    "Noto Serif SC", "Noto Serif HK", serif;
  font-size: 12px;
  line-height: 2.8;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: #990000;
  margin-top: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* 标题下方的细分隔线 */
.literary-cover-divider {
  width: 22px;
  height: 1px;
  flex-shrink: 0;
  background: #B97878;
  margin: 2px auto 0;
}

/* 底部档案标识 */
.literary-cover-number {
  margin-top: auto;
  padding-top: 8px;
  font-family: "GFS Didot", "Zen Old Mincho", serif;
  font-size: 8px;
  line-height: 2.8;
  letter-spacing: 0.7px;
  font-weight: 500;
  color: #B97878;
  text-align: center;
  overflow-wrap: anywhere;
  flex-shrink: 0;
}


/* ==========================================
   单篇文章封面 · Warm Ivory & Burgundy
   ========================================== */

.literary-cover-single {
  width: 10rem;
  height: 13rem;
  padding: 9px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #F7F3F0;
  color: #990000;
  border: 1px solid #DCCBC5;
}

.literary-cover-single .literary-cover-inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(153, 0, 0, 0.18);
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
}

.literary-cover-single .literary-cover-label {
  flex-shrink: 0;
  font-family: "GFS Didot", "Zen Old Mincho",
    "Noto Serif SC", "Noto Serif HK", serif;
  font-size: 7px;
  line-height: 1.8;
  letter-spacing: 1px;
  font-weight: 400;
  color: #B97878;
  text-align: center;
  white-space: nowrap;
}

.literary-cover-single .literary-cover-middle {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.literary-cover-single .literary-cover-status {
  margin: 0;
  flex-shrink: 0;
  font-family: "GFS Didot", "Zen Old Mincho",
    "Noto Serif SC", "Noto Serif HK", serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #990000;
  text-align: center;
  white-space: nowrap;
}

.literary-cover-single .literary-cover-divider {
  width: 26px;
  height: 1px;
  flex-shrink: 0;
  background: #B97878;
  margin: 2px auto 0;
}

.literary-cover-single .literary-cover-number {
  margin-top: auto;
  padding-top: 8px;
  flex-shrink: 0;
  font-family: "GFS Didot", "Zen Old Mincho", serif;
  font-size: 6px;
  line-height: 1.8;
  letter-spacing: 1px;
  font-weight: 400;
  color: #B97878;
  text-align: center;
}