/* Carenox depth layer (round 2): tinted page, elevated white cards, solid/outlined buttons, AA text, focus rings.
   Shared by every demo/site5 page; post5.py copies it and links it last in <head>. CSS only, no JS. */
:root{
  --e0:#eef3f1;                                                         /* page */
  --e1:0 1px 2px rgba(15,42,32,.06),0 4px 12px rgba(15,42,32,.08);      /* card */
  --e2:0 2px 6px rgba(15,42,32,.10),0 12px 32px rgba(15,42,32,.16);     /* popover / menu / modal / toast */
  --cx-border:#d8e2de;--cx-primary:#146b5b;--cx-primary-hover:#0b5446;--cx-tint:#d2f7ee;--cx-muted:#56665f;--cx-ink:#0f2a20;
  /* astra pages tokens */
  --bg:var(--e0);--border:var(--cx-border);--text-muted:var(--cx-muted);--shadow:var(--e1);--shadow-card:var(--e1);
  /* v5 / v3 app tokens */
  --acc:var(--cx-primary);--ink2:var(--cx-muted);--ink3:var(--cx-muted);--line:var(--cx-border);--card:#fff;
  --text-secondary:var(--cx-muted);--text-tertiary:var(--cx-muted);--border-primary:var(--cx-border);--brand-tertiary:var(--e0);
}
html,body{background:var(--e0)}
.desk{background:var(--e0)!important;border:1px solid var(--cx-border)}
.nav{background:#fff}
/* e1 cards */
.card,.surf,.k{background:#fff;border:1px solid var(--cx-border)!important;box-shadow:var(--e1)!important}
/* e2 floating layers */
.toast,.modal,.drawer,.menu,[role=dialog],[role=menu],[role=tooltip],.tooltip{box-shadow:var(--e2)!important}
/* primary buttons */
.b1,.btn-primary,.send{background:var(--cx-primary)!important;border:1px solid var(--cx-primary)!important;color:#fff!important;
  box-shadow:0 1px 2px rgba(11,84,70,.25),0 2px 6px rgba(11,84,70,.18);transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
.b1:hover,.btn-primary:hover,.send:hover{background:var(--cx-primary-hover)!important;transform:translateY(-1px);box-shadow:0 2px 4px rgba(11,84,70,.28),0 8px 18px rgba(11,84,70,.24)}
.b1:active,.btn-primary:active,.send:active{transform:translateY(0);box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
/* secondary buttons */
.b2,.btn:not(.btn-primary),.resolve,.checkin,.collect,.pay{background:var(--cx-tint)!important;border:1px solid var(--cx-primary)!important;color:var(--cx-primary-hover)!important;
  transition:transform .12s ease,box-shadow .12s ease}
.b2:hover,.btn:not(.btn-primary):hover,.resolve:hover,.checkin:hover,.collect:hover,.pay:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(11,84,70,.14)}
.b2:active,.btn:not(.btn-primary):active,.resolve:active,.checkin:active,.collect:active,.pay:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(11,84,70,.2)}
.resolve:disabled{opacity:1}
.b1.done,.b2.done{background:var(--cx-tint)!important;color:var(--cx-primary-hover)!important;border-color:var(--cx-primary)!important}
/* focus */
:focus-visible{outline:2px solid var(--cx-primary)!important;outline-offset:2px!important}
/* AA text fixes for pale greys */
.date span,.need-note,.footer,.t2,.t3,.cx-form label{color:var(--cx-muted)!important}
#tell-ava::placeholder{color:var(--cx-muted)}
.suggestion:after{color:var(--cx-primary)}
.greeting h1 span{color:var(--cx-primary)!important}
.metric-value .baseline,.big-numbers .old,.big-numbers .big-arrow{color:#738a80!important}
.metric-value .arrow,span[style*="#b3c0b9"]{color:var(--cx-muted)!important}
.cx-sample{background:#f1ede4;color:#6b5f4c!important}
@media (prefers-reduced-motion:reduce){.b1,.b2,.btn,.send,.resolve,.checkin,.collect,.pay{transition:none}.b1:hover,.b2:hover,.btn:hover,.send:hover,.resolve:hover,.checkin:hover,.collect:hover,.pay:hover{transform:none}}