/* ============================================================
   郑州吉祥保洁 · 设计系统 Tokens
   风格：Swiss Modernism 2.0 × 工业服务可信感
   原则：严格 12 栏栅格、单一品牌红强调、高对比、数学化间距、无装饰
   ============================================================ */

:root {
  /* ---------- 色彩 ---------- */
  --color-primary: #C8000A;        /* 品牌红（由 logo #E5000B 加深，保证白字对比度 ≥4.5:1） */
  --color-primary-dark: #9E0008;   /* 主色深：hover / active */
  --color-primary-light: #F5E3E4;  /* 主色浅底：选中态、弱强调底 */

  --color-ink: #1A1D21;            /* 工业墨：正文、标题 */
  --color-ink-secondary: #5A6472;  /* 钢灰：辅助文字 */
  --color-ink-muted: #6E7783;      /* 弱文字：占位、说明（对白底 4.5:1，满足 AA） */

  --color-border: #D5DAE1;         /* 中灰边框 */
  --color-border-strong: #AEB6C1;  /* 强边框 */
  --color-surface: #F4F6F8;        /* 浅灰底纹：区块交替 */
  --color-surface-alt: #EBEEF2;    /* 深一档底纹 */
  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-accent-safety: #E8720C;  /* 安全橙：仅用于高空作业安全提示、应急信息，克制使用 */
  --color-accent-safety-strong: #B85A00; /* 安全橙文字档：白底上 4.6:1（原色仅 3.0:1） */
  --color-success: #1B7F4B;        /* 成功状态 */
  --color-error: #C8000A;          /* 错误状态复用主色 */

  /* 深色区块（安全、CTA 区） */
  --color-dark-bg: #1A1D21;
  --color-dark-bg-alt: #23272D;
  --color-dark-border: rgba(255, 255, 255, 0.08);
  --color-dark--button-border: rgba(255, 255, 255, 0.54);
  --color-dark-text: #FFFFFF;
  --color-dark-text-secondary: rgba(255, 255, 255, 0.72);

  /* ---------- 字体 ---------- */
  --font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
                 "Noto Sans CJK SC", "Microsoft YaHei", "Hiragino Sans GB",
                 system-ui, -apple-system, sans-serif;
  --font-family-numeric: "DIN Alternate", "Bahnschrift", "Helvetica Neue",
                         Arial, var(--font-family);

  --fs-hero: clamp(2rem, 4.4vw, 3.25rem);      /* 40-52px 首页主标题 */
  --fs-h1: clamp(1.75rem, 3.2vw, 2.5rem);      /* 28-40px 页面标题 */
  --fs-h2: clamp(1.375rem, 2.2vw, 1.75rem);    /* 22-28px 区块标题 */
  --fs-h3: 1.1875rem;                           /* 19px 卡片/小节标题 */
  --fs-h4: 1.0625rem;                           /* 17px 列表标题 */
  --fs-body: 1rem;                              /* 16px 正文 */
  --fs-body-sm: 0.9375rem;                      /* 15px 辅助正文 */
  --fs-sm: 0.875rem;                            /* 14px 说明文字 */
  --fs-xs: 0.8125rem;                           /* 13px 标签、元信息 */
  --fs-tiny: 0.75rem;                           /* 12px 页脚、备案 */

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.7;
  --lh-relaxed: 1.85;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;

  /* ---------- 栅格与间距（8px 基数） ---------- */
  --container-max: 1200px;
  --container-narrow: 860px;   /* 新闻正文等阅读宽度 */
  --container-wide: 1360px;

  --grid-columns: 12;
  --grid-gap: 24px;
  --grid-gap-sm: 16px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 88px;
  --section-padding: clamp(48px, 7vw, 88px);
  --section-padding-sm: clamp(36px, 5vw, 56px);

  /* ---------- 形状与边框 ---------- */
  --radius-none: 0;
  --radius-sm: 2px;    /* 按钮、输入框 */
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---------- 阴影（克制使用） ---------- */
  --shadow-none: none;
  --shadow-lightbox: 0 8px 32px rgba(0, 0, 0, 0.28);
  --shadow-dropdown: 0 4px 16px rgba(26, 29, 33, 0.10);

  /* ---------- 过渡 ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 250ms ease;

  /* ---------- 层级 ---------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-lightbox: 200;
  --z-mobile-nav: 90;      /* 低于页眉：全屏面板不遮住汉堡按钮，保证可再次点击关闭 */

  /* ---------- 布局常量 ---------- */
  --header-height: 68px;
  --header-height-mobile: 56px;
  --topbar-height: 36px;
}

/* ============================================================
   断点参考：375 / 768 / 1024 / 1440
   ============================================================ */