/**
 * Ethantheme Base
 * ----------------------------------------------------
 * 重置 + 全局基础 + 排版 + 容器
 * 依赖：tokens.css
 */

/* =========================================================
 * 1. 重置
 * ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	font-size: 62.5%; /* 1rem = 10px，便于 token 计算 */
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

body {
	background: var(--eth-bg-body);
	color: var(--eth-text-body);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
	font-size: var(--eth-fs-body);
	line-height: var(--eth-lh-body);
	font-weight: var(--eth-fw-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

a {
	color: var(--eth-link);
	text-decoration: none;
	transition: color var(--eth-transition-s);
}

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

ul,
ol {
	padding-left: 1.4em;
}

:focus-visible {
	outline: 3px solid var(--eth-primary-l-1);
	outline-offset: 2px;
	border-radius: var(--eth-radius-xs);
}

/* =========================================================
 * 2. 标题排版
 * ========================================================= */
h1, h2, h3, h4, h5, h6 {
	color: var(--eth-text-title);
	font-weight: var(--eth-fw-semibold);
	line-height: var(--eth-lh-heading);
}

h1 { font-size: var(--eth-fs-h1); }
h2 { font-size: var(--eth-fs-h2); }
h3 { font-size: var(--eth-fs-h3); }
h4 { font-size: var(--eth-fs-h4); }
h5 { font-size: var(--eth-fs-body); }
h6 { font-size: var(--eth-fs-small); }

/* =========================================================
 * 3. 段落与文本
 * ========================================================= */
p {
	line-height: var(--eth-lh-body);
}

p + p {
	margin-top: var(--eth-space-s);
}

strong, b { font-weight: var(--eth-fw-semibold); }
small { font-size: var(--eth-fs-small); }

blockquote {
	margin: var(--eth-space-m) 0;
	padding-left: var(--eth-space-m);
	border-left: 3px solid var(--eth-primary);
	color: var(--eth-text-muted);
	font-style: italic;
}

hr {
	border: 0;
	border-top: 1px solid var(--eth-border);
	margin: var(--eth-space-l) 0;
}

code, kbd, pre {
	font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: 0.92em;
}

code {
	background: var(--eth-dark-5);
	padding: 0.15em 0.4em;
	border-radius: var(--eth-radius-xs);
}

pre {
	background: var(--eth-dark-5);
	padding: var(--eth-space-s);
	border-radius: var(--eth-radius-s);
	overflow-x: auto;
}

/* =========================================================
 * * 4. 布局容器
 *  --------------------------------------------------------
 *  .eth-container     标准内容容器（max 1280）
 *  .eth-container-narrow  窄容器（文章正文，768）
 *  .eth-container-wide    宽容器（1440）
 *  .eth-section       区段（垂直 padding）
 * ========================================================= */
.eth-section {
	width: 100%;
	padding-inline: var(--eth-section-space-x);
	padding-block: var(--eth-section-space-y);
}

.eth-section--tight {
	padding-block: var(--eth-space-m);
}

.eth-section--none {
	padding-block: 0;
}

.eth-container {
	width: 100%;
	max-width: var(--eth-container);
	margin-inline: auto;
}

.eth-container-narrow {
	width: 100%;
	max-width: var(--eth-container-narrow);
	margin-inline: auto;
}

.eth-container-wide {
	width: 100%;
	max-width: var(--eth-container-wide);
	margin-inline: auto;
}

/* =========================================================
 * 5. Flow 排版系统
 * --------------------------------------------------------
 * 用于文章正文、卡片内容等需要语义化间距的场景
 * .flow > * + * 自动添加垂直间距
 * ========================================================= */
.flow > * + * {
	margin-top: var(--eth-space-s);
}

.flow h1, .flow h2, .flow h3, .flow h4 {
	margin-top: var(--eth-space-l);
	margin-bottom: var(--eth-space-2xs);
}

.flow h1:first-child,
.flow h2:first-child,
.flow h3:first-child,
.flow h4:first-child {
	margin-top: 0;
}

.flow h2 + p,
.flow h3 + p,
.flow h4 + p {
	margin-top: var(--eth-space-2xs);
}

.flow img {
	margin-top: var(--eth-space-m);
	border-radius: var(--eth-radius-s);
}

.flow ul, .flow ol {
	margin-top: var(--eth-space-s);
}

.flow li + li {
	margin-top: var(--eth-space-2xs);
}

/* =========================================================
 * 6. 表格基础
 * ========================================================= */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--eth-fs-small);
}

th, td {
	padding: var(--eth-space-2xs) var(--eth-space-xs);
	border-bottom: 1px solid var(--eth-border);
	text-align: left;
}

th {
	font-weight: var(--eth-fw-semibold);
	color: var(--eth-text-title);
}

/* =========================================================
 * 7. 选中与滚动条（细节）
 * ========================================================= */
::selection {
	background: var(--eth-primary-20);
	color: var(--eth-text-title);
}

/* =========================================================
 * 8. 古藤堡兼容
 * --------------------------------------------------------
 * 让 GP 默认的 .entry-content 也走 flow 系统
 * 但避免编辑器内被影响
 * ========================================================= */
body:not(.block-editor-page) .entry-content > * + * {
	margin-top: var(--eth-space-s);
}

body:not(.block-editor-page) .entry-content h2,
body:not(.block-editor-page) .entry-content h3,
body:not(.block-editor-page) .entry-content h4 {
	margin-top: var(--eth-space-l);
	margin-bottom: var(--eth-space-2xs);
}

body:not(.block-editor-page) .entry-content h2:first-child,
body:not(.block-editor-page) .entry-content h3:first-child,
body:not(.block-editor-page) .entry-content h4:first-child {
	margin-top: 0;
}

/* align-wide / align-full 支持 */
.alignwide {
	width: calc(100% + var(--eth-section-space-x) * 2);
	max-width: var(--eth-container-wide);
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}