/*
 Theme Name: 绿美工程 (GreenMei Engineering)
 Theme URI: https://www.wxlvmei.com
 Description: 绿美环境科技工程端 WordPress 主题 · 搭积木式板块架构 (block patterns)。工业/市政节能工程视觉，钢蓝骨架配安全橙行动点。
 Version: 0.1.2
 Requires at least: 6.0
 Tested up to: 6.6
 Requires PHP: 7.4
 Text Domain: greenmei
 Author: 绿美技术团队
 License: MIT
*/

/* ============================================================
   绿美工程端 · 设计令牌 (Design Tokens)
   策略：钢蓝为骨、安全橙为警示/行动点
   钢蓝骨架 + 安全橙行动点 → 工程/工业/务实观感
   ============================================================ */
:root {
  /* —— 主色：钢蓝体系（工程/工业/稳重）—— */
  --gm-steel-900: #0E2233;   /* 最深，页脚/重背景 */
  --gm-steel-800: #14293D;
  --gm-steel-700: #1B3A5B;   /* 主品牌色 */
  --gm-steel-600: #25507A;
  --gm-steel-500: #3A6B9E;
  --gm-steel-300: #8FB0CE;
  --gm-steel-100: #DCE7F1;

  /* —— 强调色：安全橙（工程警示 / CTA 行动点）—— */
  --gm-orange-600: #D97800;
  --gm-orange-500: #F39200;   /* 主行动色 */
  --gm-orange-400: #FFA833;
  --gm-orange-100: #FFE8CC;

  /* —— 辅助：工程黄（技术标注/警示）—— */
  --gm-yellow-500: #FFC20E;

  /* —— 中性灰阶 —— */
  --gm-ink: #1A1F26;          /* 正文 */
  --gm-grey-700: #3D4651;
  --gm-grey-500: #6B7682;
  --gm-grey-300: #B7C0C9;
  --gm-grey-100: #E7ECF0;
  --gm-grey-50:  #F4F7FA;
  --gm-white: #FFFFFF;

  /* —— 语义 —— */
  --gm-bg: var(--gm-grey-50);
  --gm-surface: var(--gm-white);
  --gm-text: var(--gm-ink);
  --gm-text-soft: var(--gm-grey-700);
  --gm-primary: var(--gm-steel-700);
  --gm-accent: var(--gm-orange-500);
  --gm-border: var(--gm-grey-100);
  --gm-link: var(--gm-steel-600);
  --gm-link-hover: var(--gm-orange-500);

  /* —— 排版 —— */
  --gm-font-sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --gm-font-mono: "SFMono-Regular", "Consolas", "Roboto Mono", monospace; /* 技术标注用 */
  --gm-fs-xs: 12px;
  --gm-fs-sm: 14px;
  --gm-fs-base: 16px;
  --gm-fs-md: 18px;
  --gm-fs-lg: 22px;
  --gm-fs-xl: 30px;
  --gm-fs-2xl: 40px;
  --gm-fs-3xl: 54px;

  /* —— 间距 / 圆角 / 阴影 —— */
  --gm-space: 8px;
  --gm-radius-sm: 4px;
  --gm-radius: 8px;
  --gm-radius-lg: 14px;
  --gm-shadow-sm: 0 1px 3px rgba(14,34,51,.08);
  --gm-shadow: 0 4px 16px rgba(14,34,51,.10);
  --gm-shadow-lg: 0 12px 40px rgba(14,34,51,.16);
  --gm-container: 1200px;
}

/* ============================================================
   基础重置（仅工程端基调，块编辑器样式可覆盖）
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--gm-font-sans);
  font-size: var(--gm-fs-base);
  line-height: 1.7;
  color: var(--gm-text);
  background: var(--gm-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gm-link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gm-link-hover); }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5,h6 { font-family: var(--gm-font-sans); color: var(--gm-steel-800); line-height: 1.25; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: var(--gm-fs-3xl); letter-spacing: -.5px; }
h2 { font-size: var(--gm-fs-2xl); }
h3 { font-size: var(--gm-fs-xl); }

/* 工程感细节：标题前的钢蓝短竖线（通过区块 class 启用） */
.gm-title-bar { position: relative; padding-left: 16px; }
.gm-title-bar::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em;
  width: 5px; background: var(--gm-orange-500); border-radius: 2px;
}

/* 容器 */
.gm-container { max-width: var(--gm-container); margin: 0 auto; padding: 0 20px; }

/* 技术标注（等宽小字，工程蓝图感） */
.gm-tech-tag {
  font-family: var(--gm-font-mono); font-size: var(--gm-fs-xs);
  color: var(--gm-orange-600); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--gm-orange-100); background: var(--gm-orange-100);
  padding: 2px 8px; border-radius: 3px; display: inline-block;
}

/* 通用按钮（工程端实心钢蓝 / 安全橙 CTA） */
.gm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--gm-fs-sm);
  padding: 12px 22px; border-radius: var(--gm-radius-sm);
  border: 2px solid transparent; cursor: pointer; transition: all .15s;
  font-family: var(--gm-font-sans);
}
.gm-btn--primary { background: var(--gm-steel-700); color: #fff; }
.gm-btn--primary:hover { background: var(--gm-steel-800); color: #fff; }
.gm-btn--accent  { background: var(--gm-orange-500); color: #1A1F26; }
.gm-btn--accent:hover { background: var(--gm-orange-400); color: #1A1F26; }
.gm-btn--ghost   { background: transparent; color: var(--gm-steel-700); border-color: var(--gm-steel-500); }
.gm-btn--ghost:hover { background: var(--gm-steel-700); color: #fff; }

/* 卡片（工程案例/方案通用底） */
.gm-card {
  background: var(--gm-surface); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius); overflow: hidden; box-shadow: var(--gm-shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.gm-card:hover { transform: translateY(-4px); box-shadow: var(--gm-shadow); border-color: var(--gm-steel-300); }

/* 网格线工程纹理（section 背景可选） */
.gm-blueprint {
  background-color: var(--gm-steel-800);
  background-image:
    linear-gradient(rgba(143,176,206,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,176,206,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #fff;
}
.gm-blueprint h1, .gm-blueprint h2, .gm-blueprint h3 { color: #fff; }

/* 无障碍：焦点可见 */
a:focus-visible, button:focus-visible, .gm-btn:focus-visible {
  outline: 3px solid var(--gm-orange-500); outline-offset: 2px;
}