/* ============================================================
   颐福宁 · 全站品牌系统  brand.css
   一个品牌 · 两种皮肤 · 一套已验证图表色
   —— 供 home / brand / dashboard 等页面统一引用 ——
   ============================================================ */

:root{
  /* —— 品牌 DNA(全站不变)—— */
  --kl-brand:#1E8549;      --kl-brand-vivid:#2ECC71;  --kl-brand-deep:#0E633A;
  --kl-brand-mint:#6EE7A8; --kl-brand-tint:#E9FAF0;   --kl-brand-line:#BDEBCF;
  --kl-forest:#0E2A1C;     --kl-forest-2:#07130D;
  --kl-care:#F0A8BC;       --kl-care-deep:#A84462;    --kl-care-tint:#FBEEF4;
  --kl-info:#2FA0A6;       --kl-gold:#E7C257;

  /* 运动曲线 / 圆角 —— 全站统一手感 */
  --kl-ease-fluid:cubic-bezier(0.32,0.72,0,1);
  --kl-ease-soft:cubic-bezier(0.22,0.61,0.18,1);
  --kl-r:2rem; --kl-r-sm:1.5rem;

  /* —— 图表 token(dataviz 已跑 validator · LIGHT)—— */
  --viz-surface:#fcfcfb; --viz-plane:#f9f9f7;
  --viz-ink:#0b0b0b; --viz-ink2:#52514e; --viz-muted:#898781;
  --viz-grid:#e1e0d9; --viz-axis:#c3c2b7;
  --s1:#1E8549; --s2:#2a78d6; --s3:#eda100; --s4:#c65b86; --s5:#4a3aa7; --s6:#eb6834;
  --seq1:#E9FAF0; --seq2:#BDEBCF; --seq3:#6EE7A8; --seq4:#2ECC71; --seq5:#1E8549; --seq6:#0E633A;
  --st-good:#0ca30c; --st-warn:#fab219; --st-serious:#ec835a; --st-crit:#d03b3b;
}

/* —— 图表暗色皮肤(同一批色为暗底重新取步,非直接翻转)—— */
.viz-dark{
  --viz-surface:#12140f; --viz-plane:#0b0d09;
  --viz-ink:#EAF3EC; --viz-ink2:#c3c2b7; --viz-muted:#8A968C;
  --viz-grid:#232a24; --viz-axis:#38423a;
  --s1:#2ea865; --s2:#3987e5; --s3:#c98500; --s4:#cf6386; --s5:#9085e9; --s6:#d95926;
  --seq1:#0E633A; --seq2:#15743f; --seq3:#1E8549; --seq4:#25a35c; --seq5:#2ECC71; --seq6:#6EE7A8;
}

/* —— 皮肤 A · 暖(家属向)—— */
.theme-warm{
  --bg:#FBF8F1; --paper:#FFFDF9; --ink:#1B241E; --ink2:#5C6B60; --ink3:#8A968C;
  --line:rgba(27,36,30,.08); --accent:var(--kl-brand);
  --font-display:"Noto Serif SC",Georgia,serif;
}
/* —— 皮肤 B · 森(机构向)—— */
.theme-forest{
  --bg:#07130D; --paper:rgba(255,255,255,.04); --ink:#EAF3EC; --ink2:#9DB0A4; --ink3:#5E7267;
  --line:rgba(255,255,255,.10); --accent:var(--kl-brand-vivid);
  --font-display:"Space Grotesk","Noto Sans SC",sans-serif;
}

/* —— 胶片颗粒(固定层，不参与滚动) —— */
.kl-grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.theme-forest .kl-grain{ mix-blend-mode:screen; opacity:.05; }

/* —— 玻璃(仅 fixed/sticky 使用 backdrop-blur) —— */
.kl-glass{ background:rgba(251,248,241,.72); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); }
.theme-forest .kl-glass, .kl-glass-dark{ background:rgba(9,22,15,.6); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3); }

/* —— eyebrow 微标 —— */
.kl-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; border-radius:9999px; padding:.35rem .85rem;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; font-weight:600; }

/* —— 岛屿按钮 + button-in-button —— */
.kl-btn{ display:inline-flex; align-items:center; gap:.6rem; border-radius:9999px; padding:.7rem .55rem .7rem 1.4rem;
  font-weight:600; transition:transform .5s var(--kl-ease-fluid), background-color .5s var(--kl-ease-fluid), box-shadow .5s var(--kl-ease-fluid); }
.kl-btn:active{ transform:scale(.975); }
.kl-btn .isle{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:9999px; transition:transform .5s var(--kl-ease-fluid); }
.kl-btn:hover .isle{ transform:translate(3px,-1px) scale(1.06); }

/* —— Doppelrand 双层卡 —— */
.kl-card{ border-radius:var(--kl-r); padding:.5rem; }
.kl-card>.core{ border-radius:calc(var(--kl-r) - .5rem); box-shadow:inset 0 1px 1px rgba(255,255,255,.5); }
.kl-lift{ transition:transform .7s var(--kl-ease-fluid), box-shadow .7s var(--kl-ease-fluid); }
.kl-lift:hover{ transform:translateY(-6px); }

/* —— 滚动入场(仅 transform/opacity/blur) —— */
.reveal{ opacity:0; transform:translateY(2.2rem); filter:blur(8px);
  transition:opacity .9s var(--kl-ease-soft), transform .9s var(--kl-ease-soft), filter .9s var(--kl-ease-soft); will-change:transform,opacity; }
.reveal.in{ opacity:1; transform:none; filter:none; }

@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;filter:none;} }