/* 引入双主题令牌：浅色态用 :root[data-theme='light'] 覆盖，跟随官网深浅色 */
@import url('rbl-demo-theme.css');
/* 统一图标规范（@import 必须集中在顶部，写在文件末尾会被浏览器整条忽略） */
@import url('rbl-demo-icons.css');

/* ===== RBL Demo 统一皮肤（品牌皮肤收敛） =====
   作用：把任意独立 demo 原型收敛到瑞佰仑官网禅意风（暗色令牌），
   不改动 demo 内部功能结构，只覆盖 CSS 变量 + 几处硬编码光晕 + 提供品牌壳样式。
   加载顺序：必须放在 demo 自带 <style> 之后，才能用同名 :root 变量覆盖。
   与 rbl-2.0/src/styles/tokens.css 暗色令牌一致。
*/
:root {
  /* —— 注入官网禅意暗色令牌 —— */
  --paper:#1c1a16; --paper-raised:#26231d; --paper-sunken:#161410;
  --ink:#ece6d8; --indigo:#a6b6c8; --moss:#94a87b; --moss-deep:#7e9265; --moss-ink:#a9bd8e; --moss-soft: rgba(148,168,123,0.14);
  --line:#403b31; --muted:#a39b8a; --warn:#c99a45; --err:#c0655f; --ok:#7ba06f;

  /* —— 收敛 demo 原有语义变量到品牌（后定义覆盖先定义） —— */
  --bg: var(--paper-sunken);
  --bg-surface: var(--paper-raised);
  --glass: rgba(236,230,216,0.035);
  --glass-strong: rgba(236,230,216,0.06);
  --glass-border: var(--line);
  --bg-card: rgba(236,230,216,0.035);
  --bg-card-hover: rgba(236,230,216,0.06);
  --border: var(--line);
  --border-hover: var(--moss-deep);
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-bright: var(--ink);
  --primary: var(--moss-ink);          /* 酸性绿 → 苔绿 */
  --primary-dim: rgba(169,189,142,0.12);
  --primary-soft: rgba(169,189,142,0.10);
  --accent: var(--indigo);             /* 蓝紫 → 黛蓝 */
  --accent-color: var(--indigo);
  --accent-dim: rgba(166,182,200,0.12);
  --accent-soft: rgba(166,182,200,0.10);
  --glow-primary: 0 0 24px rgba(169,189,142,0.14);
  --glow-accent: 0 0 24px rgba(166,182,200,0.12);
  --radius-sm: 2px; --radius: 2px; --radius-lg: 6px;
}

/* —— 字体收敛：去掉 Inter 主导，中文无衬线 + 衬线标题 —— */
* { font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif !important; }
h1,h2,h3,.nav-brand,.hero h1 { font-family:'Noto Serif SC','Shippori Mincho',serif !important; }

/* —— 背景光晕收敛：去酸性绿/蓝紫，改苔绿/黛蓝淡雾 —— */
.bg-mesh {
  background:
    radial-gradient(ellipse 900px 700px at 12% 0%, rgba(148,168,123,0.06), transparent 55%),
    radial-gradient(ellipse 800px 600px at 88% 100%, rgba(166,182,200,0.05), transparent 55%),
    radial-gradient(ellipse 600px 500px at 50% 50%, rgba(166,182,200,0.03), transparent 60%) !important;
}

/* —— demo 自有 nav 下移到品牌 header 之下，并收敛配色 —— */
nav {
  top: 64px !important;
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  border-bottom: 1px solid var(--line) !important;
}
.nav-brand { background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }
.nav-cta { background: var(--moss-soft) !important; color: var(--moss-ink) !important; border: 1px solid var(--line) !important; }
.nav-cta:hover { background: rgba(169,189,142,0.16) !important; box-shadow: none !important; transform: translateY(-1px); }

/* ===== 瑞佰仑品牌壳：页眉 ===== */
.rbl-demo-header {
  position: relative; z-index: 200; height: 64px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.rbl-demo-header-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.rbl-demo-header .brand { display: flex; align-items: baseline; gap: 8px; }
.rbl-demo-header .brand .zh { font-family:'Noto Serif SC','Shippori Mincho',serif; font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.rbl-demo-header .brand .en { font-size: .6rem; letter-spacing: .24em; color: var(--muted); }
.rbl-demo-nav { display: flex; gap: 24px; }
.rbl-demo-nav a { color: var(--ink); font-size: .85rem; }
.rbl-demo-nav a:hover { color: var(--moss-ink); }
.rbl-demo-header .btn { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 2px; font-size: .82rem; background: var(--moss); color: var(--paper); }
.rbl-demo-header .btn:hover { background: var(--moss-deep); }

/* ===== 瑞佰仑品牌壳：页脚 ===== */
.rbl-demo-footer { border-top: 1px solid var(--line); padding: 40px 0 28px; background: var(--paper-raised); }
.rbl-demo-footer .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.rbl-demo-footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.rbl-demo-footer h4 { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--moss-ink); margin-bottom: 12px; }
.rbl-demo-footer a { display: block; color: var(--muted); font-size: .85rem; padding: 4px 0; }
.rbl-demo-footer a:hover { color: var(--ink); }
.rbl-demo-footer .bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 768px) { .rbl-demo-nav { display: none; } .rbl-demo-footer .grid { grid-template-columns: 1fr 1fr; } }

/* —— 演示页自有「顶栏」下移到品牌页眉之下 ——
   品牌页眉高 64px，占住页面最顶端；演示页自己的 nav / 顶栏必须跟着下移，
   否则会被页眉压住（或滚动时盖住页眉）。
   注意：只列真正吸顶的载体，**不要**加 .nav-bar —— 有页面把 .nav-bar 用成了
   手机样张里的绝对定位子元素（内联 top:0），!important 会把样张搞坏。 */
nav, .topbar, .top-bar, .demo-toolbar { top: 64px !important; }

/* ===== 统一图标规范见文件顶部的 @import：rbl-demo-icons.css ===== */