/* ============================================================================
   设计令牌（Design Tokens）
   ----------------------------------------------------------------------------
   ⚠️ 全站的颜色 / 间距 / 字体只在本文件定义，其它 CSS 一律引用变量。

   参考：docs/05-门户设计参考.md（CAE 布局 + 华为配色手法）
   ========================================================================= */

:root {
    /* ── 品牌色 ──────────────────────────────────────────────────────────
       主色取自龙昊 logo 里**"龙"的配色**，非肉眼判断。

       ⚠️ 2026-09-17 纠错：曾用**全局像素统计**把主色定成蓝色 `#2167a5` ——
       那是 logo 里**"球"**的颜色（占图形标 42%），不是品牌主视觉。
       **面积大 ≠ 是主视觉。** 业务方指出 logo 突出的是**龙的红白黄**。

       重新按区域拆开统计（图形标 699×698，HSV + 4×4 网格）后确认：
         龙在**右下**（红色占比行3: 0/11/21/32，行4: 0/9/34/15）
         暖色众数 **#C42C30（27,356 px）** —— 就是"龙"的红，两个 logo 完全一致
         金黄 #DE8B1F 系约 1,800 px —— 辅助色

       配色手法来自参考站：大面积白底 + 一个主色克制点缀 + 灰阶撑层级。
       ⚠️ 不要使用参考站自身的品牌色（那是对方的品牌资产）。
       完整依据见 docs/05-门户设计参考.md §3.3.1。
       ────────────────────────────────────────────────────────────────── */
    --brand:        #c42c30;  /* 龙的红 —— logo 暖色众数，白底 5.60:1 */
    --brand-strong: #a32226;  /* 按下 / hover 加深，白底 7.46:1 */
    --brand-soft:   #fceceb;  /* 浅底块 */
    --brand-accent: #de8b1f;  /* 龙的金黄 —— ⚠️ 仅装饰，不可用于文字（白底仅 2.69:1） */

    /* ── 背景 ─────────────────────────────────────────────────────────── */
    --bg:           #ffffff;  /* 页面底 —— 大面积留白是主调 */
    --bg-subtle:    #f5f5f5;  /* 分区底，用来切分内容块 */
    --bg-dark:      #2f3762;  /* 深色板块 —— 取自 logo 里**文字**的实色（白字于其上 11.39:1） */

    /* ── 文字 ─────────────────────────────────────────────────────────── */
    --text:         #333333;  /* 标题、正文 */
    --text-muted:   #666666;  /* 次级说明 */
    --text-faint:   #999999;  /* 时间、标签等弱信息 */
    --text-inverse: #ffffff;  /* 深色底上的文字 */
    --text-on-dark: rgb(255 255 255 / 70%);  /* 深色底上的次级文字 */

    /* ── 描边 ─────────────────────────────────────────────────────────── */
    --border:       #d4d4d4;  /* 常规分隔线 */
    --border-light: #eeeeee;  /* 轻微分隔，避免线条过重 */
    --border-on-dark: rgb(255 255 255 / 12%);  /* 深色底上的分隔线 */

    /* ── 布局 ─────────────────────────────────────────────────────────── */
    --container:    1280px;   /* 内容最大宽度 */
    --gutter:       24px;     /* 左右留白 */
    --header-h:     72px;     /* 页头高度，供吸顶与锚点偏移使用 */
    --section-gap:  80px;     /* 区块上下间距 —— 大留白，不要挤 */

    /* ── 细节 ─────────────────────────────────────────────────────────── */
    --radius:       4px;
    --shadow-sm:    0 1px 3px  rgb(0 0 0 / 8%);
    --shadow-md:    0 4px 16px rgb(0 0 0 / 10%);
    --transition:   0.2s ease;

    /* 滚动条滑块 —— 刻意用中性半透明黑而不是品牌色：滑块只有 6px 宽，
       染上龙红会变成一条刺眼的红边，反而更抢镜。hover 时才加深一点。 */
    --scrollbar-thumb:       rgb(0 0 0 / 18%);
    --scrollbar-thumb-hover: rgb(0 0 0 / 34%);

    /* ── 字体 ─────────────────────────────────────────────────────────── */
    --font-sans: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
                 "Source Han Sans SC", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 断点（浏览器不支持把媒体查询写进变量，此处仅作文档记录）：
   640px  平板竖屏
   768px  平板横屏
   1024px 小笔记本
   1440px 大屏
   移动端优先，逐级向上覆盖。 */