/**
 * OSLLA 基础主题约束 v1（对标 lumenia 度量）
 * 全站只许用这里的 token 与组件类，不许在模板里发明新的颜色/间距/圆角。
 * 加载顺序在 tailwind.css 之后，同名冲突以这里为准。
 */

:root {
	/* —— 颜色 —— */
	--os-teal: #427e85;        /* 主色：老站 Avada primary_color 原值 */
	--os-teal-dark: #35666c;   /* 主色 hover */
	--os-teal-soft: #eef4f4;   /* 主色浅底 */
	--os-ink: #161616;         /* 标题黑 */
	--os-body: #333333;        /* 正文 */
	--os-muted: #747474;       /* 次要文字（lumenia 同值） */
	--os-line: #e5e5e5;        /* 边框线（lumenia 同值） */
	--os-bg: #ffffff;
	--os-bg-soft: #f5f7f9;     /* 浅灰段底（lumenia 同值） */
	--os-dark: #0b1220;        /* 深色段底 */
	/* —— 圆角 —— */
	--os-r-btn: 3px;           /* 按钮 */
	--os-r-card: 4px;          /* 卡片/输入框（lumenia 按钮同值） */
	/* —— 间距 —— */
	--os-section-y: 96px;      /* 段上下（lumenia 100~150，取 96） */
	--os-section-y-m: 60px;    /* 移动端段上下 */
	--os-container: 1200px;    /* 内容宽（lumenia 1200 起） */
	--os-gap: 24px;            /* 卡片间距 */
	/* —— 字体 —— */
	--os-font: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body { font-family: var(--os-font); }

/* —— 版式 —— */
.os-container { max-width: var(--os-container); margin: 0 auto; padding: 0 24px; }
.os-section { padding: var(--os-section-y) 0; }
.os-h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: var(--os-ink); margin: 0 0 12px; }
.os-sub { font-size: 15px; color: var(--os-muted); margin: 0; }
.os-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }

/* —— 按钮：所有按钮必须用 .os-btn + 变体，保证上下 padding 一致 —— */
.os-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 12px 32px;
	font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none;
	border-radius: var(--os-r-btn); border: 1px solid transparent; cursor: pointer;
	white-space: nowrap;
}
.os-btn-primary { background: var(--os-teal); color: #fff !important; }
.os-btn-primary:hover { background: var(--os-teal-dark); color: #fff !important; }
.os-btn-white { background: #fff; color: var(--os-dark) !important; }
.os-btn-white:hover { background: #f0f0f0; color: var(--os-dark) !important; }
.os-btn-outline { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.5); }
.os-btn-outline:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.os-btn-block { display: flex; width: 100%; }

/* —— 卡片 —— */
.os-card { background: #fff; border: 1px solid var(--os-line); border-radius: var(--os-r-card); overflow: hidden; }
.os-card-hover:hover { box-shadow: 0 12px 32px rgba(0,0,0,.08); }

/* —— 表单 —— */
.os-input, .os-select, .os-textarea {
	width: 100%; min-height: 48px; padding: 12px 16px;
	font-size: 14px; font-family: var(--os-font); color: var(--os-ink);
	background: #fff; border: 1px solid #d9d9d9; border-radius: var(--os-r-card);
}
.os-textarea { min-height: 110px; resize: vertical; }
.os-label { display: block; font-size: 13px; font-weight: 700; color: var(--os-body); margin-bottom: 6px; }

/* —— 链接 —— */
.os-link { color: var(--os-teal); font-weight: 700; text-decoration: none; }
.os-link:hover { text-decoration: underline; }

/* —— 规格表 —— */
.os-spec { background: #fff; border: 1px solid var(--os-line); border-radius: var(--os-r-card); overflow: hidden; }
.os-spec-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid #f0f0f0; }
.os-spec-row:last-child { border-bottom: none; }
.os-spec-k { font-size: 14px; color: var(--os-muted); }
.os-spec-v { font-size: 14px; font-weight: 700; color: var(--os-ink); text-align: right; }

@media (max-width: 639px) {
	.os-section { padding: var(--os-section-y-m) 0; }
	.os-h2 { font-size: 24px; }
	.os-btn { min-height: 46px; padding: 11px 24px; font-size: 14px; }
}