/* Global styles and CSS variables (Design Tokens) */
:root {
	/* Colors */
	--wte-color-primary: #1a1a1a;
	--wte-color-secondary: #f4f4f4;
	--wte-color-accent: #007bff;
	--wte-color-text: #333333;
	--wte-color-background: #ffffff;
	--wte-color-border: #e2e8f0;

	/* Typography */
	--wte-font-family-base: 'Inter', 'Noto Sans JP', sans-serif;
	--wte-font-size-base: 16px;
	
	/* Spacing */
	--wte-spacing-sm: 8px;
	--wte-spacing-md: 16px;
	--wte-spacing-lg: 32px;
	--wte-spacing-xl: 64px;

	/* Layout */
	--wte-layout-max-width: 1200px;
}

body {
	font-family: var(--wte-font-family-base);
	font-size: var(--wte-font-size-base);
	color: var(--wte-color-text);
	background-color: var(--wte-color-background);
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

a {
	color: var(--wte-color-accent);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Header (parts/header/default.php)
   ========================================================================== */
.wte-site-header {
	background: var(--wte-color-background);
	border-bottom: 1px solid var(--wte-color-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.wte-header-inner {
	max-width: var(--wte-layout-max-width);
	margin: 0 auto;
	padding: var(--wte-spacing-md) var(--wte-spacing-lg);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wte-site-branding {
	display: flex;
	align-items: center;
}
.wte-site-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
}
.wte-site-title a {
	color: var(--wte-color-primary);
}
.wte-main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--wte-spacing-md);
}
.wte-main-navigation a {
	color: var(--wte-color-text);
	font-weight: 500;
}

/* ==========================================================================
   Footer (parts/footer/default.php)
   ========================================================================== */
.wte-site-footer {
	background: var(--wte-color-primary);
	color: #fff;
	padding: var(--wte-spacing-xl) var(--wte-spacing-lg);
	margin-top: var(--wte-spacing-xl);
}
.wte-footer-inner {
	max-width: var(--wte-layout-max-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wte-spacing-md);
}
.wte-site-info, .wte-site-info a {
	color: #aaa;
	font-size: 0.875rem;
}

/* ==========================================================================
   Main Content & Loop (parts/loop/content.php)
   ========================================================================== */
.wte-site-main {
	max-width: var(--wte-layout-max-width);
	margin: var(--wte-spacing-xl) auto;
	padding: 0 var(--wte-spacing-lg);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--wte-spacing-lg);
}
.wte-loop-item {
	background: #fff;
	border: 1px solid var(--wte-color-border);
	border-radius: 8px;
	padding: var(--wte-spacing-lg);
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wte-loop-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}
.wte-entry-title {
	margin: 0 0 var(--wte-spacing-sm);
	font-size: 1.25rem;
}
.wte-entry-title a {
	color: var(--wte-color-primary);
}
.wte-entry-meta {
	font-size: 0.875rem;
	color: #666;
	margin-bottom: var(--wte-spacing-md);
}

/* Responsive */
@media (max-width: 768px) {
	.wte-header-inner {
		flex-direction: column;
		gap: var(--wte-spacing-md);
	}
	.wte-site-main {
		grid-template-columns: 1fr;
	}
}