/* ==========================================================================
   1. 设计变量（颜色、字体、尺寸、动画速度）
   --------------------------------------------------------------------------
   全站的颜色和尺寸都从这里取。要换主色、圆角、内容宽度，改这里就够了。

   设计方向：纯黑底（像 Apple 的产品页），Reflex 青蓝色当作「讯号光」，
   所有面板和按钮都切掉两个角（像 ROG 的斜切造型）。
   ========================================================================== */

/* 标题字体：Chakra Petch（有斜切角的科技字体，只放了英文字母和数字）。
   中文会自动用系统字体（苹方、微软雅黑、思源黑体）。 */
@font-face {
	font-family: "Chakra Petch";
	src: url("../fonts/chakra-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Chakra Petch";
	src: url("../fonts/chakra-SemiBold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Chakra Petch";
	src: url("../fonts/chakra-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
/* 内文字体：Inter */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ── 底色 ── */
	--rx-void: #000000;          /* 网页底色：纯黑 */
	--rx-carbon: #070b11;        /* 面板底色 */
	--rx-carbon-2: #0c121b;      /* 面板上的面板（例如输入框） */
	--rx-line: rgba(160, 200, 255, 0.12);       /* 一般线条 */
	--rx-line-strong: rgba(160, 200, 255, 0.24); /* 比较明显的线条 */

	/* ── 文字 ── */
	--rx-frost: #eef4fb;         /* 主要文字 */
	--rx-steel: #93a1b3;         /* 说明文字 */
	--rx-dim: #5d6a7b;           /* 更淡的注脚 */

	/* ── 品牌讯号光（来自 Reflex IT 标志的蓝到青）── */
	--rx-cyan: #22e6dc;
	--rx-blue: #2b6bff;
	--rx-signal: linear-gradient(100deg, var(--rx-blue) 0%, #1aa8ff 45%, var(--rx-cyan) 100%);
	--rx-glow: 0 0 24px rgba(34, 230, 220, 0.35), 0 0 64px rgba(43, 107, 255, 0.25);

	/* ── 优惠专用的红色（只用在优惠、倒数，代表「限时」）── */
	--rx-ember: #ff4d5e;

	/* ── 尺寸 ── */
	--rx-max: 1240px;            /* 内容最大宽度 */
	--rx-gutter: clamp(16px, 4vw, 40px); /* 内容和萤幕边缘的距离 */
	--rx-header: 68px;           /* 页首高度 */
	--rx-space: clamp(88px, 12vw, 168px); /* 区块上下留白 */
	--rx-cut: 14px;              /* 斜切角的大小 */
	--rx-cut-sm: 8px;

	/* ── 字体 ── */
	--rx-font: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif;
	--rx-display: "Chakra Petch", "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;

	/* ── 字级（大标题会随萤幕宽度缩放）── */
	--rx-size-mega: clamp(44px, 8.2vw, 124px);  /* 首屏大标题 */
	--rx-size-h2: clamp(34px, 5.2vw, 72px);     /* 区块标题 */
	--rx-size-h3: clamp(20px, 1.8vw, 24px);     /* 卡片标题 */
	--rx-size-lead: clamp(17px, 1.5vw, 20px);   /* 标题下面的说明 */
	--rx-size-body: 16px;
	--rx-size-small: 13px;

	/* ── 动画速度 ── */
	--rx-ease: cubic-bezier(0.2, 0.7, 0.1, 1);       /* 一般进场 */
	--rx-ease-snap: cubic-bezier(0.7, 0, 0.2, 1);    /* 换页、切换 */
	--rx-fast: 0.25s;
	--rx-slow: 0.9s;
}

@media (max-width: 760px) {
	:root {
		--rx-header: 60px;
		--rx-cut: 10px;
	}
}