/* =============================================================
   AI小忙工作社区 · 在线 AI 定制工坊 —— 基础样式层（设计令牌 / Reset / 排版）
   文件：css/base.css
   说明：v3 视觉升级 ——「明亮治愈 × 品牌渐变」。
         全站公共基础。品牌色、渐变、字体、间距等设计变量集中
         在 :root 中，改品牌主色只需修改 --c-* 变量。
         注意：变量名与 v2 保持兼容（HTML 内联样式引用了
         var(--c-ink-border) 等），只允许改值、不允许删名。
   ============================================================= */

/* ---------- 设计令牌（Design Tokens） ---------- */
:root {
  /* ---- 品牌色板 ----
     主色：科技青（AI / 效率 / 未来感）
     副色：星云紫（品牌渐变搭档，用于强调与装饰）
     强调色：琥珀金（CTA、关键数字，克制使用）
     视觉策略：青 → 蓝 → 紫 的渐变作为品牌识别核心。  */
  --c-accent:        #4f46e5;   /* v3.4.0 主品牌色：靛蓝（浅底对比度 4.5:1+） */
  --c-accent-deep:   #4338ca;   /* v3.4.0 主色深一档（hover / 渐变） */
  --c-accent-soft:   rgba(79, 70, 229, 0.10);   /* v3.4.0 主色浅底（标签/高亮） */
  --c-glow:          rgba(79, 70, 229, 0.30);   /* v3.4.0 主色发光（阴影） */
  --c-violet:        #7c3aed;   /* v3.4.0 副品牌色：星云紫 */
  --c-violet-deep:   #6d28d9;   /* v3.4.0 紫深一档 */
  --c-violet-soft:   rgba(124, 58, 237, 0.10);
  --c-amber:         #f59e0b;   /* 强调色：琥珀金 */
  --c-amber-soft:    rgba(245, 158, 11, 0.14);

  /* ---- 品牌渐变（核心识别元素） ----
     v3.3.0 对比度修复：渐变整体加深一档（青→蓝→紫识别不变），
     保证白字按钮（≥4.5:1）与浅底/深底上的渐变文字均可读。 */
  --grad:            linear-gradient(120deg, #4f46e5 0%, #7c3aed 100%);   /* v3.4.0 靛蓝→紫罗兰 */
  --grad-soft:       linear-gradient(120deg, rgba(79,70,229,.10), rgba(124,58,237,.10));
  --grad-text:       linear-gradient(120deg, #4338ca 0%, #7c3aed 100%);   /* v3.4.0 靛蓝→紫罗兰 浅底 >=4.5:1 */

  /* ---- 深色（沉浸式表面，仅用于 Hero / CTA / 页脚） ---- */
  --c-ink-950: #060b1d;   /* 最深底（页脚） */
  --c-ink-900: #0b1229;   /* 常规深色底（Hero / 深色区块） */
  --c-ink-850: #111a36;   /* 深色卡片底 */
  --c-ink-800: #17224a;   /* 深色浮层底 */
  --c-ink-border: rgba(148, 163, 184, 0.16);   /* 深色边框 */
  --c-ink-border-strong: rgba(148, 163, 184, 0.32);

  /* ---- 浅色表面（明亮主题主体） ---- */
  --c-paper: #f5f8fd;   /* 页面浅底（带极淡蓝调，更清爽） */
  --c-card:  #ffffff;   /* 浅色卡片底 */
  --c-light-border: rgba(15, 23, 42, 0.08);

  /* ---- 文字 ----
     v3.3.0 对比度修复：弱化文字提到 WCAG AA（正文 ≥4.5:1）：
     浅底 --t-3 #94a3b8(≈2.4:1) → #64748b(≈4.8:1)；
     深底 --t-dark-3 #6479a3(≈3.3:1) → #93a7cc(≈6.2:1)。 */
  --t-dark-1: #0f172a;  /* v3.5.0 全站浅色化：原深底主文字改为深字 */
  --t-dark-2: #526078;  /* v3.5.0 全站浅色化：原深底次级改为深字 */
  --t-dark-3: #64748b;  /* v3.5.0 全站浅色化：原深底弱化改为深字 */
  --t-1: #0f172a;       /* 浅色底主文字 */
  --t-2: #526078;       /* 浅色底次级 */
  --t-3: #64748b;       /* 浅色底弱化 */

  /* ---- 语义色 ---- */
  --c-ok:   #10b981;
  --c-warn: #f59e0b;
  --c-err:  #ef4444;

  /* ---- 字体（系统字体栈，零外部依赖） ---- */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", "Source Han Sans SC", -apple-system,
               "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas,
               "Courier New", monospace;

  /* ---- 布局 ---- */
  --wrap: 1200px;        /* 内容最大宽度 */
  --radius: 18px;        /* 卡片圆角（v3 更圆润） */
  --radius-lg: 24px;     /* 大容器圆角 */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 36px -20px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 12px 44px -14px var(--c-glow);
  --shadow-violet: 0 14px 44px -16px rgba(124, 58, 237, 0.25); /* v3.5.0 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--t-1);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 极淡点阵纹理：让大面积浅色不单调（纯 CSS，零图片） */
  background-image: radial-gradient(rgba(15, 23, 42, 0.028) 1px, transparent 1px);
  background-size: 26px 26px;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
::selection { background: rgba(79, 70, 229, 0.85); color: #fff; }

/* ---------- 排版工具 ---------- */
.container { width: min(var(--wrap), 92%); margin-inline: auto; }

/* 章节头部（小标签 + 大标题 + 描述） */
.sec-head { max-width: 720px; margin-bottom: 3rem; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em;
  color: #4338ca;  /* v3.4.0 浅底标签 4.3:1→5.6:1 */
  background: var(--c-accent-soft);
  border: 1px solid rgba(79, 70, 229, 0.30);
  padding: 6px 16px; border-radius: 999px;
  text-transform: uppercase;
}
.on-dark .sec-tag { color: #4f46e5; border-color: rgba(79, 70, 229, 0.30); background: rgba(79, 70, 229, 0.10); } /* v3.5.0 靛 */
.sec-title {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.22;
  letter-spacing: -0.015em; margin: 1.1rem 0 0.8rem;
}
.sec-title .hl, .sec-title em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-desc { font-size: 1.04rem; color: var(--t-2); }
.on-dark .sec-desc { color: var(--t-dark-2); }

/* 数字 / 代码类文字 */
.mono { font-family: var(--font-mono); }

/* 品牌渐变文字（创意亮点：标题/数字用渐变着色） */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- 深色区块（.on-dark 表示当前区块为深色底） ---------- */
.on-dark {
  background:
    radial-gradient(1100px 420px at 12% -10%, rgba(79, 70, 229, 0.08), transparent 60%),
    radial-gradient(900px 400px at 95% 0%, rgba(124, 58, 237, 0.07), transparent 55%),
    rgba(240, 243, 252, 0.6);
  color: var(--t-dark-1);
}
.on-dark .t-sub { color: var(--t-dark-2); }

/* 蓝图网格背景（深色区块内点缀，增强层次） */
.grid-bg {
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.07) 1px, transparent 1px); /* v3.5.0 靛 */
  background-size: 44px 44px;
}

/* ---------- 动效基础 ---------- */
/* 滚动入场：元素默认隐藏，进入视口后加 .in 显示 */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* 悬浮光斑（Hero / CTA 的装饰气泡，纯 CSS 动画） */
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(28px, -34px) scale(1.08); }
  66%      { transform: translate(-22px, 20px) scale(0.94); }
}
@keyframes gradFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);} 50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);} }

/* 渐变描边徽标（创意：给卡片加彩虹顶边） */
.grad-top { position: relative; }
.grad-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad); border-radius: 999px 999px 0 0;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.grad-top:hover::before { opacity: 1; }

/* ---------- 无障碍：尊重系统“减少动态”设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}