/* ============================================================
   常熟市高技能人才协会 · 设计令牌 (Design Tokens)
   视觉基因取自协会 LOGO：江南蓝 #1FB9EF / 中国红 #DC5855 / 竹青 #6FB500
   ============================================================ */

:root {
  /* ---- 品牌色：以 LOGO 蓝为轴，向下压出可读的深色阶 ---- */
  --brand-700: #0A5C8C;
  --brand-600: #0B6FA8;
  --brand-500: #0E86C6;
  --brand-400: #19A3DE;
  --brand-300: #1FB9EF;
  --brand-200: #9BDCF4;
  --brand-100: #DFF3FB;
  --brand-50:  #F0FAFE;

  /* ---- 墨色：深海军蓝，取代纯黑 ---- */
  --ink-950: #071C2E;
  --ink-900: #0A2438;
  --ink-800: #0E3149;
  --ink-700: #164A6B;

  /* ---- 文字层级 ---- */
  --text:    #16283A;
  --text-2:  #4C6275;
  --text-3:  #7A8FA1;

  /* ---- 表面与描边 ---- */
  --paper:   #FBFBFA;
  --paper-2: #F4F7F9;
  --surface: #FFFFFF;
  --line:    #E4E9EE;
  --line-2:  #EFF3F6;

  /* ---- 语义色（取自 LOGO 的红与绿，降饱和以适配大面积） ---- */
  --red:     #C64B45;
  --red-50:  #FDF1F0;
  --green:   #5F9C24;
  --green-50:#F2F8EA;
  --amber:   #B2761E;

  /* ---- 字体 ---- */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-sans:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --font-num:   "Inter", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;

  /* ---- 字号（clamp 自适应，不堆断点） ---- */
  --fs-display: clamp(38px, 4.6vw, 62px);
  --fs-h1:      clamp(30px, 3.4vw, 44px);
  --fs-h2:      clamp(24px, 2.4vw, 32px);
  --fs-h3:      20px;
  --fs-lead:    clamp(15px, 1.2vw, 17px);
  --fs-body:    15.5px;
  --fs-sm:      13.5px;
  --fs-xs:      12px;

  /* ---- 间距：8pt 栅格 ---- */
  --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;

  /* ---- 形状 ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- 阴影：两层以内，克制 ---- */
  --shadow-1: 0 1px 2px rgba(7, 28, 46, .04), 0 10px 28px -18px rgba(7, 28, 46, .28);
  --shadow-2: 0 2px 6px rgba(7, 28, 46, .05), 0 28px 56px -30px rgba(7, 28, 46, .35);
  --shadow-focus: 0 0 0 4px rgba(31, 185, 239, .22);

  /* ---- 动效 ---- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-spring:   cubic-bezier(.34, 1.3, .64, 1);
  --dur-fast: 150ms;
  --dur-mid:  280ms;
  --dur-slow: 600ms;

  /* ---- 布局 ---- */
  --wrap: 1180px;
  --gutter: 28px;
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
}