/* ============================================================
   云霄罐罐罐米线 · 云南风主题（扎染靛蓝）
   通过 JS 切换启用，覆盖默认暗夜主题的配色与部分组件
   ============================================================ */

:root{
  --bg:#f4eee1;                 /* 米白宣纸 */
  --ink:#1e3a52;                /* 深靛蓝 */
  --accent:#c93a22;             /* 朱砂红（品牌印章色） */
  --ink-45:rgba(30,58,82,.55);
  --ink-25:rgba(30,58,82,.32);
  --line:rgba(30,58,82,.22);
}

::selection{background:var(--accent);color:#f4eee1;}

/* 颗粒在浅色底上再淡一点 */
.grain{opacity:.05;}

/* 顶栏滚动态改为米白 */
.topbar.scrolled{
  background:rgba(244,238,225,.88);
  border-bottom-color:var(--line);
}

/* Hero 仍是深色图片，文字保持米白 */
.hero-inner,.hero-title,.hero-slogan{color:#f5f2ec;}
.hero-kicker{color:rgba(245,242,236,.55);}
.hero-slogan b{color:var(--accent);}

/* 图片说明、分隔线等已由变量驱动，无需覆盖 */

/* 轮播按钮 */
.car-btn{border-color:rgba(30,58,82,.4);background:rgba(244,238,225,.75);color:#1e3a52;}
.car-btn:hover{background:var(--accent);border-color:var(--accent);color:#f4eee1;}
.car-dots button{background:rgba(244,238,236,.5);}

/* 按钮 hover 反色 */
.btn:hover{color:#f4eee1;}

/* 品牌合作板块：扎染蓝底 + 白纹，全站唯一反色区块，呼应门店扎染吊顶 */
.franchise-cta{
  background:linear-gradient(rgba(20,44,66,.88),rgba(20,44,66,.88)),url('/assets/batik.jpg') center/720px repeat;
  color:#f5f2ec;
}
.franchise-cta .section-label,
.franchise-cta .stat .key,
.franchise-cta .stat .val small{color:rgba(245,242,236,.55);}
.franchise-cta .franchise-title{color:#f5f2ec;}
.franchise-cta .caption{color:rgba(245,242,236,.5);}
.franchise-cta .car-btn{border-color:rgba(245,242,236,.4);background:rgba(20,44,66,.55);color:#f5f2ec;}
.franchise-cta .car-btn:hover{background:var(--accent);border-color:var(--accent);color:#f4eee1;}

/* ---------- 山水长卷（大山大水横幅） ---------- */
.yn-band{
  display:block;
  position:relative;
  height:clamp(200px,34vh,360px);
  overflow:hidden;
  border-top:1px solid var(--line);
}
.yn-band svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
/* 群山云海：顶部承接 Hero 深色画面，底部与米白页面自然衔接 */
.yn-band:not(.yn-band-water){
  background:linear-gradient(to bottom,#17130d 0%,#5c5340 16%,#cfc2a5 34%,#ece3cf 60%,#f4eee1 85%);
}
/* 梯田流水：顶部与米白衔接，底部没入深靛蓝，引向扎染蓝合作区 */
.yn-band-water{
  background:linear-gradient(to bottom,#f4eee1 0%,#e4d9c4 100%);
  height:clamp(220px,36vh,380px);
}

@media (max-width:900px){
  .yn-band{height:200px;}
  .yn-band-water{height:210px;}
}

/* 页脚保持米白体系，无需覆盖 */

/* 移动端菜单：深靛蓝底 */
@media (max-width:900px){
  .mobile-menu{background:rgba(30,58,82,.97);}
  .mobile-menu a{color:#f5f2ec;}
  .mobile-menu .m-hotline{color:#ffb59d;}
  .menu-toggle{border-color:rgba(30,58,82,.4);}
  .menu-toggle span{background:var(--ink);}
  body.menu-open .menu-toggle span{background:#f5f2ec;}
}