/* ==========================================================================
   小舟科技 · 设计令牌
   视觉方向：现代暖白 · 靛蓝。
   取向：浅底、深墨字、克制强调。客户是彩钢瓦厂、轴承厂、超市店长这类
   传统制造与零售业主，视觉要传达「可靠、专业、懂生意」，而不是「代码很酷」。
   命名与量纲自成一套，不沿用任何外部设计系统的 token。
   ========================================================================== */

/* ---------- 自托管字体 ----------
   只自托管拉丁/数字（Inter），中文字形走系统字体栈。
   不引用任何外部 CDN：Google Fonts 与境外字体服务在国内不可达。 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ======================================================================
     1. 色板
     ====================================================================== */

  /* 中性 —— 暖白纸面，不用纯白（纯白在屏幕上过于刺眼且显得廉价） */
  --c-paper: #fbfaf8;         /* 页面底 */
  --c-surface: #ffffff;       /* 卡片面 */
  --c-surface-alt: #f4f2ee;   /* 次级面 / 条带 */
  --c-surface-sunk: #ebe8e2;  /* 凹陷区 */

  --c-ink: #1c1e21;           /* 主文字，墨 */
  --c-ink-2: #3f4449;         /* 强次级 */
  --c-ink-3: #6b7178;         /* 正文次级 */
  --c-ink-4: #949aa1;         /* 弱文字、占位 */

  --c-line: #e2ded6;          /* 发丝描边（暖调，不用冷灰） */
  --c-line-2: #d3cec3;        /* 强描边 */

  /* 主色：靛蓝。取自蓝印花布的深靛，沉静、可信、有中国气而不土 */
  --c-indigo: #2f4a7a;
  --c-indigo-deep: #22375c;
  --c-indigo-light: #e8edf5;
  --c-indigo-tint: #f2f5fa;

  /* 点缀：印泥朱。仅用于极小的关键标记（印章、强调点） */
  --c-vermilion: #b4472f;

  /* 功能色 */
  --c-ok: #2f7d52;
  --c-info: #2f5f9e;
  --c-warn: #a8791f;
  --c-danger: #b23c34;

  /* 深色区块（页脚、深色 CTA） */
  --c-ink-deep: #1a1d21;
  --c-ink-deep-2: #24282d;
  --c-on-deep: #eef0f2;
  --c-on-deep-2: #a8aeb5;

  /* ======================================================================
     2. 字体
     黑体承载正文与标题（中文可读性最好）；宋体只用在少量点缀处
     （引言、大数字），形成「理」与「雅」的对比。
     ====================================================================== */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC',
    'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans SC', 'Microsoft YaHei',
    'Hiragino Sans GB', sans-serif;

  --font-serif: 'Songti SC', 'STSong', 'Source Han Serif SC', 'Noto Serif SC',
    'Times New Roman', SimSun, serif;

  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco,
    'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

  /* ======================================================================
     3. 字阶
     中文是全角字，视觉重量比拉丁大，同样的 pt 看着更大，
     所以标题字号比常见西文站保守一档，行高给足。
     ====================================================================== */

  --t-display: 60px;
  --t-h1: 44px;
  --t-h2: 34px;
  --t-h3: 24px;
  --t-h4: 19px;
  --t-body: 16px;
  --t-body-sm: 15px;
  --t-sm: 13px;
  --t-xs: 12px;

  /* ======================================================================
     4. 间距 / 圆角 / 阴影 / 动效
     ====================================================================== */

  --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;

  --layout-max: 1160px;
  --section-gap: 112px;

  /* 圆角只两档：卡片与按钮同源，克制 */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* 暖白底上需要一点阴影才立得住，比深色底克制得多 */
  --sh-sm: 0 1px 2px rgba(28, 30, 33, 0.04);
  --sh-md: 0 2px 8px rgba(28, 30, 33, 0.06);
  --sh-lg: 0 8px 28px rgba(28, 30, 33, 0.08);
  --sh-btn: 0 1px 2px rgba(28, 30, 33, 0.08);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 200ms;
  --dur-slow: 640ms;

  /* ======================================================================
     5. 响应式收敛层
     只在小屏收窄，不改变上线的字号上限。
     ====================================================================== */

  --fs-display: clamp(30px, 6.4vw, var(--t-display));
  --fs-h1: clamp(27px, 4.6vw, var(--t-h1));
  --fs-h2: clamp(23px, 3.4vw, var(--t-h2));
  --fs-h3: clamp(19px, 2.2vw, var(--t-h3));

  --gutter: 24px;
}

@media (max-width: 900px) {
  :root {
    --section-gap: 76px;
    --gutter: 20px;
  }
}