/**
 * 杨CC资源站 — 主样式入口
 * iOS 26 液态玻璃 Design System
 *
 * @package YangCC
 */

@import url('tokens/color.css');
@import url('tokens/glass.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/radius.css');
@import url('tokens/motion.css');
@import url('tokens/elevation.css');

@import url('primitives/glass-panel.css');
@import url('primitives/glass-button.css');
@import url('primitives/glass-input.css');
@import url('primitives/glass-card.css');
@import url('primitives/glass-modal.css');

/* ===== Reset ===== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-family-sans);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--glass-text-primary);
	background: linear-gradient(
		175deg,
		var(--color-bg-base-start) 0%,
		#dce3ed 25%,
		var(--color-bg-base-mid) 50%,
		#eaeff6 75%,
		var(--color-bg-base-end) 100%
	);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) body {
		background: linear-gradient(
			175deg,
			var(--color-bg-base-start) 0%,
			#16181e 25%,
			var(--color-bg-base-mid) 50%,
			#1c1f26 75%,
			var(--color-bg-base-end) 100%
		);
	}
}

html[data-theme="dark"] body {
	background: linear-gradient(
		175deg,
		var(--color-bg-base-start) 0%,
		#16181e 25%,
		var(--color-bg-base-mid) 50%,
		#1c1f26 75%,
		var(--color-bg-base-end) 100%
	);
}

html[data-theme="light"] body {
	background: linear-gradient(
		175deg,
		var(--color-bg-base-start) 0%,
		#dce3ed 25%,
		var(--color-bg-base-mid) 50%,
		#eaeff6 75%,
		var(--color-bg-base-end) 100%
	);
}

a {
	text-decoration: none;
	color: inherit;
}

button {
	font-family: inherit;
	cursor: pointer;
}

input,
select,
textarea {
	font-family: inherit;
}

img {
	max-width: 100%;
	height: auto;
}

/* ===== 布局容器 ===== */
.container-glass,
.ycc-container {
	width: var(--content-width);
	max-width: var(--wp--style--global--content-size, 1080px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* ===== 页脚 ===== */
.ycc-footer {
	margin-top: var(--space-12);
	margin-bottom: var(--space-8);
	padding: var(--space-8);
	background: var(--glass-bg-panel);
	backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturate));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-xl);
	text-align: center;
	color: var(--glass-text-secondary);
}

/* ===== 归档网格 ===== */
.ycc-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-6);
	margin-bottom: var(--space-12);
}

/* ===== Hero ===== */
.ycc-hero {
	padding: var(--space-12) var(--space-8);
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
	background: var(--glass-hero-gradient);
	backdrop-filter: blur(var(--glass-blur-hero)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur-hero)) saturate(var(--glass-saturate));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-2xl);
	box-shadow: var(--elevation-3);
	text-align: center;
}

.ycc-hero__title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-extrabold);
	margin-bottom: var(--space-3);
	background: linear-gradient(135deg, var(--glass-accent) 0%, var(--glass-accent-deep) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.ycc-hero__desc {
	font-size: var(--font-size-lg);
	color: var(--glass-text-secondary);
	margin-bottom: var(--space-6);
}

.ycc-hero__actions {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* ===== 主题切换按钮（navbar 复用） ===== */
.ycc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-full);
	background: var(--glass-bg-badge);
	backdrop-filter: blur(var(--glass-blur-badge)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur-badge)) saturate(var(--glass-saturate));
	color: var(--glass-text-secondary);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-smooth),
		color var(--duration-fast) var(--ease-smooth),
		border-color var(--duration-fast) var(--ease-smooth);
}

.ycc-theme-toggle:hover {
	background: var(--glass-bg-hover);
	color: var(--glass-text-primary);
	border-color: var(--glass-border-accent);
}

.ycc-theme-toggle__icon {
	width: 18px;
	height: 18px;
}

.ycc-theme-toggle__icon--sun {
	display: block;
}

.ycc-theme-toggle__icon--moon {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .ycc-theme-toggle__icon--sun {
		display: none;
	}

	:root:not([data-theme]) .ycc-theme-toggle__icon--moon {
		display: block;
	}
}

html[data-theme="dark"] .ycc-theme-toggle__icon--sun {
	display: none;
}

html[data-theme="dark"] .ycc-theme-toggle__icon--moon {
	display: block;
}

html[data-theme="light"] .ycc-theme-toggle__icon--sun {
	display: block;
}

html[data-theme="light"] .ycc-theme-toggle__icon--moon {
	display: none;
}

/* ===== 页面过渡 ===== */
.ycc-page-enter-active,
.ycc-page-leave-active {
	transition: opacity var(--duration-normal) var(--ease-smooth);
}

.ycc-page-enter-from,
.ycc-page-leave-to {
	opacity: 0;
}

@media (max-width: 960px) {
	.ycc-hero__title {
		font-size: var(--font-size-lg);
	}
}