/*
Theme Name: Astra Child
Description: A lightweight child theme for the Astra theme
Author: Your Name
Template: astra
Version: 1.0.0
*/

/* 您的自定义CSS将在下面添加 */
/* === 设计系统：CSS变量定义 === */
:root {
	/* 主色调 - 建议使用深绿/大地色系，传达自然、可信赖 */
	--color-primary: #2c5530;
	--color-primary-light: #e8f4ea;
	--color-primary-dark: #1e3a23;

	/* 辅助色 - 用于点缀、按钮等 */
	--color-accent: #d4af37; /* 金色，营造精致感 */
	--color-accent-light: #f7e9c1;

	/* 中性色 - 用于文本、背景、边框 */
	--color-text: #2d3748;
	--color-text-light: #718096;
	--color-background: #ffffff;
	--color-background-alt: #f7fafc;
	--color-border: #e2e8f0;

	/* 版式 */
	--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* 建议使用系统字体堆栈，性能最佳 */
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--line-height: 1.6;
	--border-radius: 8px;
	--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* === 基础元素样式 === */
body {
	font-family: var(--font-body);
	color: var(--color-text);
	line-height: var(--line-height);
	background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-text);
	font-weight: 600;
	line-height: 1.3;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-primary-dark);
}

/* === 工具类 === */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.card {
	background: var(--color-background);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: 1.5rem;
	border: 1px solid var(--color-border);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: var(--color-primary);
	color: white;
	border: none;
	border-radius: var(--border-radius);
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn:hover {
	background-color: var(--color-primary-dark);
	color: white;
	transform: translateY(-1px);
}