/*
 * tokens.css —— Base 主题设计变量（design tokens）
 *
 * 全部视觉决策集中在此文件的 :root 中。AI 装修 / 人工改版时，
 * 只需覆盖这些 CSS 变量，即可整体改变配色、字体、间距、圆角与阴影，
 * 无需触碰 main.css 中的任何组件样式。
 *
 * 约定：
 * - 命名统一使用 --<类别>-<名称> 结构；
 * - 颜色使用十六进制，保证中性、专业；
 * - 尺寸优先使用 rem / px，间距呈递进比例。
 *
 * 注意：CSS 变量无法用于 media query 的条件中，因此响应式断点
 * 不在此定义，主样式使用固定断点值（见 main.css 顶部注释）。
 * 参考断点（供人工修改时对齐）：
 *   - 移动端优先
 *   - --bp-md: 768px   （平板 / 横向）
 *   - --bp-lg: 1024px  （桌面）
 */

:root {
	/* ===== 颜色 ===== */
	--color-bg: #ffffff;              /* 页面背景 */
	--color-surface: #f5f7fa;         /* 卡片 / 区块背景 */
	--color-surface-alt: #ebeef2;     /* 次级背景（页脚、条纹等） */
	--color-text: #1f2933;            /* 主文字（深灰） */
	--color-text-muted: #6b7480;      /* 次要文字 */
	--color-primary: #2f5d8a;         /* 主色（克制的墨蓝） */
	--color-primary-hover: #274d73;   /* 主色悬停态 */
	--color-primary-contrast: #ffffff;/* 主色之上的文字色 */
	--color-accent: #b45309;          /* 强调色（点缀用暖色） */
	--color-border: #e2e6ea;          /* 边框 / 分隔线 */
	--color-success: #2f855a;         /* 成功 */
	--color-danger: #c53030;          /* 危险 / 错误 */
	--color-link: var(--color-primary);
	--color-focus-ring: rgba(47, 93, 138, 0.15); /* 输入聚焦外发光 */

	/* ===== 字体 ===== */
	/* 纯系统字体栈，无任何外部字体请求。 */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", "Noto Sans SC", sans-serif;
	--font-heading: var(--font-sans);
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
		"Liberation Mono", monospace;

	--font-size-base: 16px;
	--line-height-base: 1.7;
	--line-height-heading: 1.3;

	/* 字号阶梯 */
	--fs-sm: 0.875rem;   /* 14px */
	--fs-base: 1rem;     /* 16px */
	--fs-lg: 1.125rem;   /* 18px */
	--fs-xl: 1.375rem;   /* 22px */
	--fs-2xl: 1.75rem;   /* 28px */
	--fs-3xl: 2.25rem;   /* 36px */

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	/* ===== 间距（递进比例） ===== */
	--space-1: 0.25rem;  /* 4px */
	--space-2: 0.5rem;   /* 8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.5rem;   /* 24px */
	--space-6: 2rem;     /* 32px */
	--space-7: 3rem;     /* 48px */
	--space-8: 4rem;     /* 64px */

	/* ===== 圆角 ===== */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-full: 9999px;

	/* ===== 阴影 ===== */
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06),
		0 1px 3px rgba(16, 24, 40, 0.08);
	--shadow-md: 0 4px 12px rgba(16, 24, 40, 0.1),
		0 2px 4px rgba(16, 24, 40, 0.06);

	/* ===== 布局 ===== */
	--container-max: 1140px;
	--content-max: 800px;         /* 正文 / 单栏内容最大宽度 */
	--sidebar-width: 300px;       /* 侧边栏宽度 */
	--header-height: 68px;

	/* ===== 过渡动画 ===== */
	--transition: 200ms ease;
}

/* --- wp-control AI 装修覆盖 --- */
:root {
  --color-primary: #2F5D50;
  --color-primary-hover: #24483E;
  --color-accent: #E8A33D;
}