/* ============================================================
   Colinux.cn 设计系统 · CSS 变量层（样式标准）
   来源：Figma「Colinux 26 / Page 2」多节点：
         37-7634 导航/Logo · 55-1819 探索（标题/tab/内容卡）· 84-5685 管理（白色卡片/内嵌卡/统计卡）
         55-2084 响应式
   主题：暗色 = :root 默认；亮色 = [data-theme="light"] 覆盖。
         切换时间跟随系统：18:30 后暗色，06:30 后亮色（JS 控制）。
   导航：双主题恒定白色（--cx-nav-* 不随主题变化）· 悬浮卡片 r=16 离左右 32 离顶部 16。
   用法：全站页面（前台/后台/FIRE 模块等）统一引用本文件，
         只允许使用这里的变量，不再散落硬编码色值与字号。
   ============================================================ */

:root {
  /* ---------- 颜色 · 暗色（默认主题） ---------- */
  --cx-bg:            #272727;  /* 主背景（Home/月票大厅/文章） */
  --cx-bg-deep:       #000000;  /* 深背景（探索页/首屏） */
  --cx-bg-elevated:   #111111;  /* 卡片/浮层 */
  --cx-fg:            #FFFFFF;  /* 主文字 */
  --cx-fg-soft:       #E5E5E5;  /* 次级文字 */
  --cx-muted:         #A1A1A1;  /* 弱化说明 */
  --cx-faint:         #BCBCBC;  /* 占位/更弱 */
  --cx-line:          #333333;  /* 分隔线/描边 */
  --cx-line-strong:   #858585;  /* 强调描边 */
  --cx-accent:        #FF3437;  /* 品牌红 · 核心强调 */
  --cx-accent-warm:   #FF9522;  /* 暖橙 · 次强调 */
  --cx-accent-warm-deep: #ED4700;
  /* ⚠️ 废弃（v2.2）：feed-card 不再用彩色色相，跟随主题黑白；变量保留避免旧样式崩溃 */
  --cx-tag-blue:      #0A7FFB;
  --cx-tag-indigo:    #242894;
  --cx-tag-cyan:      #22BFD7;
  --cx-tag-purple:    #7A45F2;

  /* ---------- 导航 · 双主题恒定（不随主题变化） ---------- */
  --cx-nav-bg:        #FFFFFF;  /* 导航背景 · 常白（悬浮卡片） */
  --cx-nav-fg:        #000000;  /* 导航文字/图标/Logo · 常黑 */
  --cx-nav-line:      #ECECEC;  /* 导航底部分隔线 */
  --cx-nav-pill:      #F8F8F8;  /* 语言切换胶囊底色 */
  --cx-nav-radius:    16px;     /* 悬浮卡片倒角（Figma 1856×70 r=16） */
  --cx-nav-gap-x:     32px;     /* 距左右恒定 32px */
  --cx-nav-gap-y:     16px;     /* 距顶部恒定 16px */
  --cx-nav-h:         70px;     /* 悬浮卡高度（Figma 1856×70） */
  --cx-nav-logo-h:    32px;     /* Logo 图形高（Figma 68.9×31.7） */

  /* ---------- 页面大标题（ugreen.design 同款：128px 中英各一行 + 分割线） ---------- */
  --cx-title-fs:      128px;    /* 探索 EXPLORE 128px / 管理 Admin 120px */
  --cx-title-admin-fs: 120px;
  --cx-title-weight:  500;      /* 大标题字重 w500（非全站 550） */
  --cx-title-lh:      1.0;      /* Figma lhPx=128 */
  --cx-title-line:    #F8F8F8;  /* v2.3 第 8 条：暗色分割线 = 白线（亮色 #000000） */
  --cx-title-divider: 1px solid var(--cx-title-line);  /* 大标题底部全宽分割线（Figma Line 622） */

  /* ---------- 分类 tab（Figma 55:1819：上下黑线 + 胶囊） ---------- */
  --cx-tab-radius:    24px;     /* 胶囊圆角（v2.3 选中态不用胶囊底，hover 背景可复用） */
  --cx-tab-fs:        16px;
  --cx-tab-weight:    500;
  --cx-tab-h:         40px;     /* 胶囊高 */
  --cx-tab-bg:        transparent; /* v2.3 第 8 条：暗色无黑色底（原 #000000 作废），露出探索页深背景 */
  --cx-tab-line:      #F8F8F8;  /* v2.3 第 8 条：暗色上下分割线 = 白线（黑色线在暗底不可见） */
  --cx-tab-active:    #272727;  /* ⚠️ v2.3 起选中态 = 品牌红文字，不再用胶囊底；保留兼容 */
  --cx-tab-action-bg: #FFFFFF;  /* 操作钮（发布）反色：暗色白底（仅后台操作钮） */
  --cx-tab-action-fg: #000000;  /* 暗色黑字 */

  /* ---------- 通用 hover（v2.3：透明度降到 80%） ---------- */
  --cx-hover-opacity: 0.8;      /* 按钮（整钮颜色）/超链文字/tab（文字颜色）hover 透明度 */
  --cx-hover-transition: 0.2s;

  /* ---------- 卡片体系（Figma 84:5685 管理 + 55:1819 探索） ---------- */
  --cx-card-inset:    #2A2A2A;  /* 内嵌子卡底色（卡中卡，暗色抬高一级） */
  --cx-card-border:   transparent; /* v2.3 第 8 条：暗色描边卡无描边（原 #E3E5E5 白色描边作废） */
  --cx-card-pad:      16px;     /* 小卡统一内边距（内容卡 body / 内嵌子卡 / 作品卡 body） */
  --cx-card-pad-lg:   32px;     /* v2.3 第 11 条：大卡统一内边距（section-card / user-card / 功能模块卡） */
  --cx-card-cover-placeholder: url("https://co-ux-colin2020.oss-cn-shenzhen.aliyuncs.com/daily-img/HetTap-article-cover.jpg"); /* v2.3 封面占位图：feed-card 永远有封面图 */

  /* ---------- 字体 ---------- */
  /* OPPO Sans 4.0 / OnePlus Sans 为商业字体，Web 端按回退链处理 */
  --cx-font-primary:  "OPPO Sans 4.0", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --cx-font-display:  "OnePlus Sans Display", "OPPO Sans 4.0", "PingFang SC", system-ui, sans-serif;
  --cx-font-display-cn: "M Ying Hei PRC", "OPPO Sans 4.0", "PingFang SC", "Noto Sans SC", sans-serif;
  --cx-font-script:   "Pacifico", cursive;

  --cx-weight-medium: 550;
  --cx-weight-regular: 400;
  --cx-weight-bold:   700;
  --cx-weight-section-head: 750;  /* 管理面板区块头（整站预览/功能模块） */

  /* ---------- 字号（桌面基准 1920） ---------- */
  --cx-fs-display: 128px;   /* 页面大标题（探索 EXPLORE / 管理 Admin=120） */
  --cx-fs-admin-title: 120px;
  --cx-fs-h1:      60px;
  --cx-fs-h2:      48px;
  --cx-fs-h3:      36px;
  --cx-fs-h4:      32px;
  --cx-fs-h5:      24px;
  --cx-fs-body-lg: 18px;
  --cx-fs-body:    16px;   /* 正文基准 · tab/区块头基准 */
  --cx-fs-small:   14px;

  --cx-lh-display: 1.0;     /* 128px 大标题（Figma lhPx=128） */
  --cx-lh-heading: 1.2;
  --cx-lh-body:    1.42;   /* 16 → 22.7 */
  --cx-lh-relaxed: 1.8;
  --cx-lh-card-title: 1.17;    /* 内容卡标题 14px（Figma 16.4） */
  --cx-lh-card-excerpt: 1.17;  /* 内容卡摘要 13px（Figma 15.2） */

  /* ---------- 圆角 ---------- */
  --cx-radius-sm:   8px;    /* 小元件 · 语言胶囊 */
  --cx-radius-md:   10px;
  --cx-radius-card: 16px;   /* 内容卡/内嵌子卡/导航卡（Figma 55:1819 r=16） */
  --cx-radius-tab:  24px;   /* 分类 tab 胶囊 */
  --cx-radius-section: 32px;/* 分区大卡（整站预览/功能模块 r=32） */
  --cx-radius-lg:   18px;   /* 旧大卡（v2.1 兼容保留） */
  --cx-radius-pill: 999px;  /* 胶囊/标签/圆钮 */

  /* ---------- 卡片/标签/头像（Figma「探索」55:1819 + 管理 84:5685） ---------- */
  --cx-shadow:        0 1px 3px rgba(0, 0, 0, .06);    /* 卡片基础阴影 */
  --cx-shadow-lg:     0 10px 25px rgba(0, 0, 0, .12);  /* 卡片 hover 阴影 */
  --cx-chip-bg:       #2A2A2A;   /* 标签胶囊底色（暗色） */
  --cx-avatar-bg:     #3A3A3A;   /* 头像占位底色（暗色） */
  --cx-card-cover-bg: #1D1E24;   /* 卡片封面占位底（暗色） */

  /* ---------- 间距（基础单位 4/8/16/32/64 · Figma「响应式」） ---------- */
  --cx-space-xs: 4px;      /* 基数 ×1（320-768 Grid Unit=4） */
  --cx-space-sm: 8px;      /* 基数 ×2（768-1280 Grid Unit=8） */
  --cx-space-md: 16px;     /* 基数 ×4（1280+ Grid Unit=16）· 卡片内边距/移动端边距 */
  --cx-space-lg: 32px;     /* 基数 ×8 · 桌面端边距/大卡片间距 */
  --cx-space-xl: 64px;     /* 基数 ×16 · 区块间隔 */

  /* ---------- 响应式（Figma「响应式」node 55:2084） ---------- */
  /* 基础单位 */
  --cx-unit-1: 4px;
  --cx-unit-2: 8px;
  --cx-unit-3: 16px;
  /* 内容边距：0-1023px 用 16，≥1024px 用 32（优先保证） */
  --cx-margin-mobile: 16px;
  --cx-margin-desktop: 32px;
  /* 容器：优先保证两边边距，屏幕够大才限制最大宽 1820px */
  --cx-container-max: 1820px;
  --cx-container-1440: 1408px;   /* 1440 视口内容区下限 */
  --cx-container-1280: 1216px;
  --cx-container-768: 736px;
  --cx-container-320: 288px;
  /* 断点（min-width 判定用，max-width = 值-1） */
  --cx-bp-phone: 767px;      /* 手机 0-767 */
  --cx-bp-tablet: 1023px;    /* 平板/折叠屏 768-1023 */
  --cx-bp-ipad-pro: 1279px;  /* iPad Pro 横屏 1024-1279 */
  --cx-bp-nav-switch: 1280px;/* 导航切换节点：<1280 移动端导航 / ≥1280 PC 铺开 */
  --cx-bp-laptop: 1439px;    /* 笔记本 13寸 1280-1439 */
  --cx-bp-desktop: 1919px;   /* 主流桌面 1440-1919（相对字号起点） */
  --cx-bp-big: 1920px;       /* 大屏/4K ≥1920 */
  /* Grid 列数 */
  --cx-grid-columns-320: 12;
  --cx-grid-columns-768: 6;
  --cx-grid-columns-1280: 8;
}

/* ---------- 亮色主题（[data-theme="light"] 覆盖） ---------- */
[data-theme="light"] {
  --cx-bg:            #F7F7F7;
  --cx-bg-deep:       #F7F7F7;
  --cx-bg-elevated:   #FFFFFF;
  --cx-fg:            #000000;
  --cx-fg-soft:       #373737;
  --cx-muted:         #5D6166;
  --cx-faint:         #D1D1D1;
  --cx-line:          #ECECEC;
  --cx-line-strong:   #BCBCBC;
  --cx-accent:        #FF3437;  /* 品牌红双主题同色 */
  --cx-accent-warm:   #ED4700;  /* 亮色加深保证对比 */
  --cx-accent-warm-deep: #C23A00;
  --cx-tag-blue:      #0A7FFB;  /* 废弃保留 */
  --cx-tag-indigo:    #242894;  /* 废弃保留 */
  --cx-tag-cyan:      #0E8FA0;  /* 废弃保留 */
  --cx-tag-purple:    #6B36E0;  /* 废弃保留 */
  /* 亮色主题卡片/标签/头像（Figma「探索」：chip #F0F0F0 / avatar #D9D9D9 / 卡片白底+阴影） */
  --cx-chip-bg:       #F0F0F0;
  --cx-avatar-bg:     #D9D9D9;
  --cx-card-cover-bg: #F7F7F7;
  --cx-card-inset:    #F8F8F8;  /* 内嵌子卡 · 用户指定 #F8F8F8（Figma 亮稿标 #F7F7F7） */
  --cx-shadow:        0 1px 3px rgba(0, 0, 0, .06);
  --cx-shadow-lg:     0 10px 25px rgba(0, 0, 0, .1);
  /* tab 亮色：容器 = 页背景；v2.3 选中态 = 品牌红文字（无胶囊底）；操作钮 = 黑底白字 */
  --cx-tab-bg:        #F7F7F7;
  --cx-tab-line:      #000000;  /* 亮色分割线 = 黑线（保持） */
  --cx-tab-active:    #FFFFFF;  /* 保留兼容（hover 背景） */
  --cx-tab-action-bg: #000000;
  --cx-tab-action-fg: #FFFFFF;
  --cx-title-line:    #000000;  /* 亮色大标题分割线 = 黑线（保持） */
  --cx-card-border:   #E3E5E5;  /* 亮色描边卡保留 #E3E5E5 描边（暗色无描边） */
  /* 导航 token 不覆盖 —— 保持常白 */
}

/* ---------- 相对字号（Figma「响应式」字号策略：≥1440 主流桌面/大屏用相对字号） ----------
   1440 视口 = 设计基准的 75%，1920 = 100%，大屏继续放大并封顶。
   标题全量相对缩放；正文/说明保可读性下限。 */
@media (min-width: 1440px) {
  :root {
    --cx-fs-display: clamp(96px, 6.67vw, 160px);
    --cx-fs-admin-title: clamp(90px, 6.25vw, 150px);
    --cx-fs-h1: clamp(45px, 3.125vw, 75px);
    --cx-fs-h2: clamp(36px, 2.5vw, 60px);
    --cx-fs-h3: clamp(27px, 1.875vw, 45px);
    --cx-fs-h4: clamp(24px, 1.667vw, 40px);
    --cx-fs-h5: clamp(18px, 1.25vw, 30px);
    --cx-fs-body-lg: clamp(16px, 0.938vw, 22px);
    --cx-fs-body: clamp(15px, 0.833vw, 19px);
    --cx-fs-small: clamp(13px, 0.729vw, 16px);
  }
}

/* ---------- 基础应用（可选引入） ---------- */
.cx-body {
  background: var(--cx-bg);
  color: var(--cx-fg);
  font-family: var(--cx-font-primary);
  font-weight: var(--cx-weight-medium);
  font-size: var(--cx-fs-body);
  line-height: var(--cx-lh-body);
}
.cx-card {
  background: var(--cx-bg-elevated);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-card);
  padding: var(--cx-space-sm) var(--cx-space-md);
}
.cx-card--section {           /* 分区大卡（整站预览/功能模块） */
  background: var(--cx-bg-elevated);
  border-radius: var(--cx-radius-section);
  padding: var(--cx-card-pad-lg);  /* v2.3 第 11 条：大卡统一边距 32px */
}
.cx-card--inset {             /* 内嵌子卡（卡中卡 #F8F8F8） */
  background: var(--cx-card-inset);
  border-radius: var(--cx-radius-card);
}
.cx-card--bordered {          /* 描边卡（用户卡 1px #E3E5E5） */
  background: var(--cx-bg-elevated);
  border: 1px solid var(--cx-card-border);
}
.cx-btn {
  display: inline-block;
  background: var(--cx-accent);
  color: #FFFFFF;
  border-radius: var(--cx-radius-sm);
  padding: var(--cx-space-sm) var(--cx-space-md);
  font-weight: var(--cx-weight-medium);
  text-decoration: none;
}
.cx-btn--ghost {
  background: transparent;
  border: 1px solid var(--cx-line-strong);
}
/* 通用 hover 规则（v2.3）：按钮整钮颜色 / 超链文字 / tab 文字 → 透明度 80%。
   整卡链接（feed-card/work-card/book-card/blog-card/site-logo）保持 shadow 提升，不透明度不变。 */
:where(button, .cx-btn, .cx-btn--ghost, .user-btn):hover {
  opacity: var(--cx-hover-opacity);
}
:where(a:not(.feed-card):not(.work-card):not(.book-card):not(.blog-card):not(.site-logo), .page-tab, .page-tab-action):hover {
  opacity: var(--cx-hover-opacity);
}
button, .cx-btn, a, .page-tab, .page-tab-action, .user-btn {
  transition: opacity var(--cx-hover-transition) ease;
}
.cx-tag {
  border-radius: var(--cx-radius-pill);
  padding: 2px var(--cx-space-sm);
  font-size: var(--cx-fs-small);
}

/* ---------- 图标通用类（配合 /assets/icons/*.svg，currentColor 上色） ---------- */
.icon-sprite { display: none; }  /* 内联 sprite 容器（partials/icons.ejs）隐藏 */
.cx-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  color: currentColor;
}
.cx-icon svg,
.cx-icon img {
  width: 100%;
  height: 100%;
  display: block;
}