/* ============================================================
   HormLab Portal · Design Tokens v1.0
   来源：设计师稿 hormlab-portal-v1/index.html（色板全量保留）
   金色 accent 来自品牌金色 logo（#5B6CFF 系）
   ============================================================ */
:root {
  /* 色彩 · 品牌渐变 */
  --primary-blue: #5B6CFF;
  --primary-purple: #8B5CF6;
  --gradient-brand: linear-gradient(135deg, #5B6CFF 0%, #8B5CF6 100%);
  --gradient-hero: linear-gradient(135deg, #5B6CFF 0%, #8B5CF6 50%, #00E5C7 100%);
  --gradient-glow: radial-gradient(ellipse at 30% 20%, rgba(91,108,255,0.5) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 80%, rgba(139,92,246,0.4) 0%, transparent 50%),
                   radial-gradient(ellipse at 50% 50%, rgba(0,229,199,0.3) 0%, transparent 60%);

  /* 色彩 · 深色空间 */
  --space-dark: #0B1020;
  --space-deeper: #06091A;
  --space-card: #131A30;
  --cyan-glow: #00E5C7;
  --accent-teal: #00E5C7;
  --warm-orange: #FF8A65;

  /* 色彩 · 文字 */
  --text-dark: #1A1F36;
  --text-mid: #4A5568;
  --text-light: #7A8499;
  --text-lighter: #B0B8C9;
  --text-white: #FFFFFF;
  --text-white-soft: rgba(255,255,255,0.72);
  --text-white-muted: rgba(255,255,255,0.5);

  /* 色彩 · 浅色底 */
  --bg-light: #F5F7FB;
  --bg-card: #FFFFFF;
  --border-light: #E8ECF3;
  --border-light-2: #EFF2F8;

  /* 色彩 · 状态 */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(26,31,54,0.06);
  --shadow-md: 0 4px 12px rgba(26,31,54,0.08);
  --shadow-lg: 0 12px 24px rgba(26,31,54,0.12);
  --shadow-xl: 0 24px 48px rgba(26,31,54,0.16);
  --shadow-glow: 0 8px 32px rgba(91,108,255,0.24);
  --shadow-glow-cyan: 0 0 32px rgba(0,229,199,0.32);
  --shadow-glow-purple: 0 0 32px rgba(139,92,246,0.32);

  /* 圆角 */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* 字体 */
  --font-cn: 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num: 'DIN Pro', 'Inter', 'Helvetica Neue', monospace;

  /* 动效 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* 布局 */
  --max-w: 1200px;
  --nav-h: 72px;

  /* 站点常量（js/site-config.js 同步维护） */
  --icp: 鄂ICP备2026014055号-3;
}

/* <picture> 作为 WebP 与 JPEG 降级的透明包装层，
   不参与布局，使 .hero-bg img 等既有后代选择器保持生效 */
picture { display: contents; }

/* 图片基础规则：配合 <img> 的 width/height 属性提供固有宽高比。
   仅在 CSS 只约束单边（如 width:100%）时按比例推算另一边，
   避免图片加载完成前布局抖动（CLS）；更具体的类规则不受影响。 */
img { height: auto; }

/* 无障碍：跳到主内容（WCAG 2.4.1）——仅键盘聚焦时出现在页面顶部 */
.skip-link {
  position: absolute;
  left: 12px;
  top: -72px;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--gradient-brand);
  color: var(--text-white);
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: 0 6px 20px rgba(91, 108, 255, 0.35);
  text-decoration: none;
  transition: top 0.18s var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--accent-teal);
  outline-offset: 2px;
}
/* 跳转目标获得焦点时不显示多余描边 */
#main-content:focus,
#article:focus { outline: none; }