/* ============================================================================
 * 山水壮乡 3.0 设计变量（M88 v3.0 色板；PC/H5 共用）
 * 前缀约定：--sx-*（山水）——与 v1 --color-*（M46 桂红）/ v2 --zltc-*（M70）隔离并存
 * 值来源：《产品设计规范 v3.0》第二章色彩体系；本文件为唯一色值来源，禁止页面硬编码
 * 品牌底色：广西山水意境 + 壮乡民族气质；AI 智能光影 = 光效青
 * ============================================================================ */
:root {
  /* ---------- 色彩体系（山水自然色 + 智能科技感，M88 v3.0） ---------- */
  --sx-primary: #1E9B6A;            /* 主色・漓江翠：主按钮/搜索框边框/AI 高亮/重点强调 */
  --sx-primary-hover: #23A874;      /* 主色悬停（明度 +8%） */
  --sx-primary-soft: #E8F5EF;       /* 主色浅底（选中态/标签底/AI 回复背景） */
  --sx-zhuangjin-red: #C84539;      /* 辅助色・壮锦朱：标签/提示/重要操作/价格强调 */
  --sx-tonggu-gold: #D4A84B;        /* 辅助色・铜鼓金：星级/会员标识/装饰线/荣誉标签 */
  --sx-karst-gray: #7A8C99;         /* 辅助色・喀斯特灰：次要文字/图标 */
  --sx-bg: #F6FAF8;                 /* 背景色・青山白（极浅青灰调，如山水间薄雾） */
  --sx-border: #E5EDE8;             /* 分割线・暖灰绿 */
  --sx-text-1: #1A2A23;             /* 文字一级・深墨：标题/重要信息 */
  --sx-text-2: #485851;             /* 文字二级：正文/普通信息 */
  --sx-text-3: #8A9992;             /* 文字三级：辅助信息/时间 */
  --sx-white: #FFFFFF;

  /* ---------- AI 智能感（v3.0 核心定位：AI 驱动） ---------- */
  --sx-ai-glow: rgba(30, 155, 106, 0.15);   /* 光效青：搜索框光晕/AI 回复背景/选中态 */
  --sx-ai-glow-strong: rgba(30, 155, 106, 0.28); /* 输入聚焦光晕 */
  --sx-gradient-dai: linear-gradient(180deg, #E7F4EE 0%, #F6FAF8 100%); /* 黛山渐变：首页顶部/卡片顶 */

  /* ---------- 字号（七级） ---------- */
  --sx-font-xs: 12px;
  --sx-font-sm: 14px;
  --sx-font-base: 16px;
  --sx-font-lg: 18px;
  --sx-font-xl: 20px;
  --sx-font-2xl: 24px;
  --sx-font-3xl: 28px;
  --sx-font-hero: 36px;             /* 首页主标题（v3.0 信息架构：AI 搜索绝对 C 位） */

  /* ---------- 行高 ---------- */
  --sx-line-body: 1.6;              /* 正文 */
  --sx-line-title: 1.4;             /* 标题 */
  --sx-line-zhuang: 1.8;            /* 壮文专用（防截断） */

  /* ---------- 间距（八级） ---------- */
  --sx-space-1: 8px;
  --sx-space-2: 12px;
  --sx-space-3: 16px;
  --sx-space-4: 20px;
  --sx-space-5: 24px;
  --sx-space-6: 32px;
  --sx-space-7: 40px;
  --sx-space-8: 48px;

  /* ---------- 圆角（v3.0 组件规范） ---------- */
  --sx-radius-btn: 10px;            /* 按钮 */
  --sx-radius-card: 14px;           /* 卡片 */
  --sx-radius-search: 28px;         /* 搜索框（AI 智能搜索，常驻顶部） */
  --sx-radius-modal: 18px;          /* 弹窗 */
  --sx-radius-tag: 20px;            /* 标签 */
  --sx-radius-full: 999px;          /* 胶囊/头像 */

  /* ---------- 组件尺寸（v3.0 组件规范） ---------- */
  --sx-search-height: 52px;         /* AI 搜索框高度 */
  --sx-btn-height: 44px;            /* 主按钮高度 */
  --sx-tag-height: 26px;            /* 标签高度 */

  /* ---------- 阴影（漓江翠调，轻质感） ---------- */
  --sx-shadow-card: 0 4px 20px rgba(30, 155, 106, 0.06);
  --sx-shadow-card-hover: 0 10px 32px rgba(30, 155, 106, 0.14);
  --sx-mask: rgba(26, 42, 35, 0.55);

  /* ---------- 民族元素四层融入法则（肌理/装饰/图标/插画） ---------- */
  --sx-texture-opacity: 0.04;       /* 第一层・肌理：山水纹理透明度 3%~5%，只留质感 */
  --sx-ornament-max-size: 12px;     /* 第二层・装饰：壮锦回纹/铜鼓圆点几何细节上限 */
  --sx-ornament-opacity: 0.25;      /* 第二层・装饰透明度上限 20%~30% */

  /* ---------- 动效（动画硬件加速） ---------- */
  --sx-dur-fast: 0.15s;
  --sx-dur-base: 0.25s;
  --sx-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================================
 * 百色首发站专属主题层（M88 百色定制版；body.sx-baise 启用）
 * 策略：覆盖主变量使通用 .sx-* 组件自动百色化（零组件改动）+ 百色专属变量
 * 双主色：右江青（生活服务）+ 红城红（城市精神/重要提示）
 * 多城市底座：其余城市沿用默认 :root 通用值；城市切换仅切作用域类
 * ============================================================================ */
.sx-baise {
  /* 双主色（M90 色彩精确化：右江青饱和度 72% 更通透；红城红明度 85% 更沉稳） */
  --sx-primary: #1F8A6B;            /* 主色1・右江青：主按钮/搜索框/导航高亮/生态板块 */
  --sx-primary-hover: #24A078;      /* 右江青悬停（明度 +8%） */
  --sx-primary-soft: #E8F4F0;
  --sx-zhuangjin-red: #C63227;      /* 主色2・红城红：标签/强调按钮/红色文化板块/试运营标识 */
  --sx-tonggu-gold: #D4A03D;        /* 辅助色・铜鼓金（M90 +5% 渐变质感见 polish.css） */
  --sx-karst-gray: #7A8C99;
  --sx-bg: #F7FAF9;                 /* 背景・右江晨雾 */
  --sx-border: #E7EEEA;
  --sx-text-1: #1A2622;             /* 四级文字灰度（M90 精确对齐） */
  --sx-text-2: #4A5752;
  --sx-text-3: #8A9691;
  --sx-text-4: #B0BAB6;             /* 提示级文字（M90 新增） */

  /* 百色专属变量 */
  --sx-baise-mango: #F0B73C;        /* 芒果黄：特产板块/提示/活泼元素 */
  --sx-baise-redgray: #F4F1F0;      /* 红城灰：红色板块背景/卡片底色 */
  --sx-baise-gradient-dai: linear-gradient(180deg, #E6F2EE 0%, #F7FAF9 60%, #F9F5F4 100%); /* 黛山渐变：右江到红城 */

  /* 阴影三级体系（M90：常态极轻/悬停上浮/弹窗分层） */
  --sx-shadow-card: 0 2px 12px rgba(31, 138, 107, 0.05);
  --sx-shadow-card-hover: 0 6px 20px rgba(31, 138, 107, 0.12);
  --sx-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* 肌理统一（M90：页面背景 3.5%/卡片 0.5%/分割线 0.5px） */
  --sx-texture-opacity: 0.035;
  --sx-card-texture-opacity: 0.005;
  --sx-border-width: 0.5px;

  /* 动效统一（M90：200ms ease-out；动画仅 transform/opacity 硬件加速） */
  --sx-dur-base: 200ms;
  --sx-search-height: 54px;         /* 百色版搜索框加高 2px（Hero 版 56px 见组件类） */
}