/* Miku Family x Catppuccin Mocha Color Scheme for Butterfly Theme */
/* Light: 初音未来家族应援色 | Dark: Catppuccin Mocha */

/* === CSS Variables === */
:root {
  /* 初音未来家族应援色 (Light Mode) */
  --ctp-rosewater: #e12885; /* 巡音流歌 粉 */
  --ctp-flamingo: #e12885;
  --ctp-pink: #e12885;
  --ctp-mauve: #33ccbb; /* 初音未来 青 */
  --ctp-red: #e12885;
  --ctp-maroon: #e12885;
  --ctp-peach: #ffcc11; /* 镜音铃连 黄 */
  --ctp-yellow: #ffcc11;
  --ctp-green: #33ccbb;
  --ctp-teal: #33ccbb;
  --ctp-sky: #00a0e9; /* KAITO 蓝 */
  --ctp-sapphire: #00a0e9;
  --ctp-blue: #00a0e9;
  --ctp-lavender: #33ccbb;
  --ctp-text: #2c3e50;
  --ctp-subtext1: #4a5568;
  --ctp-subtext0: #6c7086;
  --ctp-overlay2: #7c7f93;
  --ctp-overlay1: #8c8fa1;
  --ctp-overlay0: #9ca0b0;
  --ctp-surface2: #acb0be;
  --ctp-surface1: #d5e8e6;
  --ctp-surface0: #e8f5f3;
  --ctp-base: #f5fffe;
  --ctp-mantle: #eaf8f6;
  --ctp-crust: #d9f0ed;
}

[data-theme="dark"] {
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-sky: #89dceb;
  --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay2: #9399b2;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
}

/* === Global === */
body,
#web_bg {
  background-color: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}

/* === Typography === */
p, li, td, th, span, div,
.post-content,
#article-container,
.aside-content,
#content-inner {
  color: var(--ctp-text) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ctp-text) !important;
}

.post-meta-date,
.post-meta-categories,
.post-meta span,
time {
  color: var(--ctp-subtext0) !important;
}

small, .post-count, .aside-count {
  color: var(--ctp-subtext1) !important;
}

/* === Links === */
a {
  color: var(--ctp-blue) !important;
}

a:hover {
  color: var(--ctp-sapphire) !important;
}

#article-container a {
  color: var(--ctp-blue) !important;
  border-bottom-color: var(--ctp-blue) !important;
}

#article-container a:hover {
  color: var(--ctp-sapphire) !important;
  border-bottom-color: var(--ctp-sapphire) !important;
}

/* === Navigation === */
#nav {
  background: rgba(51, 204, 187, 0.95) !important;
}

#nav a,
#nav .site-name,
#nav .menus_items span,
#nav .menus_items i,
#nav i,
#toggle-menu {
  color: #fff !important;
}

#nav.fixed {
  background: rgba(51, 204, 187, 0.92) !important;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] #nav {
  background: var(--ctp-crust) !important;
}

[data-theme="dark"] #nav a,
[data-theme="dark"] #nav .site-name,
[data-theme="dark"] #nav .menus_items span,
[data-theme="dark"] #nav .menus_items i,
[data-theme="dark"] #nav i,
[data-theme="dark"] #toggle-menu {
  color: var(--ctp-text) !important;
}

[data-theme="dark"] #nav.fixed {
  background: rgba(17, 17, 27, 0.9) !important;
}

/* === Cards === */
#aside-content .card-widget,
#recent-posts > .recent-post-item,
.layout > div:first-child:not(.recent-posts),
#page, #post,
.card-widget,
.search-dialog,
.search-dialog .search-result-container {
  background: #fff !important;
  color: var(--ctp-text) !important;
  box-shadow: 0 2px 12px rgba(51, 204, 187, 0.08) !important;
}

[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] .layout > div:first-child:not(.recent-posts),
[data-theme="dark"] #page, [data-theme="dark"] #post,
[data-theme="dark"] .card-widget,
[data-theme="dark"] .search-dialog,
[data-theme="dark"] .search-dialog .search-result-container {
  background: var(--ctp-mantle) !important;
  box-shadow: none !important;
}

.card-widget .item-headline,
.card-widget .card-info {
  color: var(--ctp-text) !important;
}

/* Post cards on homepage */
#recent-posts .recent-post-item .recent-post-info .article-title {
  color: var(--ctp-text) !important;
}

#recent-posts .recent-post-item .recent-post-info .content {
  color: var(--ctp-subtext0) !important;
}

/* === Buttons === */
#rightside > div > button,
#rightside > div > a,
#to-top,
.btn-beautify {
  background: #33ccbb !important;
  color: #fff !important;
}

#rightside > div > button:hover,
#rightside > div > a:hover,
#to-top:hover {
  background: #00a0e9 !important;
}

[data-theme="dark"] #rightside > div > button,
[data-theme="dark"] #rightside > div > a,
[data-theme="dark"] #to-top,
[data-theme="dark"] .btn-beautify {
  background: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
}

[data-theme="dark"] #rightside > div > button:hover,
[data-theme="dark"] #rightside > div > a:hover,
[data-theme="dark"] #to-top:hover {
  background: var(--ctp-surface1) !important;
}

/* Pagination */
#pagination .page-number.current {
  background: var(--ctp-mauve) !important;
  color: var(--ctp-base) !important;
}

#pagination .page-number {
  color: var(--ctp-text) !important;
}

/* === Tags & Categories === */
.card-tag-cloud a,
#tag-cloud-list a,
a.tag-list-link {
  color: var(--ctp-mauve) !important;
}

.category-list a {
  color: var(--ctp-blue) !important;
}

/* === Code Blocks === */
figure.highlight,
pre {
  background: #f0faf9 !important;
  color: #2c3e50 !important;
  border: 1px solid rgba(51, 204, 187, 0.15) !important;
}

figure.highlight .line,
figure.highlight .code pre,
figure.highlight .code pre span {
  color: #2c3e50 !important;
}

code {
  background: rgba(51, 204, 187, 0.1) !important;
  color: #33ccbb !important;
}

figure.highlight .gutter pre {
  color: #acb0be !important;
}

[data-theme="dark"] figure.highlight,
[data-theme="dark"] pre {
  background: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface0) !important;
}

[data-theme="dark"] figure.highlight .line,
[data-theme="dark"] figure.highlight .code pre,
[data-theme="dark"] figure.highlight .code pre span {
  color: var(--ctp-text) !important;
}

[data-theme="dark"] code {
  background: var(--ctp-surface0) !important;
  color: var(--ctp-mauve) !important;
}

[data-theme="dark"] figure.highlight .gutter pre {
  color: var(--ctp-overlay0) !important;
}

/* Highlight syntax colors */
.highlight .keyword,
.highlight .built_in { color: var(--ctp-mauve) !important; }
.highlight .string,
.highlight .regexp { color: var(--ctp-green) !important; }
.highlight .number,
.highlight .literal { color: var(--ctp-peach) !important; }
.highlight .comment { color: var(--ctp-overlay0) !important; }
.highlight .function_ { color: var(--ctp-blue) !important; }
.highlight .class_,
.highlight .title { color: var(--ctp-yellow) !important; }
.highlight .params { color: var(--ctp-maroon) !important; }
.highlight .attr { color: var(--ctp-yellow) !important; }
.highlight .variable { color: var(--ctp-flamingo) !important; }
.highlight .operator { color: var(--ctp-sky) !important; }
.highlight .property { color: var(--ctp-blue) !important; }
.highlight .type { color: var(--ctp-yellow) !important; }

/* === Scrollbar === */
::-webkit-scrollbar-thumb {
  background: #33ccbb !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #00a0e9 !important;
}

::-webkit-scrollbar-track {
  background: var(--ctp-base) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--ctp-surface2) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--ctp-overlay0) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--ctp-mantle) !important;
}

/* === Footer === */
#footer {
  background: #33ccbb !important;
  color: #fff !important;
}

#footer a,
#footer .footer-copyright,
#footer .footer_custom_text {
  color: #fff !important;
}

[data-theme="dark"] #footer {
  background: var(--ctp-crust) !important;
  color: var(--ctp-subtext0) !important;
}

[data-theme="dark"] #footer a,
[data-theme="dark"] #footer .footer-copyright,
[data-theme="dark"] #footer .footer_custom_text {
  color: var(--ctp-subtext1) !important;
}

/* === TOC === */
.toc-link.active {
  color: var(--ctp-mauve) !important;
}

.toc-link {
  color: var(--ctp-subtext0) !important;
}

/* === Selection === */
::selection {
  background: rgba(51, 204, 187, 0.3) !important;
  color: #2c3e50 !important;
}

[data-theme="dark"] ::selection {
  background: var(--ctp-lavender) !important;
  color: var(--ctp-crust) !important;
}

/* === Blockquote === */
blockquote {
  border-left-color: #33ccbb !important;
  background: rgba(51, 204, 187, 0.06) !important;
  color: #2c3e50 !important;
}

[data-theme="dark"] blockquote {
  border-left-color: var(--ctp-lavender) !important;
  background: var(--ctp-surface0) !important;
  color: var(--ctp-subtext1) !important;
}

/* === HR === */
hr {
  border-color: var(--ctp-surface1) !important;
}

/* === Header/Banner === */
#page-header #site-info .site-name {
  color: #fff !important;
}

#page-header #site-info .site-subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] #page-header #site-info .site-name {
  color: var(--ctp-text) !important;
}

[data-theme="dark"] #page-header #site-info .site-subtitle {
  color: var(--ctp-subtext0) !important;
}

/* === Sidebar === */
.card-announcement .content {
  color: var(--ctp-subtext0) !important;
}

.card-author .author-info__name {
  color: var(--ctp-text) !important;
}

.card-author .author-info__description {
  color: var(--ctp-subtext0) !important;
}

.card-author .button--animated {
  background: #33ccbb !important;
  color: #fff !important;
  border: none !important;
}

/* === Archives/List === */
.article-sort-item .article-sort-item-info .article-sort-title {
  color: var(--ctp-text) !important;
}

.article-sort-item .article-sort-item-time {
  color: var(--ctp-subtext0) !important;
}

/* === Search === */
.search-dialog .search-nav .search-close-button {
  color: var(--ctp-text) !important;
}

.search-dialog input {
  background: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface1) !important;
}

/* === Table === */
table thead {
  background: var(--ctp-surface0) !important;
}

table tr:nth-child(even) {
  background: var(--ctp-mantle) !important;
}

table td, table th {
  border-color: var(--ctp-surface1) !important;
  color: var(--ctp-text) !important;
}

/* === Dark mode specific fixes === */
[data-theme="dark"] #nav {
  background: var(--ctp-crust) !important;
}

[data-theme="dark"] #page-header {
  background-color: var(--ctp-crust) !important;
}

[data-theme="dark"] .card-author .button--animated {
  background: var(--ctp-mauve) !important;
  color: var(--ctp-crust) !important;
}

[data-theme="dark"] #pagination .page-number.current {
  color: var(--ctp-crust) !important;
}

/* === Images: no darkening in light mode === */
img {
  filter: none !important;
  opacity: 1 !important;
}

[data-theme="dark"] img {
  filter: brightness(0.9) !important;
}