:root {
	/* Primary Colors */
	--color-primary: #3b82f6;
	--color-primary-hover: #2563eb;
	--color-primary-light: #60a5fa;

	/* Grayscale */
	--color-gray-50: #fafafa;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #e5e5e5;
	--color-gray-300: #d4d4d4;
	--color-gray-400: #a3a3a3;
	--color-gray-500: #737373;
	--color-gray-600: #525252;
	--color-gray-700: #404040;
	--color-gray-800: #262626;
	--color-gray-900: #171717;

	/* Semantic Colors */
	--color-text: #1a2332;
	--color-text-secondary: #2d3748;
	--color-text-muted: #64748b;
	--color-bg: #ffffff;
	--color-bg-secondary: #f6f6f6;
	--color-bg-tertiary: #f8fafc;
	--color-border: #e5e7eb;

	--color-bg-dark: #0a0a08;
	--color-yellow: #ffd503;
	--color-pale-yellow: #fff7cf;

	/* Status Colors */
	--color-error: #ef4444;
	--color-error-light: #fecaca;
	--color-error-bg: #fef2f2;
	--color-primary-bg: #eff6ff;
	--color-primary-dark: #1e3a5f;

	/* Gradient */
	--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	/* Layout */
	--max-width-site: 1200px;
	--padding-horizontal: 0px;

	/* Card/Component Spacing */
	--card-padding: 29px 32px;
	--card-border-radius: 22px;
	--card-gap: 22px;

	/* Transitions */
	--transition-base-duration: 0.16s;
}

@media only screen and (max-width: 640px) {
	:root {
		--padding-horizontal: 20px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-text: #f1f5f9;
		--color-text-secondary: #e2e8f0;
		--color-text-muted: #94a3b8;
		--color-bg: #0f172a;
		--color-bg-secondary: #1e293b;
		--color-border: #334155;
		--color-primary: #60a5fa;
		--color-primary-hover: #38bdf8;
	}
}

/* Global Resets */
html, button {
	font-family: system-ui, sans-serif;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	/* dark page */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p,
li {
	line-height: 1.5;
}

h1 {
	font-size: 1.8rem;
}

h2, h3, h4 {
	font-weight: 600;
}

strong {
	font-weight: 600;
}

/* Site Layout */
.site-header {
	background-color: var(--color-bg);
	max-width: var(--max-width-site);
	margin: 0 auto;
	padding: 1.5rem var(--padding-horizontal);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-logo {
	color: var(--color-gray-600);
	font-size: 1.25rem;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--transition-base-duration);
}

.site-logo:hover {
	color: var(--color-gray-400) !important;
}

body.dark .site-header {
	background-color: var(--color-bg-dark);
}

body.dark .site-logo {
	color: var(--color-gray-400);
}

body.dark .site-logo:hover {
	color: var(--color-gray-100) !important;
}

.contrast-color {
	color: var(--color-gray-800);
}
body.dark .contrast-color {
	color: var(--color-gray-300);
}

.site-main {
	max-width: var(--max-width-site);
	margin: 0 auto;
	min-height: calc(100vh - 200px);
}

@media only screen and (max-width: 640px) {
	.site-header {
		padding: 1.25rem inherit;
	}

	.site-main {
		padding-left: var(--padding-horizontal);
		padding-right: var(--padding-horizontal);
	}

	.site-footer {
		padding-left: var(--padding-horizontal);
		padding-right: var(--padding-horizontal);
	}
}

/* Presence Indicator */
.presence-indicator {
	padding: 6px 12px;
	background-color: var(--color-gray-100);
	border: 1px solid var(--color-border);
	border-radius: var(--card-border-radius);
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* User Info Component */
.user-info {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: transparent;
	font-size: 14px;
}

/* Buttons */
.btn-primary,
.comment-submit,
.reply-submit {
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: #ffffff;
	background-color: var(--color-primary);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color var(--transition-base-duration);
}

.btn-primary:hover,
.comment-submit:hover,
.reply-submit:hover {
	background-color: var(--color-primary-hover);
}

.btn-primary:disabled,
.comment-submit:disabled,
.reply-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.reply-submit {
	font-size: 13px;
}

/* Form Inputs */
.comment-input,
.reply-input {
	width: 100%;
	padding: 16px;
	font-size: 16px;
	line-height: 1.5;
	border: 2px solid var(--color-border);
	border-radius: 12px;
	resize: vertical;
	box-sizing: border-box;
	font-family: system-ui, sans-serif;
	background-color: var(--color-bg);
	color: var(--color-text);
}

.comment-input:focus,
.reply-input:focus {
	outline: none;
	border-color: var(--color-primary);
}

.comment-input::placeholder,
.reply-input::placeholder {
	color: var(--color-text-muted);
}

.reply-input {
	padding: 12px;
	font-size: 14px;
	border-radius: 10px;
}

/* Cards */
.card {
	padding: var(--card-padding);
	border-radius: var(--card-border-radius);
	background-color: var(--color-bg-secondary);
}

/* Comment Forms */
.comment-form {
	margin-bottom: 20px;
}

/* Reply Forms */
.reply-form {
	margin-top: 16px;
	padding-left: 32px;
}

.reply-form-actions {
	margin-top: 8px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.reply-cancel {
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
	background-color: transparent;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color var(--transition-base-duration);
}

.reply-cancel:hover {
	background-color: var(--color-gray-100);
}

/* Site Footer */
.site-footer-wrapper {
	background-color: var(--color-bg-secondary);
	border-top: 1px solid var(--color-border);
	margin-top: 48px;
}

.site-footer {
	max-width: var(--max-width-site);
	margin: 0 auto;
	padding-top: 32px;
	padding-bottom: 32px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
}

.site-footer .footer-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 240px;
}

.site-footer a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

/* Mobile Responsive Overrides */
@media only screen and (max-width: 640px) {
	.user-info {
		gap: 8px;
	}

	.site-header-inner {
		padding: 12px 16px;
	}

	.presence-indicator {
		font-size: 11px;
		padding: 4px 8px;
	}

	.comment-input,
	.reply-input {
		font-size: 15px;
	}

	.reply-form {
		padding-left: 16px;
	}
}