@layer base {
	body {
		color: var(--color-text-body);
		background-color: var(--color-bg-body);
	}

	a {
		color: var(--color-link);
	}

	a:hover {
		color: var(--color-link-hover);
	}
}

@layer utilities {
	.required {
		color: var(--color-primary);
	}
}

@layer components {
	/* ===== Footer / Header ===== */
	.site-footer {
		background-color: var(--color-foreground-muted);
		color: var(--color-foreground);
	}

	.site-footer a {
		color: inherit;
	}

	.site-footer a:hover {
		opacity: var(--optical-muted);
	}

	.site-footer .bottom {
		background-color: var(--color-foreground-soft);
		color: var(--color-background);
	}

	.site-footer h2,
	.site-footer h3,
	.site-footer h4 {
		display: inline-block;
		padding-bottom: var(--space-xxs);
		background-image: linear-gradient(
			to right,
			var(--color-foreground-muted),
			transparent
		);
		background-size: 100% 2px;
		background-repeat: no-repeat;
		background-position: 0 100%;
	}

	.site-footer h2::before,
	.site-footer h3::before,
	.site-footer h4::before {
		opacity: var(--optical-muted);
	}

	.rlc-header {
		background-color: var(--color-background);
		box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	}

	/* ===== Topbar / Announcement ===== */
	.announcement,
	.tagline {
		background-color: var(--color-surface-alt);
		color: var(--color-muted);
	}

	.tagline:hover {
		background-color: var(--color-surface);
	}

	.rlc-topbar {
		background-color: var(--color-secondary);
		color: var(--color-secondary-contrast);
	}

	.rlc-topbar a {
		color: inherit;
	}

	.rlc-topbar-search .search-toggle::before {
		color: var(--color-secondary-contrast);
	}

	/* ===== Hotline / CTA ===== */
	.hotline {
		background-color: var(--color-surface);
		border: 1px solid var(--color-primary);
	}

	.hotline a {
		color: var(--color-secondary);
		text-decoration: none;
		font-weight: var(--fw-semibold);
	}

	.hotline:hover {
		background-color: var(--color-primary);
	}

	.hotline:hover a {
		color: var(--color-primary-contrast);
	}

	.cta {
		background-color: var(--color-primary);
	}

	.cta a {
		color: var(--color-primary-contrast);
		text-decoration: none;
		font-weight: var(--fw-semibold);
	}

	.cta:hover {
		background-color: var(--color-secondary);
		box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
	}

	.cta:hover a {
		color: var(--color-secondary-contrast);
	}

	.cta:active {
		box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
	}

	/* ===== Search ===== */
	.search-box {
		background-color: var(--color-surface);
	}

	.search-box .search-field {
		color: var(--color-foreground);
	}
	.search-box .search-field:focus {
		border-color:var(--color-primary);
	}
	.search-box .search-submit {
		background-color: var(--color-secondary);
		color: var(--color-secondary-contrast);
	}

	.search-box .search-submit:hover {
		background-color: var(--color-primary);
		box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	}
	.thumb a:focus img,
	.thumb a:focus-visible img {
		opacity: 0.85;
	}
	.slider .slide-nav .dot {
	background-color: color-mix(
		in srgb,
		var(--color-primary) 50%,
		transparent
	);
	opacity: var(--optical-muted);
	}

	.slider .slide-nav .dot.active {
	background-color: var(--color-surface);
	opacity: var(--optical-strong);
	}

	.slider .slide-nav .dot:hover {
	background-color: var(--color-surface);
	opacity: var(--optical-default);
	}

	/* ===== Hero ===== */
	#hero-slider .slide::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--color-foreground) 65%, transparent),
			color-mix(in srgb, var(--color-foreground) 35%, transparent),
			transparent
		);
	}
	.hero-inner .block-soft {
		background: color-mix(
			in srgb,
			var(--color-background) 35%,
			transparent
		);
	}
	.hero-title {
		color: var(--color-background);
	}

	.hero-desc {
		color: color-mix(in srgb, var(--color-background) 85%, transparent);
	}

	.highlight {
		color: var(--color-primary);
	}

	.hero-badge {
		background-color: var(--color-secondary);
		color: var(--color-secondary-contrast);
	}

	.hero-btn {
		background-color: var(--color-primary);
		color: var(--color-primary-contrast);
	}

	.hero-btn:hover {
		background-color: var(--color-secondary);
		color: var(--color-secondary-contrast);
	}

	/* ===== Navigation ===== */
	.main-navigation {
		background-color: var(--color-background);
	}

	.main-navigation a {
		color: var(--color-foreground);
	}

	.main-navigation a:hover,
	.main-navigation a:focus {
		background-color: color-mix(
			in srgb,
			var(--color-primary) 12%,
			var(--color-surface)
		);
		color: var(--color-primary);
	}

	.main-navigation ul.sub-menu {
		background-color: var(--color-surface-alt);
		border: var(--border-default);
	}

	.navigation .page-numbers {
		background-color: var(--color-primary);
		color: var(--color-primary-contrast);
	}

	.navigation .page-numbers.current,
	.navigation a.page-numbers:hover {
		background-color: var(--color-secondary);
		color: var(--color-secondary-contrast);
	}

	/* ===== Posts / Widgets ===== */
	.rlc-post-item,
	.featured-item-line {
		overflow: hidden;
		background-color: var(--color-background);
		border: 1px solid var(--color-border);
	}

	.rlc-post-item {
		color: var(--post-fore, var(--color-foreground));
	}

	.rlc-post-item .entry-title a {
		color: var(--post-title, var(--color-link));
	}

	.rlc-post-item .entry-title a:hover {
		color: var(--post-title-hover, var(--color-primary));
	}

	.rlc-post-item .excerpt {
		color: var(--post-excerpt, var(--color-muted));
	}

	.rlc-post-item.is-overlay {
		border: none;
	}

	.rlc-post-item.is-overlay .content {
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--color-primary) 85%, transparent),
			transparent
		);
	}

	.rlc-post-item.is-overlay .content .excerpt,
	.rlc-post-item.is-overlay .content .date,
	.rlc-post-item.is-overlay .content a {
		color: var(--color-primary-contrast);
	}

	.rlc-posts,
	.homepage-widget,
	.sidebar-widget {
		background-color: var(--color-surface);
		color: var(--color-foreground);
	}

	.homepage-widget a,
	.sidebar-widget a {
		color: var(--color-link);
	}

	.homepage-widget a:hover,
	.sidebar-widget a:hover {
		color: var(--color-link-hover);
	}

	.homepage-widget h2,
	.sidebar h2,
	.sidebar h3 {
		background-color: var(--color-primary);
		color: var(--color-primary-contrast);
	}

	/* ===== Meta / Text ===== */
	.author,
	.date,
	.comments,
	.views,
	.category-badge,
	.tag-badge,
	.author a,
	.category-badge a,
	.tag-badge a,
	.meta-post,
	.meta-post span::before,
	figcaption {
		color: var(--color-muted);
	}

	blockquote {
		background-color: var(--color-quote-background);
		color: var(--color-foreground);
		border-left-color: var(--color-primary);
	}

	code {
		background-color: var(--color-surface-alt);
		color: var(--color-foreground);
		border-color: var(--color-border);
	}

	pre {
		background-color: var(--color-surface);
		color: var(--color-foreground);
		border-color: var(--color-border);
	}

	/* ===== Breadcrumb ===== */
	.breadcrumb {
		color: var(--color-muted);
	}

	.breadcrumb a {
		color: var(--color-muted);
		text-decoration: none;
		transition: color .15s ease;
	}

	.breadcrumb a:hover {
		color: var(--color-link-hover);
	}

	.breadcrumb li + li::before {
		color: var(--color-border);
	}

	.breadcrumb [aria-current="page"] {
		color: var(--color-foreground);
		font-weight: var(--fw-medium);
	}

	/* ===== Comments (skin-related) ===== */
	.comment.depth-4,
	.comment.depth-5 {
		border-left: 2px solid var(--color-border);
	}

	.comment-meta,
	.comment-edit-link {
		opacity: var(--optical-muted);
	}

	.reply a:hover {
		opacity: var(--optical-strong);
	}

	.comment-content a:focus-visible,
	.reply a:focus-visible,
	.comment-edit-link:focus-visible,
	.comment-form input:focus-visible,
	.comment-form textarea:focus-visible,
	.comment-form-cookies-consent input:focus-visible,
	.comment-form input[type="submit"]:focus-visible {
		outline: 2px solid var(--color-focus);
		outline-offset: 2px;
	}

	.comment-form input[type="submit"],
	.comment-form .submit {
		background-color: var(--color-primary);
		color: var(--color-primary-contrast);
		border-color: transparent;
		opacity: var(--optical-default);
	}

	.comment-form input[type="submit"]:hover {
		opacity: var(--optical-strong);
	}

	.comment-form input[type="submit"]:active {
		opacity: var(--optical-soft);
	}

	.comment-form input[type="submit"]:disabled {
		opacity: var(--optical-faint);
	}

	.comment-reply-link {
		background-color: var(--color-surface);
		color: var(--color-foreground);
		border-color: transparent;
		opacity: var(--optical-muted);
	}

	.comment-reply-link:hover {
		background-color: var(--color-primary-soft);
		opacity: var(--optical-default);
	}

	.comment-reply-link:focus-visible {
		border-color: var(--color-primary);
	}
	.hotline:focus-visible,
	.cta:focus-visible,
	.tagline:focus-visible,
	.search-box .search-submit:focus-visible {
		outline-color: var(--color-secondary, var(--color-primary));
	}
	.announcement {
		--announcement-glow:
			color-mix(in srgb, var(--color-primary) 12%, transparent);
	}
	.screen-reader-text:focus {
		background: var(--color-primary);
		color: var(--color-primary-contrast);
	}
}

@media (max-width: 768px) {
	.main-navigation ul.nav-menu {
		box-shadow: 0 6px 15px rgba(0, 0, 0, .12);
		background-color: var(--color-surface);
	}
}

.is-style-block-soft {
	padding: 1.5rem;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
}

.is-style-rounded img {
	border-radius: 999px;
}