/* ============================================================
   智慧金蟾 Design Tokens v1.0
   ============================================================ */
:root {

  /* ---------- 1. 背景层次（4 级，越靠上越亮） ---------- */
  --bg-0: #070B14;   /* 页面画布：深空蓝黑。不用 #000 */
  --bg-1: #0E1626;   /* 表面：卡片、页脚、统计块底 */
  --bg-2: #162238;   /* 抬升：下拉菜单、hover 卡、步骤序号圈 */
  --bg-3: #1E2D46;   /* 内嵌 / 高亮行：表格斑马纹、代码块、选中项 */

  /* ---------- 2. 前景文字（3 级） ---------- */
  --fg-1: #E9EFFA;   /* 主文字：标题、正文强调。带极轻蓝调，不用纯白 */
  --fg-2: #AEBBD1;   /* 次文字：正文、副标题、卡片描述 */
  --fg-3: #808FA8;   /* 三级文字：标签、脚注、meta、placeholder */
  --fg-disabled: #5B6880;  /* 仅用于禁用态（不承载信息，豁免对比度） */
  --ink-on-bright: #04121E;/* 亮底上的深色墨：主按钮文字 */

  /* ---------- 3. 品牌主色（科技蓝，承接老站 #00a0e9 与产品 #1976D2） ---------- */
  --brand-300: #8FD0FA;  /* 深底上的链接文字 / 幽灵按钮文字 */
  --brand-400: #4FB4F5;  /* hover 文字、图标 */
  --brand-500: #1E9BEE;  /* ★ 品牌主色。填充、边框、焦点环 */
  --brand-600: #0E7AC6;  /* 按下态、深填充 */
  --brand-700: #0A5C97;  /* 深底块、渐变暗端 */

  /* ---------- 4. 青绿辅色（老站绿松石 #007c85 的现代化延续，一丝品牌血脉） ---------- */
  --teal-300: #6FE9DC;   /* 眉标、AI 光点、成功微光 */
  --teal-400: #35D6C4;   /* ★ 辅色。渐变亮端、AI 呼吸点 */
  --teal-500: #12B8A6;   /* 深填充 */

  /* ---------- 5. 冷调科技金（金蟾图腾。低饱和香槟金，绝非土豪金） ---------- */
  --gold-200: #F6E6BE;   /* 高光 */
  --gold-300: #EFD9A2;   /* 金色文字（大字/小字均达标） */
  --gold-400: #E4C489;   /* ★ 主金。Logo、渐变收尾、金色描边 */
  --gold-500: #C9A567;   /* 暗金、分隔金线 */

  /* ---------- 6. 语义色 ---------- */
  --success: #3DD68C;
  --warn:    #FFB454;   /* ★ 诚实交底提示条专用 */
  --danger:  #FF6B6B;
  --info:    var(--brand-400);

  /* ---------- 7. 边框与分隔线（一律用 fg-1 的透明度，避免出现第五种灰） ---------- */
  --line-1: rgba(233,239,250,.08);  /* 默认卡片边、分隔线 */
  --line-2: rgba(233,239,250,.14);  /* 交互元素边：按钮、输入框、chip */
  --line-3: rgba(233,239,250,.22);  /* hover 边 */
  --line-gold: rgba(228,196,137,.28);
  --line-brand: rgba(30,155,238,.32);

  /* ---------- 8. 玻璃拟态材质 ---------- */
  --glass-bg:     rgba(255,255,255,.05);
  --glass-bg-2:   rgba(255,255,255,.08);   /* hover */
  --glass-line:   rgba(255,255,255,.10);
  --glass-blur:   blur(16px) saturate(140%);
  --glass-blur-nav: blur(18px) saturate(150%);

  /* ---------- 9. 渐变 ---------- */
  /* AI 强调渐变：青 → 蓝 → 靛 → 金收尾。金只占最后 26%，做"光的尖端"，
     既避开通用 AI 紫粉渐变，又把金蟾图腾写进色彩语言 */
  --grad-ai:       linear-gradient(100deg,#1FD1C1 0%,#2E9BF0 40%,#5C8CF6 74%,#E9C98C 100%);
  --grad-ai-text:  linear-gradient(96deg,#35D6C4 0%,#4FB4F5 42%,#E9C98C 100%); /* 短文字（≤8 字）用这条 */
  --grad-ai-soft:  linear-gradient(100deg,rgba(31,209,193,.14),rgba(46,155,240,.14) 45%,rgba(233,201,140,.14));
  /* 品牌渐变：按钮、进度条。只有蓝→青，不带紫 */
  --grad-brand:    linear-gradient(100deg,#1E9BEE 0%,#35D6C4 100%);
  /* 金属数字渐变：白 → 浅蓝的竖向衰减，用于大数字 */
  --grad-metal:    linear-gradient(180deg,#FFFFFF 0%,#8FD0FA 100%);
  /* 金渐变：仅用于 Logo 的「金蟾」二字与极小面积点缀 */
  --grad-gold:     linear-gradient(135deg,#F6E6BE 0%,#E4C489 45%,#C9A567 100%);
  /* 描边渐变（渐变边框卡用） */
  --grad-line:     linear-gradient(120deg,rgba(53,214,196,.55),rgba(30,155,238,.45) 45%,rgba(228,196,137,.35));

  /* ---------- 10. 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-num:  ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
               Menlo, Consolas, "Courier New", monospace;   /* 数字/代码/眉标 */

  /* ---------- 11. 字号阶梯（响应式 clamp） ---------- */
  --fs-display: clamp(28px, 3.9vw, 48px);  /* 首页 Hero 主标题 */
  --fs-h1:      clamp(27px, 3.4vw, 40px);  /* 内页 Hero */
  --fs-h2:      clamp(23px, 2.6vw, 34px);  /* 章节主标题 */
  --fs-h3:      clamp(19px, 1.8vw, 24px);  /* 区块小标题 */
  --fs-h4:      18px;                      /* 卡片标题 */
  --fs-lead:    clamp(16px, 1.3vw, 18px);  /* Hero 副标题、导语 */
  --fs-body:    16px;
  --fs-sm:      15px;                      /* 卡片描述、导航 */
  --fs-xs:      13px;                      /* 脚注、chip、眉标 */

  /* ---------- 12. 字重 / 行高 / 字间距 ----------
     ⚠️ Microsoft YaHei 在 Windows 上只有 400/700 两档，600 会被合成加粗。
        中文标题一律用 700，Latin/UI 元素才用 600。 */
  --fw-normal: 400;
  --fw-medium: 500;   /* 仅 Latin / 数字 */
  --fw-semi:   600;   /* 仅按钮、导航等 UI 文本 */
  --fw-bold:   700;   /* 所有中文标题 */

  --lh-tight:  1.14;  /* display / h1 */
  --lh-heading:1.28;  /* h2 / h3 */
  --lh-snug:   1.45;  /* h4、短句 */
  --lh-body:   1.75;  /* 中文正文（中文需要比英文更松） */

  /* Chinese display text reads more evenly at its native spacing. */
  --ls-tight:  0;      /* display */
  --ls-head:   0;      /* h1~h3 */
  --ls-body:  0;
  --ls-wide:  .16em;   /* 眉标 EYEBROW（全大写 Latin） */
  --ls-logo:  .14em;   /* Logo 中文字组 */

  /* ---------- 13. 间距阶梯（8pt 基准，4px 为半格） ---------- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px; --sp-24: 96px;  --sp-32: 128px;
  /* 一屏（section）垂直节奏 */
  --sp-section: clamp(52px, 5vw, 80px);
  --sp-section-sm: clamp(40px, 4vw, 56px);

  /* ---------- 14. 圆角阶梯 ---------- */
  --r-xs: 6px;    /* chip 内小标记 */
  --r-sm: 8px;    /* 输入框内小元素、小标签 */
  --r-md: 12px;   /* 输入框、提示条、小卡 */
  --r-lg: 16px;   /* 标准卡片 */
  --r-xl: 24px;   /* 大卡、转化区 */
  --r-2xl: 32px;  /* 全屏级容器 */
  --r-pill: 999px;

  /* ---------- 15. 阴影与发光阶梯 ---------- */
  --shadow-1: 0 2px 8px -2px rgba(0,0,0,.5);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-3: 0 20px 48px -16px rgba(0,0,0,.7);
  --shadow-4: 0 32px 80px -24px rgba(0,0,0,.8);
  --glow-brand-sm: 0 6px 20px -8px rgba(30,155,238,.70);
  --glow-brand:    0 10px 30px -8px rgba(30,155,238,.85);
  --glow-teal:     0 0 18px -4px rgba(53,214,196,.65);
  --glow-gold:     0 0 24px -6px rgba(228,196,137,.45);
  --ring-focus:    0 0 0 3px rgba(30,155,238,.28);   /* 输入框焦点环 */

  /* ---------- 16. z-index 层级 ---------- */
  --z-base: 0;
  --z-raised: 1;      /* section 内容压在 .fx 特效层之上 */
  --z-sticky: 50;     /* 锚点导航 */
  --z-nav: 100;       /* 全局吸顶导航 */
  --z-dropdown: 110;  /* 导航下拉（在 nav 的层叠上下文内） */
  --z-drawer: 120;    /* 移动端抽屉 */
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---------- 17. 动效时长与缓动 ---------- */
  --d-1: 120ms;  /* 颜色微变 */
  --d-2: 180ms;  /* hover */
  --d-3: 280ms;  /* 面板、卡片位移 */
  --d-4: 420ms;  /* 进场 reveal */
  --d-5: 700ms;  /* Hero 大位移 */
  --e-out:   cubic-bezier(.16, 1, .3, 1);    /* ★ 主力：强减速，"落位"感 */
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-in:    cubic-bezier(.55, 0, 1, .45);

  /* ---------- 18. 栅格与容器 ---------- */
  --container: 1200px;      /* 内容最大宽 */
  --container-wide: 1440px; /* 仅 Hero 背景 / 全宽图使用 */
  --container-text: 720px;  /* 纯文字段落最大宽（约 34 中文字/行） */
  --gutter: 24px;           /* ≥900px */
  --gutter-sm: 20px;        /* <900px */
  --cols: 12;
  --col-gap: 24px;

  /* ---------- 19. 组件常量 ---------- */
  --nav-h: 72px;
  --nav-h-sm: 64px;
  --btn-h: 48px;
  --btn-h-sm: 38px;
  --field-h: 48px;
}

@media (max-width: 899px) {
  :root { --gutter: var(--gutter-sm); --nav-h: var(--nav-h-sm); }
}

/* Breakpoints: 640px / 900px / 1200px / 1440px. */
