/* Design tokens + base canvas. One nonstigmatizing visual language:
   стан через позу+метафору+колір, не страждання облич. */
:root{
  --ink:#3d4a5c;       /* was #6c7689 — ~7:1 on white, WCAG AA large + normal */
  --ink-soft:#5a6880;  /* was #9aa3b4 — ~4.6:1, passes AA for large text */
  --cool:#acd4cf; --warm:#f0d9be; --coral:#d98e7f;
  --ease:cubic-bezier(.37,0,.32,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  color:var(--ink); min-height:100dvh; overflow-x:hidden; overflow-y:auto;
  display:flex; flex-direction:column; align-items:center;
  /* `safe` centers content that fits, but top-aligns content taller than the
     viewport — otherwise flex centering pushes the top off the scroll area and
     it becomes unreachable (breaks any screen taller than the viewport). */
  justify-content:safe center;
  background:linear-gradient(165deg,#eef4f2 0%,#f4f0ea 55%,#eef1f6 100%);
  -webkit-font-smoothing:antialiased; position:relative;
}
/* дуже повільне «дихання» тла — спокій, не стимуляція */
body::before{
  content:""; position:fixed; inset:-20%;
  background:radial-gradient(40% 36% at 50% 42%, rgba(172,212,207,.15), transparent 70%);
  animation:drift 18s var(--ease) infinite alternate; z-index:0; pointer-events:none;
}
@keyframes drift{from{transform:translateY(-2%) scale(1)}to{transform:translateY(3%) scale(1.08)}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

#app{
  position:relative; z-index:1; width:100%; display:flex; justify-content:center;
  padding-bottom:calc(48px + env(safe-area-inset-bottom)); /* room for crisis dot */
}

@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
}