/* ==========================================================================
   设计令牌 —— MarTech Daily 2.0「深色霓虹」

   选型依据（实地考察 7 个营销资讯站后定）：
   - 数字营销 / SocialBeta / 广告门：品牌色只做点缀，做大面积底色就廉价
   - The Drum：黑底 + 荧光强调 + 超大粗体，气质最接近本站的 AI/技术读者
   - Marketing Brew：订阅区做成一句色彩宣言，不是一块灰卡片

   本站读者一半在做 AI 与技术栈，深色不是「酷」而是内容气质。
   且站内配图本就按暗底生成 —— 暗底方案能同时激活配色张力与既有素材。

   ---- 主色反转为亮色 ----
   1.x 是亮底 + 暗橙主色，暗底上必须反过来：主色是**亮色**（荧光绿 #C6FF3D），
   暗色文字在亮底上的写法在这里全部作废，所有前景色都提到 #F2F3F8 附近但不到纯白，
   纯白只用于最强调的数字与标题笔画（长时间阅读纯白正文会刺眼）。

   ---- 频道色以「发光」而非「填充」出现 ----
   每个频道一个荧光色，靠 box-shadow 辉光而非大面积色块制造辨识度，
   避免暗底上出现刺眼的整块撞色。

   变量名沿用 --tb-blue-* / --tb-cyan-* 是为兼容组件层 200+ 处引用。
   ========================================================================== */

:root {
	/* ---- 品牌主色：荧光绿（暗底，主色取亮）---- */
	--tb-blue-900: #0A2410;
	--tb-blue-800: #0D3D18;
	--tb-blue-700: #10561F;
	--tb-blue-600: #157529;
	--tb-blue-500: #C6FF3D;   /* 荧光绿 */
	--tb-blue-400: #D6FF70;
	--tb-blue-300: #E4FF9E;
	--tb-blue-100: #F2FFD4;
	--tb-blue-50:  #F7FFE8;

	/* ---- 强调色：霓虹粉 ---- */
	--tb-cyan-500: #FF3EA5;
	--tb-cyan-400: #FF6BBB;
	--tb-cyan-300: #FF97CE;
	--tb-cyan-50:  #FFEDF6;

	/* ---- 额外霓虹 ---- */
	--tb-neon-cyan: #2BF5FF;   /* 电光青 */
	--tb-neon-violet: #9B6BFF; /* 紫罗兰 */
	--tb-neon-amber: #FF9F1C;  /* 琥珀 */

	/* ---- 状态色 ---- */
	--tb-red-500:  #FF4D4D;
	--tb-red-50:   #2A1414;
	--tb-amber-500:#D97706;

	/* ---- 中性：近黑带一点蓝紫，不发灰 ---- */
	--tb-ink:      #F2F3F8;   /* 主文字 */
	--tb-ink-2:    #C4C7D4;   /* 次文字 / 正文 */
	--tb-ink-3:    #9DA2B5;   /* 辅助文字（摘要） */
	--tb-ink-4:    #7C8299;   /* 占位/元信息 —— 实测在 #101219 上 4.7:1，达 WCAG AA。
	                              原来的 #61667C 只有 3.3:1，日期和「约 5 分钟」会读不清 */
	--tb-line:     #262A38;   /* 描边 */
	--tb-line-2:   #1C202B;   /* 浅描边 */
	--tb-bg:       #0A0B10;   /* 页面底 */
	--tb-bg-soft:  #101219;   /* 区块底 */
	--tb-bg-mute:  #0D0E15;   /* 更浅区块 */
	--tb-dark:     #06070B;   /* 最深色区 */

	/* ---- 语义色 ---- */
	--tb-color:        var(--tb-blue-500);
	--tb-color-hover:  var(--tb-blue-400);
	--tb-color-soft:   rgba(198, 255, 61, 0.12);
	--tb-text:         var(--tb-ink);
	--tb-text-2:       var(--tb-ink-2);
	--tb-text-3:       var(--tb-ink-3);
	--tb-border:       var(--tb-line);
	--tb-surface:      var(--tb-bg-soft);

	/* ---- 频道识别色（荧光体系）---- */
	--ch-ai-martech:      #C6FF3D;   --ch-ai-martech-soft: #1A2A0D;
	--ch-martech-stack:   #2BF5FF;   --ch-martech-stack-soft: #0A2429;
	--ch-growth-method:   #FF9F1C;   --ch-growth-method-soft: #2A1A08;
	--ch-tools-review:    #9B6BFF;   --ch-tools-review-soft: #1C1233;
	--ch-rankings:        #FF3EA6;   --ch-rankings-soft: #2A0F1F;
	--ch-default:         var(--tb-blue-500);
	--ch-default-soft:    var(--tb-color-soft);

	/* ---- 字体 ---- */
	--tb-font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
		"Source Han Sans SC", "Noto Sans CJK SC", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tb-font-num: "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tb-font-serif: Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
	--tb-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

	--tb-fs-11: 11px;
	--tb-fs-12: 12px;
	--tb-fs-13: 13px;
	--tb-fs-14: 14px;
	--tb-fs-15: 15px;
	--tb-fs-16: 16px;
	--tb-fs-17: 17px;
	--tb-fs-18: 18px;
	--tb-fs-19: 19px;
	--tb-fs-20: 20px;
	--tb-fs-22: 22px;
	--tb-fs-24: 24px;
	--tb-fs-28: 28px;
	--tb-fs-32: 32px;
	--tb-fs-40: 40px;

	--tb-lh-tight: 1.32;
	--tb-lh-snug:  1.65;
	--tb-lh-body:  1.92;   /* 正文行高在暗底上要更松 */

	--tb-fw-normal: 400;
	--tb-fw-medium: 500;
	--tb-fw-bold: 700;
	--tb-fw-black: 800;

	/* ---- 间距 ---- */
	--tb-sp-1: 4px;
	--tb-sp-2: 8px;
	--tb-sp-3: 12px;
	--tb-sp-4: 16px;
	--tb-sp-5: 20px;
	--tb-sp-6: 24px;
	--tb-sp-8: 32px;
	--tb-sp-10: 40px;
	--tb-sp-12: 48px;
	--tb-sp-16: 64px;
	--tb-sp-20: 80px;

	/* ---- 圆角 ---- */
	--tb-r-sm: 6px;
	--tb-r-md: 12px;
	--tb-r-lg: 18px;
	--tb-r-xl: 24px;
	--tb-r-2xl: 28px;
	--tb-r-pill: 999px;

	/* ---- 阴影：暗底上不用投影，用辉光 ---- */
	--tb-shadow-xs: 0 0 12px rgba(198, 255, 61, 0.10);
	--tb-shadow-sm: 0 0 20px rgba(198, 255, 61, 0.14);
	--tb-shadow-md: 0 0 34px rgba(198, 255, 61, 0.20);
	--tb-shadow-lg: 0 0 56px rgba(198, 255, 61, 0.26);
	--tb-shadow-card: 0 0 24px rgba(198, 255, 61, 0.12);

	/* ---- 布局 ---- */
	--tb-container: 1280px;
	--tb-gutter: 24px;
	--tb-sidebar-w: 320px;
	--tb-header-h: 64px;
	--tb-subnav-h: 46px;
	--tb-article-w: 760px;   /* 正文栏宽：16px 字号约 45 字/行 */
	--tb-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ---- 渐变 ---- */
	--tb-grad-brand: linear-gradient(135deg, #C6FF3D 0%, #2BF5FF 55%, #9B6BFF 100%);
	--tb-grad-tech: linear-gradient(120deg, #2BF5FF 0%, #9B6BFF 100%);
	--tb-grad-line: linear-gradient(90deg, #C6FF3D 0%, #2BF5FF 100%);
	--tb-grad-dark: linear-gradient(150deg, #10121C 0%, #06070B 100%);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--tb-transition: 0ms;
	}
}